13.9.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>;
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund