Skip to content

Commit 30eec23

Browse files
committed
feat: update articles
1 parent 9fe56e8 commit 30eec23

1 file changed

Lines changed: 69 additions & 63 deletions

File tree

‎JavaScript/TypeScript/类型使用/进阶类型.md‎

Lines changed: 69 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# TypeScript 中的进阶类型
22

3-
## Union Type | 联合类型
3+
# Union Type | 联合类型
44

55
TypeScript 中允许定义联合类型,即指定某个变量可能为 A 类型也可能为 B 类型:
66

@@ -56,6 +56,72 @@ let oops = getProperty(x, 'wargarbl'); // Error! "wargarbl" is not "foo" | "bar"
5656
setProperty(x, 'foo', 'string'); // Error!, string expected number
5757
```
5858

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+
59125
## Partial Type | 偏类型
60126

61127
在实际开发中,我们往往只希望用到某个接口的部分属性,特别是在实体类的定义中:
@@ -120,66 +186,6 @@ declare function pick<T, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K>;
120186
const nameAndAgeOnly = pick(person, 'name', 'age'); // { name: string, age: number }
121187
```
122188

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+
# 链接
148190

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

Comments
 (0)