提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

TypeScript 实用工具类型之 Partial 类型

typescript 类型 实用工具 partial
2023-06-13 09:13:56 时间

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 返回的类型时。

相关文章