|
| 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