TypeScript中的秘宝：揭秘Utility Types，释放你的代码潜能

前端

2024-01-20 05:31:09

在TypeScript开发过程中，我们可能会遇到Utility Types（实用程序类型）。了解这些类型及其用法可以极大地提高我们的开发效率，避免编写冗余代码。

Utility Types在中文版的文档中介绍较少，但它们在实际开发中却非常有用。在本文中，我们将概述Utility Types，并详细介绍一些常用的类型，帮助您充分利用它们来提升代码质量和开发效率。

1. 什么是Utility Types？

Utility Types是一组特殊的类型，它们允许我们以新的方式操作和转换其他类型。这些类型通常用于创建更简洁、更具表达力的代码，并避免编写冗余代码。

2. Utility Types的类型列表：

Partial<T>：创建一个类型，其中T的所有属性都是可选的。
Required<T>：创建一个类型，其中T的所有属性都是必需的。
Readonly<T>：创建一个类型，其中T的所有属性都是只读的。
Pick<T, K>：创建一个类型，其中只包含T中指定的属性K。
Omit<T, K>：创建一个类型，其中不包含T中指定的属性K。
Exclude<T, U>：创建一个类型，其中不包含与类型U兼容的属性。
Intersect<T, U>：创建一个类型，其中包含T和U的所有属性。
Union<T, U>：创建一个类型，其中包含T或U的属性。

3. Utility Types的用法：

我们可以使用Utility Types来创建更简洁、更具表达力的代码。例如，我们可以使用Partial<T>类型来创建具有可空属性的新类型，这可以简化我们对数据的处理。

4. 编码示例：

interface Person {
  name: string;
  age: number;
}

// 使用 Partial<T> 创建可空属性的新类型
type PartialPerson = Partial<Person>;

const person: PartialPerson = {
  name: "John",
};

// 访问 person 的属性
console.log(person.name); // "John"

// 使用 Required<T> 创建必填属性的新类型
type RequiredPerson = Required<Person>;

// 试图创建一个 RequiredPerson 类型但缺少属性将会报错
// const requiredPerson: RequiredPerson = {
//   name: "John",
// };

// 使用 Readonly<T> 创建只读属性的新类型
type ReadonlyPerson = Readonly<Person>;

// 试图修改 ReadonlyPerson 类型属性将会报错
// const readonlyPerson: ReadonlyPerson = {
//   name: "John",
// };

// readonlyPerson.name = "Jane"; // Error: Cannot assign to 'name' because it is a read-only property.

// 使用 Pick<T, K> 创建只包含指定属性的新类型
type NameAndAgePerson = Pick<Person, "name" | "age">;

const nameAndAgePerson: NameAndAgePerson = {
  name: "John",
  age: 30,
};

// 试图访问不存在的属性将会报错
// console.log(nameAndAgePerson.occupation); // Error: Property 'occupation' does not exist on type 'NameAndAgePerson'.

// 使用 Omit<T, K> 创建不包含指定属性的新类型
type WithoutAgePerson = Omit<Person, "age">;

const withoutAgePerson: WithoutAgePerson = {
  name: "John",
};

// 试图访问不存在的属性将会报错
// console.log(withoutAgePerson.age); // Error: Property 'age' does not exist on type 'WithoutAgePerson'.

// 使用 Exclude<T, U> 创建不包含与指定类型兼容的属性的新类型
type WithoutNumberPropertiesPerson = Exclude<Person, number>;

const withoutNumberPropertiesPerson: WithoutNumberPropertiesPerson = {
  name: "John",
};

// 试图访问不存在的属性将会报错
// console.log(withoutNumberPropertiesPerson.age); // Error: Property 'age' does not exist on type 'WithoutNumberPropertiesPerson'.

// 使用 Intersect<T, U> 创建包含两个类型所有属性的新类型
type PersonWithExtraProperties = Intersect<Person, { occupation: string }>;

const personWithExtraProperties: PersonWithExtraProperties = {
  name: "John",
  age: 30,
  occupation: "Software Engineer",
};

// 使用 Union<T, U> 创建包含两个类型属性的新类型
type PersonOrAnimal = Union<Person, { species: string }>;

const personOrAnimal: PersonOrAnimal = {
  name: "John",
  age: 30,
};

const animal: PersonOrAnimal = {
  species: "Dog",
};