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>;
Rahmi Tufanoglu
Zur Übersicht

Mehr vom DevSquad...

Umut Tufanoglu

Simply measure duration of processes in JS

Jan Sauer

Share your iPhone or iPad Screen with every Meeting Tool