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

Mehr vom Devsquad...

Umut Tufanoglu

Simply measure duration of processes in JS

Jan Sauer

Share your iPhone or iPad Screen with every Meeting Tool

Wir freuen uns, Sie kennen zu lernen

Hat Sie unser Angebot überzeugt? Dann freuen wir uns, Sie kennen zu lernen. Kontaktieren Sie uns gerne für ein unverbindliches Erstgespräch.
newcubator GmbH
Freie-Vogel-Straße 369
44269 Dortmund
dortmund@newcubator.com
+49 231/586 873 80
newcubator GmbH
Bödekerstraße 22
30161 Hannover
hannover@newcubator.com
+49 511/957 313 00