TypeScript 实用工具类型之 Partial 类型
TypeScript 实用工具类型之 Partial 类型
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 返回的类型时。