返回

TypeScript工具类型的详解

前端

作为一名资深技术博主，我经常钻研各种编程语言的奥秘。今天，我将深入探讨TypeScript中的工具类型，它们是一组强大的类型操作工具，可以增强代码的可重用性和可维护性。

TypeScript中的工具类型

工具类型是一类特殊的类型，它们不直接表示程序中的数据或行为，而是操作其他类型。TypeScript提供了丰富的工具类型，涵盖各种常见的类型操作场景。

类型别名

类型别名通过给现有类型起一个新的名称来创建新的类型。这有助于提高代码的可读性和可重用性。

type MyString = string;
let myString: MyString = 'Hello World';

交叉类型

交叉类型将多个类型合并为一个新的类型，包含所有父类型的成员。

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

type Profile = {
  photo: string;
  email: string;
};

type PersonWithProfile = Person & Profile;

联合类型

联合类型表示一个值可以属于多个类型之一。

type Shape = 'circle' | 'square' | 'triangle';
let myShape: Shape = 'circle';

元组类型

元组类型表示一个固定长度和类型的元素有序列表。

type Point = [number, number];
let myPoint: Point = [10, 20];

映射类型

映射类型将一个类型的键或值映射到另一个类型。

type User = {
  id: number;
  name: string;
};

type UserRecord = Record<number, User>;

条件类型

条件类型基于给定的条件创建新的类型。

type IsEven = <T extends number> (x: T) => (x % 2 === 0) extends true ? T : never;

推断类型

推断类型从值中推断类型。

let myNumber = 10; // 推断为 number 类型
let myString = 'Hello'; // 推断为 string 类型

索引类型

索引类型表示一个对象中键和值的类型关系。

type MyObject = {
  [key: string]: number;
};

键值对映射类型

键值对映射类型表示一个对象中键值对的类型关系。

type MyMap = {
  [key: string]: {
    name: string;
    age: number;
  };
};

只读类型

只读类型表示一个值不能被修改。

type MyReadOnlyNumber = Readonly<number>;
let myNumber: MyReadOnlyNumber = 10;
myNumber = 20; // 错误：无法修改只读变量

Partial和Required

Partial和Required类型分别表示一个类型中部分或所有属性可以为可选或必选。

type PartialPerson = Partial<Person>;
type RequiredProfile = Required<Profile>;

Omit和Pick

Omit和Pick类型分别表示从一个类型中移除或选择特定的属性。

type PersonWithoutAge = Omit<Person, 'age'>;
type PersonWithOnlyName = Pick<Person, 'name'>;

ReadonlyArray和MutableArray

ReadonlyArray和MutableArray类型分别表示一个只读或可变的数组。

type ReadonlyNumbers = ReadonlyArray<number>;
type MutableNumbers = MutableArray<number>;

Exclude和Extract

Exclude和Extract类型分别表示从一个联合类型中排除或提取特定的类型。

type NotShape = Exclude<'circle' | 'square' | 'triangle', 'circle'>;
type ShapeStartingWithT = Extract<'circle' | 'square' | 'triangle', 't'>;

Union和Intersection

Union和Intersection类型分别表示一个值的类型可以属于多个类型或同时属于多个类型。

type ShapeOrNumber = 'circle' | 'square' | 'triangle' | number;
type CircleAndSquare = 'circle' & 'square';

Never和Unknown

Never和Unknown类型分别表示一个值永远不会出现或一个值类型未知。

type NeverType = never; // 永远不会出现的值
type UnknownType = unknown; // 类型未知的值

结论

TypeScript中的工具类型是一组强大的类型操作工具，可以显著增强代码的质量和可维护性。它们使我们能够创建定制类型、操作现有类型并指定复杂的行为。通过熟练运用这些工具类型，我们可以编写出更健壮、更灵活和更可重用的TypeScript代码。