|
1 | 1 | # TypeScript 中的进阶类型 |
2 | 2 |
|
3 | | -## Union Type | 联合类型 |
| 3 | +# Union Type | 联合类型 |
4 | 4 |
|
5 | 5 | TypeScript 中允许定义联合类型,即指定某个变量可能为 A 类型也可能为 B 类型: |
6 | 6 |
|
@@ -56,6 +56,72 @@ let oops = getProperty(x, 'wargarbl'); // Error! "wargarbl" is not "foo" | "bar" |
56 | 56 | setProperty(x, 'foo', 'string'); // Error!, string expected number |
57 | 57 | ``` |
58 | 58 |
|
| 59 | +# Generics | 泛型 |
| 60 | + |
| 61 | +泛型允许我们灵活地定义某些函数或者类接收的参数类型,更易于创建灵活而可控地可重用组件,泛型函数定义格式如下: |
| 62 | + |
| 63 | +```ts |
| 64 | +<T>(items :T[], callback :(item :T) => T) :T[] |
| 65 | +``` |
| 66 | +
|
| 67 | +这里我们以简单地创建数组的函数为例: |
| 68 | +
|
| 69 | +```ts |
| 70 | +function genericFunc<T>(argument: T): T[] { |
| 71 | + const arrayOfT: T[] = []; // Create empty array of type T. |
| 72 | + arrayOfT.push(argument); // Push, now arrayOfT = [argument]. |
| 73 | + return arrayOfT; |
| 74 | +} |
| 75 | + |
| 76 | +const arrayFromString = genericFunc<string>('beep'); |
| 77 | +console.log(arrayFromString[0]); // "beep" |
| 78 | +console.log(typeof arrayFromString[0]); // String |
| 79 | + |
| 80 | +const arrayFromNumber = genericFunc(42); |
| 81 | +console.log(arrayFromNumber[0]); // 42 |
| 82 | +console.log(typeof arrayFromNumber[0]); // number |
| 83 | +``` |
| 84 | + |
| 85 | +```ts |
| 86 | +// 接口泛型 |
| 87 | +interface Pair<T1, T2> { |
| 88 | + first: T1; |
| 89 | + second: T2; |
| 90 | +} |
| 91 | + |
| 92 | +// 泛型类属性 |
| 93 | +class Pair<T> { |
| 94 | + fst: T; |
| 95 | + snd: T; |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +我们还可以指定泛型子类,即指定某个类型必须是实现某个接口或者继承自某个类: |
| 100 | + |
| 101 | +```ts |
| 102 | +interface HasLength { |
| 103 | + length: number; |
| 104 | +} |
| 105 | + |
| 106 | +function addLengths<T extends HasLength>(t1: T, t2: T): number { |
| 107 | + return t1.length + t2.length; |
| 108 | +} |
| 109 | + |
| 110 | +addLengths('hello', 'abc'); |
| 111 | +addLengths([1, 2, 3], [100, 11, 99]); |
| 112 | +``` |
| 113 | + |
| 114 | +TypeScript 2.3 之后支持泛型默认参数,可以某些场景减少函数类型重载的代码量,譬如: |
| 115 | + |
| 116 | +```ts |
| 117 | +declare function create<T extends HTMLElement = HTMLDivElement, U = T[]>( |
| 118 | + element?: T, |
| 119 | + children?: U |
| 120 | +): Container<T, U>; |
| 121 | +``` |
| 122 | + |
| 123 | +# Mapped Types |
| 124 | + |
59 | 125 | ## Partial Type | 偏类型 |
60 | 126 |
|
61 | 127 | 在实际开发中,我们往往只希望用到某个接口的部分属性,特别是在实体类的定义中: |
@@ -120,66 +186,6 @@ declare function pick<T, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K>; |
120 | 186 | const nameAndAgeOnly = pick(person, 'name', 'age'); // { name: string, age: number } |
121 | 187 | ``` |
122 | 188 |
|
123 | | -# Generics | 泛型 |
124 | | - |
125 | | -泛型允许我们灵活地定义某些函数或者类接收的参数类型,更易于创建灵活而可控地可重用组件,泛型函数定义格式如下: |
126 | | - |
127 | | -```ts |
128 | | -<T>(items :T[], callback :(item :T) => T) :T[] |
129 | | -``` |
130 | | -
|
131 | | -这里我们以简单地创建数组的函数为例: |
132 | | -
|
133 | | -```ts |
134 | | -function genericFunc<T>(argument: T): T[] { |
135 | | - const arrayOfT: T[] = []; // Create empty array of type T. |
136 | | - arrayOfT.push(argument); // Push, now arrayOfT = [argument]. |
137 | | - return arrayOfT; |
138 | | -} |
139 | | - |
140 | | -const arrayFromString = genericFunc<string>('beep'); |
141 | | -console.log(arrayFromString[0]); // "beep" |
142 | | -console.log(typeof arrayFromString[0]); // String |
143 | | - |
144 | | -const arrayFromNumber = genericFunc(42); |
145 | | -console.log(arrayFromNumber[0]); // 42 |
146 | | -console.log(typeof arrayFromNumber[0]); // number |
147 | | -``` |
| 189 | +# 链接 |
148 | 190 |
|
149 | | -```ts |
150 | | -// 接口泛型 |
151 | | -interface Pair<T1, T2> { |
152 | | - first: T1; |
153 | | - second: T2; |
154 | | -} |
155 | | - |
156 | | -// 泛型类属性 |
157 | | -class Pair<T> { |
158 | | - fst: T; |
159 | | - snd: T; |
160 | | -} |
161 | | -``` |
162 | | - |
163 | | -我们还可以指定泛型子类,即指定某个类型必须是实现某个接口或者继承自某个类: |
164 | | - |
165 | | -```ts |
166 | | -interface HasLength { |
167 | | - length: number; |
168 | | -} |
169 | | - |
170 | | -function addLengths<T extends HasLength>(t1: T, t2: T): number { |
171 | | - return t1.length + t2.length; |
172 | | -} |
173 | | - |
174 | | -addLengths('hello', 'abc'); |
175 | | -addLengths([1, 2, 3], [100, 11, 99]); |
176 | | -``` |
177 | | - |
178 | | -TypeScript 2.3 之后支持泛型默认参数,可以某些场景减少函数类型重载的代码量,譬如: |
179 | | - |
180 | | -```ts |
181 | | -declare function create<T extends HTMLElement = HTMLDivElement, U = T[]>( |
182 | | - element?: T, |
183 | | - children?: U |
184 | | -): Container<T, U>; |
185 | | -``` |
| 191 | +- https://dev.to/busypeoples/notes-on-typescript-mapped-types-and-lookup-types-i36 |
0 commit comments