TypeScript工具类型探秘（中）

前端

2023-11-14 15:10:48

我们将在本文深入剖析工具类型在TypeScript中的实现方式，利用索引访问类型、映射类型和条件类型等工具类型来探索如何高效且优雅地解决实际问题。 TypeScript工具类型的第二部分将重点探究以下内容：

工具类型的限制
索引访问类型
映射类型
条件类型

工具类型的限制

工具类型并非万能，在使用时存在一定限制。

工具类型不能用于表示运行时值。例如，你无法使用工具类型来创建变量或常量。
工具类型不能用于控制程序流。例如，你无法使用工具类型来创建循环或分支。
工具类型不能用于创建对象。例如，你无法使用工具类型来创建数组或对象字面量。

索引访问类型

索引访问类型允许你从类型中获取一个值，类似于数组索引或对象属性。索引访问类型使用方括号([])表示。例如，以下代码获取string类型的length属性：

type StringLength = string['length']; // number

索引访问类型可以用于任何具有索引签名的类型。例如，你可以使用索引访问类型来获取数组元素的类型：

type FirstElement<T> = T[0]; // 数组T的第一个元素的类型

或对象属性的类型：

type NameProperty<T> = T['name']; // 对象T的"name"属性的类型

映射类型

映射类型允许你创建一种新类型，该类型是从现有类型派生的，但具有不同的属性或方法。映射类型使用{}表示。例如，以下代码创建一个新类型UserWithAge，它从User类型派生，但具有一个名为age的新属性：

type UserWithAge = {
  name: string;
  age: number;
};

映射类型可以用于从现有类型派生出许多不同类型。例如，你可以使用映射类型来创建一种新类型，该类型具有与现有类型相同的属性，但具有不同的类型：

type StringMap = {
  [key: string]: string;
};

或你可以使用映射类型来创建一种新类型，该类型具有与现有类型不同的属性和方法：

type UserWithFullName = {
  name: string;
  fullName: () => string;
};

条件类型

条件类型允许你根据类型检查的结果创建不同类型的类型。条件类型使用extends和问号(?)表示。例如，以下代码创建一个新类型UserWithFullName，如果User类型具有fullName属性，则该类型具有fullName属性，否则不具有该属性：

type UserWithFullName = User extends { fullName: string } ? User : { fullName: string };

条件类型可以用于创建许多不同类型的类型。例如，你可以使用条件类型来创建一种新类型，该类型具有与现有类型相同的属性，但具有不同的类型：

type StringOrNumber = string | number;

type StringIfNumber<T> = T extends number ? string : T;

type StringOrNumberIfString = StringOrNumber extends string ? string : number;

或你可以使用条件类型来创建一种新类型，该类型具有与现有类型不同的属性和方法：

type UserWithFullName = User extends { fullName: string } ? User : { fullName: string };

type UserWithFullNameOrUnknown = User extends { fullName: string } ? User : unknown;