TypeScript 中的工具类型详解

前言

TypeScript 是 JavaScript 的强类型版本，它提供了一些强大的功能，能帮助我们开发更加健壮、可维护的代码。其中一个特别有用的功能就是 TypeScript 的工具类型，本篇文章将深入探究 TypeScript 中的工具类型，帮助你充分了解它们的作用、使用方式和实际应用。

工具类型是什么？

在 TypeScript 中，工具类型是一组内置的类型，它们旨在实现一些高级的类型操作。这些操作可以帮助我们编写更加简洁和安全的代码，提升开发效率和代码质量，同时也增强了类型检查器的功能。

它们不是标准的类型，因为它们不会返回一个特定的值，而是对一组类型进行操作，并返回另一个类型。这意味着它们可以在编译时使用，而不是在运行时使用。

工具类型的使用

在 TypeScript 中，工具类型以大写字母开头，并以<...>的形式表示。它们可以用于泛型类型或联合类型，它们通常是由 TypeScript 编译器自动推导出来的。下面我们将介绍一些常用的工具类型。

Partial

Partial 工具类型用于将给定的类型的所有属性设置为可选属性。例如，我们有一个 User 接口，它有两个必需的属性name和age：

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

现在我们想创建一个 User 对象只包含 name 属性，age 属性可选，这时我们可以使用 Partial 工具类型：

type PartialUser = Partial<User>;

const partialUser: PartialUser = {
  name: "Tom",
};

PartialUser 现在看起来像这样：

interface PartialUser {
  name?: string;
  age?: number;
}

Required

Required 工具类型与 Partial 相反，它将给定类型的所有属性设置为必需的。例如，我们有一个 User 接口，其中的name属性是可选的：

interface User {
  name?: string;
  age: number;
}

现在我们想创建一个 User 对象，只包含 name 属性，而 age 属性必须存在。我们可以使用 Required 工具类型：

type RequiredUser = Required<User>;

const requiredUser: RequiredUser = {
  name: "Tom",
  age: 25,
};

在上面的代码中，我们创建了一个 RequiredUser 类型并将其用于验证 requiredUser 对象。此时编译器会提示我们必须包含 age 属性，否则会报错。

Readonly

Readonly 工具类型将给定类型的所有属性设置为只读。例如，我们有一个 User 接口：

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

现在我们想创建一个对象，它的属性不能被修改，这时我们可以使用 Readonly 工具类型：

type ReadonlyUser = Readonly<User>;

const readonlyUser: ReadonlyUser = {
  name: "Tom",
  age: 25,
};

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

Record

Record 工具类型用于生成一个符合给定元素类型的对象类型。例如，我们想要创建一个映射，其中每个属性的名称都与相应的数字匹配：

interface NumberToNameMap {
  [key: number]: string;
}

现在我们想要创建一个对象，其中 key 和 value 的类型都应该是 number 类型。我们可以使用 Record 工具类型：

type NumberMap = Record<number, number>;

const numberMap: NumberMap = {
  1: 10,
  2: 20,
  3: 30,
};

Exclude

Exclude 工具类型用于从给定类型中排除某些类型。例如，我们有这样一个联合类型：

type Color = "red" | "green" | "blue";

现在我们想要排除颜色为红色的情况，我们可以使用 Exclude 工具类型：

type NonRedColor = Exclude<Color, "red">;

const nonRedColor: NonRedColor = "green";

注意，Exclude 在编译时不执行运行时检查，它只能排除显式声明的类型。

Extract

Extract 工具类型与 Exclude 相反，它用于从给定类型中提取某些类型。例如，我们有一个联合类型：

type Color = "red" | "green" | "blue";

现在我们想提取颜色为绿色的情况，我们可以使用 Extract 工具类型：

type GreenColor = Extract<Color, "green">;

const greenColor: GreenColor = "green";

ReturnType

ReturnType 工具类型用于获取函数返回值的类型。例如，我们有以下函数：

function add(a: number, b: number) {
  return a + b;
}

现在我们想获取 add 函数的返回类型，我们可以使用 ReturnType 工具类型：

type AddReturnType = ReturnType<typeof add>;

const addResult: AddReturnType = 5;

总结

TypeScript 的工具类型是编写类型安全的高级 TypeScript 代码的重要工具。我们详细地介绍了每个工具类型的作用，示例和使用方法，希望您能够在实际项目中灵活运用这些功能，提高代码的可读性，健壮性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6452a4e4968c7c53b072912f