5.5.2021 |

Typescript Utility Types

Documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html

// Utility Types

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// Partial

interface Person {
  name: string;
  age: number;
}

const updatePerson = (person: Person) => {
};

updatePerson({
  name: "Raul"
});

const updatePerson2 = (person: Partial<Person>) => {
};

updatePerson2({
  name: "Raul"
});

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// Required -> Gegenteil von Partial

interface Car {
  name?: string;
  age?: number;
}

const updateCar = (car: Car) => {
};

updateCar({
  name: "Audi"
});

const updateCar2 = (car: Required<Car>) => {
};

updateCar2({
  name: "Audi",
  age: 6
});

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// Readonly

interface House {
  age: number;
}

const updateHouse = (house: House) => {
  house.age = 10;
};

const updateHouse2 = (house: Readonly<House>) => {
  house.age = 10;
};

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// Pick

interface Employee {
  name: string;
  age: number;
}

type EmployeeNameOnly = Pick<Employee, "name">;

const employee: Employee = {name: "Lars", age: 35};
const employeeNameOnly: EmployeeNameOnly = {name: "Lars", age: 35};

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// Omit

type EmployeeWithoutName = Omit<Employee, "name">;

const EmployeeWithoutName: EmployeeWithoutName = {name: "Lars", age: 35};

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// Exclude

type AvailableDrinks = "Coffee" | "Tea" | "Cola" | "Fanta";

type NotFavoriteDrinks = "Cola" | "Fanta";

let yourDrink: Exclude<AvailableDrinks, NotFavoriteDrinks>;
yourDrink = "Cola";

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// Extract -> Gegenteil von Exclude

type MoreDrinks = "Cola" | "Fanta" | "Sprite";

let hisDrink: Extract<AvailableDrinks, MoreDrinks>;
hisDrink = "Fanta";
hisDrink = "Sprite";

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// NonNullable

interface Smartphone {
  name?: "Apple" | "Samsung" | "Nokia";
}

function getSmartphone(name: Smartphone["name"]) {
}

// function getSmartphone(name?: "Apple" | "Samsung" | "Nokia"){
// }
getSmartphone(undefined);

function getSmartphone2(name: NonNullable<Smartphone["name"]>) {
}

getSmartphone2(undefined);

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
// ReturnType

function getUser(id: number, name: string) {
  return {id, name};
}

type UserReturnType = ReturnType<typeof getUser>;
Zur Übersicht
Rahmi Tufanoglu

Mehr vom Devsquad...

Umut Tufanoglu

Simply measure duration of processes in JS

Jan Sauer

Share your iPhone or iPad Screen with every Meeting Tool

Hallo, ich bin Jörg Herbst!

Ich bin der CEO von newcubator und freue mich über jede Nachricht!

* Pflichtfeld