TypeScript 实用工具类型之 Omit 类型
gml

在本文中,我们将讨论 TypeScript 中使用Omit<>的对象类型转换。这是 TypeScript 实用工具类型系列的第二部分。
在上一篇文章(TypeScript 实用工具类型之 Pick 类型)中,我们介绍了一个例子,在这个例子中,我们通过 Pick<>从基本类型SuperbUser中选择一些属性来派生一个GuestUser类型。之后暗示过,如果要选择的属性数量大于被丢弃的属性数量,那么选择就会变得不那么方便。在这种情况下,我们应该使用Omit<>
在这篇文章中,我们将通过为Subscriber实体创建一个类型来考虑一个Omit<>的例子。

1.示例

Pick<>一样,Omit<>接受基类型作为第一个参数,接受要省略的键的联合类型作为第二个参数,并返回排除这些属性的派生类型。
回过头来看 ERD,Subscriber实体具有与SuperbUser相同的所有属性——除了 roles
image
SuperbUser派生Subscriber类型显然需要我们只忽略roles属性,而不是选择其他所有属性:

1
2
3
4
5
6
7
8
9
10
11
12
type SuperbUser = {
userId: number,
macAddress: string,
username: string,
email: string,
password: string,
firstName: string,
lastName: string,
roles: ('Admin' | 'Editor' | 'Author')[]
};

type Subscriber = Omit<SuperbUser, 'roles'>;

因此,在本例中,TypeScript 的Omit<>Pick<>更方便。我们现在可以创建一个subscriber对象,它的字段中删除了roles属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const subscriber: Subscriber = {
userId: 4,
macAddress: '132546',
username: 'xiaan',
email: 'xiaan@163.com',
password: '12345678',
firstName: 'an',
lastName: 'xia'
};

console.log(subscriber);
/*
{
"userId": 4,
"macAddress": "132546",
"username": "xiaan",
"email": "xiaan@163.com",
"password": "12345678",
"firstName": "an",
"lastName": "xia"
}
*/

console.log(subscriber.roles); // undefined

现在,让我们试着向 subscriber 添加 roles属性:

1
2
3
subscriber.roles = ['Reader', 'Commenter']; // Property 'roles' does not exist on type 'Subscriber'.

console.log(subscriber.roles); // ["Reader", "Commenter"]

TypeScript 抛出一个错误:

1
// Property 'roles' does not exist on type 'Subscriber'.

2. 应用于 Interface

就像在Pick<>中一样,我们可以使用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
37
interface SuperbUser {
userId: number;
macAddress: string;
username: string;
email: string;
password: string;
firstName: string;
lastName: string;
roles: ('Admin' | 'Editor' | 'Author')[]
};

type Subscriber = Omit<SuperbUser, 'roles'>;

const subscriber: Subscriber = {
userId: 4,
macAddress: '132546',
username: 'xiaan',
email: 'xiaan@163.com',
password: '12345678',
firstName: 'an',
lastName: 'xia'
};

console.log(subscriber);
/*
{
"userId": 4,
"macAddress": "132546",
"username": "xiaan",
"email": "xiaan@163.com",
"password": "12345678",
"firstName": "an",
"lastName": "xia"
}
*/

console.log(subscriber.roles); // undefined

3. 谨慎使用

与 Pick<> 一样,Typescript Omit 的第二个参数也接受键的并集。因此,如果需要省略任何其他属性,可以使用操作符 | 将它们添加到第二个参数中:

1
type Subscriber = Omit<SuperbUser, 'roles' | 'firstName' | ...>;

当需要省略的属性多于需要选取的属性时,应该避免使用Omit<>,而使用Pick<>

4.小结

在本文中,我们通过一个示例深入研究了Omit<>,该示例通过从基本类型SuperbUser中省略一个属性来为 Subscriber 实体派生一个类型。我们看到,Omit<>Pick<>相反,当我们想从基类型中选取更多属性并较少省略时,Omit<>更加方便。
在下一篇文章中,我们将介绍使用Partial的对象类型转换。

由 Hexo 驱动 & 主题 Keep
访客数 访问量