Typescript学习(十三)工具类型进阶

前端

2024-01-20 01:58:32

工具类型的宝藏：深入探索 TypeScript 工具类型

在之前的冒险中，我们揭开了属性、结构、集合和模式匹配工具类型的面纱，了解了它们如何增强我们塑造 TypeScript 类型的能力。现在，让我们深入挖掘这些宝藏，探索它们的进阶用法，以应对更复杂的编程挑战。

属性修饰工具类型：属性的守护者

属性修饰工具类型就像是给你的 TypeScript 属性穿上盔甲，赋予它们特殊的力量和保护。

Readonly：只读战士

Readonly<T> 将你的属性标记为不可修改的战士，一旦创建，就永远无法改变。这对于确保数据的一致性和防止意外修改非常有用。

Partial：可选游侠

Partial<T> 赋予你的属性游侠自由选择的能力，允许它们在必要时不存在。这种灵活性可以让你轻松创建具有缺失属性的部分对象，而无需担心类型错误。

结构工具类型：自定义类型的建筑师

结构工具类型就像定制房屋的蓝图，允许你构建具有特定结构和属性的新类型。

{ [P in K]: T }：动态建造者

{ [P in K]: T } 允许你动态创建具有由 K 中属性名称组成的属性的新类型。每个属性的类型由 T 指定，就像一个模块化拼图，你可以根据需要组装。

{ [P in K]?: T }：可选建造者

{ [P in K]?: T } 与它的兄弟相似，但增加了额外的灵活性。它创建的新类型中的所有属性都是可选的，让你可以轻松处理可能存在或不存在的数据。

集合工具类型：团队合作者

集合工具类型擅长创建团队，以元素的形式连接类型。

Array：有序团队

Array<T> 创建一个元素按顺序排列的团队，就像一个井然有序的队列。每个元素的类型由 T 指定，让你可以轻松管理同类型元素的集合。

Tuple<T1, T2, ..., Tn>：固定团队

Tuple<T1, T2, ..., Tn> 创建一个固定大小的团队，每个成员都有自己特定的类型，就像一个有着明确角色的团队。这种结构对于处理需要特定属性组合的数据非常有用。

模式匹配工具类型：类型侦探

模式匹配工具类型就像侦探，深入类型，提取特定信息。

keyof T：属性侦探

keyof T 就像一个熟练的侦探，发现 T 中所有属性的名称，让你可以轻松获取属性列表。

T[K]：值侦探

T[K] 充当一个专注的侦探，深入到 T 中并提取具有特定名称 K 的属性的值。这对于访问嵌套对象或从类型中提取特定数据非常有用。

示例探索

让我们用一些代码示例来进一步探索这些工具类型的强大功能：

// 使用 Readonly<T> 确保对象不可修改
interface User {
  name: string;
  age: number;
}

const readonlyUser: Readonly<User> = {
  name: "John",
  age: 30,
};

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

// 使用 Partial<T> 创建部分对象
interface Address {
  street: string;
  city: string;
  state: string;
}

const partialAddress: Partial<Address> = {
  street: "Main Street",
};

// partialAddress.city; // undefined (optional property)

// 使用 { [P in K]: T } 创建动态类型
type Color = "red" | "green" | "blue";
type ColorMap = { [P in Color]: string };

const colorMap: ColorMap = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF",
};

colorMap["red"]; // "#FF0000"