Typescript has a flexible type system that allows users to create new types. Additionally, with the help of utility types, developers can transform existing types.
In this article, we review five useful TypeScript utility types.
PermalinkAwaited<Type>
Awaited
is created to model await
in async
functions or the .then()
method in promises.
type T1 = Awaited<Promise<number>>;
// Type T1 = number
type T2 = Awaited<Promise<Promise<string>>>;
// type T2 = string
type T3 = Awaited<boolean | string | Promise<number>>;
// type T3 = boolean | string | number
PermalinkNonNullable<Type>
NonNullable
creates a new type by excluding null
and undefined
from the Type
.
type T0 = string | number | null | undefined;
type T1 = NonNullable<T0>;
// type T1 = string | number
PermalinkExclude<UnionType, ExcludedMembers>
Exclude
constructs a new type by excluding ExcludedMembers
from UnionType
.
type T0 = Exclude<"a" | "b" | "c" | "d", "a" | "d">
// type T0 = "b" | "C"
You can use Exclude
to filter undesirable types such as null
and undefined
from a type. In this case, Exclude
has the same effect as NonNullable
.
type T1 = string | number | null | undefined;
type T2 = Exclude<T1, null | undefined>
// type T2 = string | number
PermalinkExtract<Type, Union>
Extract
constructs a new type by extracting Union
from Type
. You can view Extract
as opposite of Exclude
.
type T1 = Extract<"x"|"y"|"z", "y">
// type T1 = "y"
type T1 = Extract<"x"|"y"|"z", "y" | "z">
// type T2 = "y" | "z"
Extract
can be thought of as the intersection of two given types. In the following example, common elements of two types are extracted.
type T3 = Extract<'a' | 'b' | 'c', 'a' | 'b' | 'd'>;
// type T3 = 'a' | 'b'
One useful use case of Extract
is to find the common base of two types.
interface Human {
id: string;
name: string;
surname: string;
ssn: number;
}
interface Dog {
id: string;
name: string;
breed: string;
sound: string;
}
type CommonKeys = Extract<keyof Human, keyof Dog>;
// type CommonKeys = "id" | "name"
PermalinkRecord<Keys, Type>
Record
creates a new type whose property keys are Keys
and whose property values are Type
. You can use this utility to map the properties of a type to another type.
type Coordinates = Record<"x"|"y"|"z", number>
// Type Coordinates = { x: number, y:number, z: number}
interface PageInfo = {
id: number;
route: string;
title: string;
};
type PageName = 'home' | 'services' | 'about' | 'contact';
const pages: Record<PageName, PageInfo> = {
home : {id: 1, route: "home", title: "Home"},
services : {id: 2, route: "services", title: "Services"},
about : {id: 3, route: "services", title: "Services"},
contact : {id: 4, route: "services", title: "Services"},
}
PermalinkSummary
Awaited
, NonNullable
, Extract
, Exclude
and Record
are TypeScript utility types that help developers to create new types by transforming existing ones.