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