在本文中，我们将使用Partial<>来讨论 TypeScript 中的对象类型转换。这是 TypeScript 实用工具类型系列的第三部分。
在上一篇文章（TypeScript 实用工具类型Omit类型），我们介绍了一个示例，在该示例中，我们通过省略基本类型SuperbUser的一个属性（使用Omit<>）来派生Subscriber类型。
在这篇文章中，我们将考虑一个 TypeScript Partial<> 的例子，通过修改我们的Subscriber类型来假设一个更现实的场景。
1.场景概述
对于我们的博客，我们会有不允许点赞或评论文章的 GuestUser。我们将允许 Subscriber 点赞和评论。所以，情况是这样的：
- GuestUser 必须用他们的 email 注册并成为 Subscriber 。
- 他们会在发送到自己邮箱的 email 中收到设置 password 的链接。
- 然后他们能够设置他们的 password，firstName 和 lastName。
在这种情况下，我们之前派生的 Subscriber 类型不能以我们想要的方式交付我们的需求：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| type Subscriber = {
userId: number,
macAddress: string,
username: string,
email: string,
password: string,
firstName: string,
lastName: string,
};
const subscriber: Subscriber = {
userId: 4,
macAddress: '1.2.3',
username: 'xiaan',
email: 'xiaan@163.com'
};
console.log(subscriber);
|
TypeScript 指出subscriber与Subscriber类型不一致。这是因为它默认将所有字段设置为必需的。如果我们设置password，firstName和lastName为可选，则不会报错：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| type Subscriber = {
userId: number,
macAddress: string,
username: string,
email: string,
password?: string,
firstName?: string,
lastName?: string,
};
const subscriber: Subscriber = {
userId: 4,
macAddress: '1.2.3',
username: 'xiaan',
email: 'xiaan@163.com'
};
console.log(subscriber);
|
但是这需要首先手动定义Subscriber，然后再设置各个可选属性。在实际的 API 中，手动定义形状并不是一个好主意。
2.Partial
我们希望消除这种麻烦，并更轻松地从Omit<>返回的类型中完成此工作。所以我们要做的是用Partial将返回类型的所有属性设置为可选的：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| type SuperbUser = {
userId: number,
macAddress: string,
username: string,
email: string,
password: string,
firstName: string,
lastName: string,
roles: ('Admin' | 'Editor' | 'Author')[]
};
type Subscriber = Partial<Omit<SuperbUser, 'roles'>>;
const subscriber: Subscriber = {
userId: 4,
macAddress: '1.2.3',
username: 'xiaan',
email: 'xiaan@163.com'
};
console.log(subscriber);
|
现在我们可以自由的为password，firstName和lastName赋值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| subscriber.password = '12345678';
subscriber.firstName = 'an';
subscriber.lastName = 'xia';
console.log(subscriber);
|
但是，就像之前一样，如果我们添加了不属于Subscriber的属性，TypeScript 会再次报错：
1
2
3
4
| subscriber.roles = ['Reader', 'Commenter'];
console.log(subscriber);
|
因此，使用 TypeScript 派生partial类型的好处包括它对对象属性的部分赋值的支持，这是 JavaScript 允许的，而默认 TypeScript 不允许。
3.使用 Interface
如果我们使用基本SuperbUser类型的接口，我们会得到相同的结果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| interface SuperbUser {
userId: number;
macAddress: string;
username: string;
email: string;
password: string;
firstName: string;
lastName: string;
roles: ('Admin' | 'Editor' | 'Author')[]
};
type Subscriber = Partial<Omit<SuperbUser, 'roles'>>;
const subscriber: Subscriber = {
userId: 4,
macAddress: '1.2.3',
username: 'xiaan',
email: 'xiaan@163.com'
};
subscriber.password = '12345678';
subscriber.firstName = 'an';
subscriber.lastName = 'xia';
console.log(subscriber);
|
我们还可以将Omit<>的返回类型重构为中介类型StrictSubscriber，并将其作为 TypeScript Partial 的参数传递：
1
2
| type StrictSubscriber = Omit<SuperbUser, 'roles'>;
type Subscriber = Partial;
|
4. 小结
在这篇文章中，我们介绍了使用实用转换器 partial 的使用，不过手动将类型的某些属性设置为可选更可取，特别是在处理从 API 返回的类型时。
