Skip to content

Commit a7d4a79

Browse files
Merge pull request microsoft#801 from chrissantos1995/utility-types-page
New page for Utility Types.
2 parents 9629eb0 + 3cf4747 commit a7d4a79

File tree

1 file changed

+236
-0
lines changed

1 file changed

+236
-0
lines changed

pages/Utility Types.md

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
# Introduction
2+
3+
TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.
4+
5+
## Table of contents
6+
* [`Partial<T>`](#partialt)
7+
* [`Readonly<T>`](#readonlyt)
8+
* [`Record<K,T>`](#recordkt)
9+
* [`Pick<T,K>`](#picktk)
10+
* [`Exclude<T,U>`](#excludetu)
11+
* [`Extract<T,U>`](#extracttu)
12+
* [`NonNullable<T>`](#nonnullablet)
13+
* [`ReturnType<T>`](#returntypet)
14+
* [`InstanceType<T>`](#instancetypet)
15+
* [`Required<T>`](#requiredt)
16+
* [`ThisType<T>`](#thistypet)
17+
18+
# `Partial<T>`
19+
20+
Constructs a type with all properties of `T` set to optional. This utility will return a type that represents all subsets of a given type.
21+
22+
##### Example
23+
24+
```ts
25+
interface Todo {
26+
title: string;
27+
description: string;
28+
}
29+
30+
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
31+
return { ...todo, ...fieldsToUpdate };
32+
}
33+
34+
const todo1 = {
35+
title: 'organize desk',
36+
description: 'clear clutter',
37+
};
38+
39+
const todo2 = updateTodo(todo1, {
40+
description: 'throw out trash',
41+
});
42+
```
43+
44+
# `Readonly<T>`
45+
46+
Constructs a type with all properties of `T` set to `readonly`, meaning the properties of the constructed type cannot be reassigned.
47+
48+
##### Example
49+
50+
```ts
51+
interface Todo {
52+
title: string;
53+
}
54+
55+
const todo: Readonly<Todo> = {
56+
title: 'Delete inactive users',
57+
};
58+
59+
todo.title = 'Hello'; // Error: cannot reassign a readonly property
60+
```
61+
62+
This utility is useful for representing assignment expressions that will fail at runtime (i.e. when attempting to reassign properties of a [frozen object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)).
63+
64+
##### `Object.freeze`
65+
66+
```ts
67+
function freeze<T>(obj: T): Readonly<T>;
68+
```
69+
70+
# `Record<K,T>`
71+
72+
Constructs a type with a set of properties `K` of type `T`. This utility can be used to map the properties of a type to another type.
73+
74+
##### Example
75+
76+
```ts
77+
interface PageInfo {
78+
title: string;
79+
}
80+
81+
type Page = 'home' | 'about' | 'contact';
82+
83+
const x: Record<Page, PageInfo> = {
84+
about: { title: 'about' },
85+
contact: { title: 'contact' },
86+
home: { title: 'home' },
87+
};
88+
```
89+
90+
# `Pick<T,K>`
91+
92+
Constructs a type by picking the set of properties `K` from `T`.
93+
94+
##### Example
95+
96+
```ts
97+
interface Todo {
98+
title: string;
99+
description: string;
100+
completed: boolean;
101+
}
102+
103+
type TodoPreview = Pick<Todo, 'title' | 'completed'>;
104+
105+
const todo: TodoPreview = {
106+
title: 'Clean room',
107+
completed: false,
108+
};
109+
```
110+
111+
# `Exclude<T,U>`
112+
113+
Constructs a type by excluding from `T` all properties that are assignable to `U`.
114+
115+
##### Example
116+
117+
```ts
118+
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
119+
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
120+
type T2 = Exclude<string | number | (() => void), Function>; // string | number
121+
```
122+
123+
# `Extract<T,U>`
124+
125+
Constructs a type by extracting from `T` all properties that are assignable to `U`.
126+
127+
##### Example
128+
129+
```ts
130+
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
131+
type T1 = Extract<string | number | (() => void), Function>; // () => void
132+
```
133+
134+
# `NonNullable<T>`
135+
136+
Constructs a type by excluding `null` and `undefined` from `T`.
137+
138+
##### Example
139+
140+
```ts
141+
type T0 = NonNullable<string | number | undefined>; // string | number
142+
type T1 = NonNullable<string[] | null | undefined>; // string[]
143+
```
144+
145+
# `ReturnType<T>`
146+
147+
Constructs a type consisting of the return type of function `T`.
148+
149+
##### Example
150+
151+
```ts
152+
type T0 = ReturnType<() => string>; // string
153+
type T1 = ReturnType<(s: string) => void>; // void
154+
type T2 = ReturnType<(<T>() => T)>; // {}
155+
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>; // number[]
156+
type T4 = ReturnType<typeof f1>; // { a: number, b: string }
157+
type T5 = ReturnType<any>; // any
158+
type T6 = ReturnType<never>; // any
159+
type T7 = ReturnType<string>; // Error
160+
type T8 = ReturnType<Function>; // Error
161+
```
162+
163+
# `InstanceType<T>`
164+
165+
Constructs a type consisting of the instance type of a constructor function type `T`.
166+
167+
##### Example
168+
169+
```ts
170+
class C {
171+
x = 0;
172+
y = 0;
173+
}
174+
175+
type T0 = InstanceType<typeof C>; // C
176+
type T1 = InstanceType<any>; // any
177+
type T2 = InstanceType<never>; // any
178+
type T3 = InstanceType<string>; // Error
179+
type T4 = InstanceType<Function>; // Error
180+
```
181+
182+
# `Required<T>`
183+
184+
Constructs a type consisting of all properties of `T` set to required.
185+
186+
##### Example
187+
188+
```ts
189+
interface Props {
190+
a?: number;
191+
b?: string;
192+
};
193+
194+
const obj: Props = { a: 5 }; // OK
195+
196+
const obj2: Required<Props> = { a: 5 }; // Error: property 'b' missing
197+
```
198+
199+
# `ThisType<T>`
200+
201+
This utility does not return a transformed type. Instead, it serves a marker for a contextual `this` type. Note that the `--noImplicitThis` flag must be enabled to use this utility.
202+
203+
##### Example
204+
205+
```ts
206+
// Compile with --noImplicitThis
207+
208+
type ObjectDescriptor<D, M> = {
209+
data?: D;
210+
methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
211+
}
212+
213+
function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
214+
let data: object = desc.data || {};
215+
let methods: object = desc.methods || {};
216+
return { ...data, ...methods } as D & M;
217+
}
218+
219+
let obj = makeObject({
220+
data: { x: 0, y: 0 },
221+
methods: {
222+
moveBy(dx: number, dy: number) {
223+
this.x += dx; // Strongly typed this
224+
this.y += dy; // Strongly typed this
225+
}
226+
}
227+
});
228+
229+
obj.x = 10;
230+
obj.y = 20;
231+
obj.moveBy(5, 5);
232+
```
233+
234+
In the example above, the `methods` object in the argument to `makeObject` has a contextual type that includes `ThisType<D & M>` and therefore the type of `this` in methods within the `methods` object is `{ x: number, y: number } & { moveBy(dx: number, dy: number): number }`. Notice how the type of the `methods` property simultaneously is an inference target and a source for the `this` type in methods.
235+
236+
The `ThisType<T>` marker interface is simply an empty interface declared in `lib.d.ts`. Beyond being recognized in the contextual type of an object literal, the interface acts like any empty interface.

0 commit comments

Comments
 (0)