TypeScript高级类型工具漫谈：22个实战示例，快速进阶为TypeScript高手！
2023-11-14 02:05:35
TypeScript 高级类型工具：开启健壮和可维护代码之旅
TypeScript 作为 JavaScript 的超集，以其强大的类型系统和丰富的语法特性而深受开发者的喜爱。其中，高级类型工具为构建健壮且可维护的代码提供了更强大的支持。本文将深入探讨 TypeScript 中晦涩难懂的 22 个高级类型工具，带你解锁代码进阶新高度。
1. 条件类型：根据条件塑造类型
条件类型允许你根据类型谓词动态创建新的类型。就好比在不同条件下使用不同的工具，条件类型可以根据实际情况塑造所需类型。
type StringOrNumber<T> = T extends string ? T : number;
const value1: StringOrNumber<"Hello"> = "Hello"; // type is "string"
const value2: StringOrNumber<10> = 10; // type is "number"
2. 分配类型：复制类型成员
分配类型如同将类型成员复制粘贴到另一个类型中。它在需要共享数据或合并类型时发挥着至关重要的作用。
interface User {
name: string;
}
type UserDetails = User & { age: number };
const user: UserDetails = {
name: "John Doe",
age: 30,
};
3. 映射类型：逐个属性操作
映射类型让你对对象类型的所有属性进行统一操作。就好像批量处理数据，它可以高效地修改或转换每个属性。
type UserMapped = {
[key in keyof User]: string;
};
const mappedUser: UserMapped = {
name: "John Doe",
age: "30", // Converted to string
};
4. 交叉类型：合并多个类型
交叉类型将多个类型融合为一个新的类型，就像混合不同的材料形成一种独特的化合物。它允许你创建包含来自不同来源的属性的新类型。
type UserWithAddress = User & {
address: string;
};
const userWithAddress: UserWithAddress = {
name: "John Doe",
age: 30,
address: "123 Main Street",
};
5. 联合类型：多重类型选择
联合类型允许一个变量或参数容纳多种类型，就像一个袋子可以装载不同的物品。它为代码提供了更大的灵活性。
type UserOrNumber = User | number;
const value: UserOrNumber = {
name: "John Doe",
};
if (typeof value === "number") {
// Handle the number case
} else {
// Handle the User case
}
6. 元组类型：有序数据集合
元组类型创建了具有固定长度和顺序的数据集合，就像一个装有不同物品的盒子。它确保了数据的正确组织和访问。
type Point = [number, number];
const point: Point = [1, 2]; // [x, y]
7. 枚举类型：预定义值集合
枚举类型提供了一组预先定义的值，就像一个有明确选项的菜单。它消除了使用字符串或数字的混乱，增强了代码的可读性和可维护性。
enum Colors {
Red,
Green,
Blue,
}
const color: Colors = Colors.Blue; // 2
8. 字符串字面值类型：固定字符串值
字符串字面值类型允许你创建只能包含特定字符串值之一的类型，就像一个只能存储特定单词的保险箱。它确保了字符串值的准确性。
type Country = "USA" | "Canada" | "Mexico";
const country: Country = "USA"; // Allowed
const invalidCountry: Country = "Germany"; // Error
9. 数值字面值类型：固定数值
与字符串字面值类型类似，数值字面值类型限制变量只能存储一组特定的数字值，就像一个只能容纳特定硬币的储蓄罐。它提高了数值操作的准确性。
type Month = 1 | 2 | 3 | ... | 12;
const month: Month = 3; // March
const invalidMonth: Month = 13; // Error
10. 布尔字面值类型：真或假
布尔字面值类型创建了一种类型，它只能包含真或假两个值，就像一个开关只能处于开或关的状态。它简化了布尔操作。
type IsLoggedIn = true | false;
const loggedIn: IsLoggedIn = true; // Logged in
const invalidLoginStatus: IsLoggedIn = "maybe"; // Error
11. 空类型：无值代表
空类型表示一个可以包含 null 或 undefined 的值，就像一个可以为空的容器。它用于处理可能不存在的值的情况。
type Nullable<T> = T | null;
const name: Nullable<string> = null; // Name is not set
12. 未知类型：任意值
未知类型允许变量存储任何类型的值，就像一个可以容纳任何物品的神秘盒子。它提供了最大的灵活性，但需要谨慎使用以避免潜在问题。
type UnknownValue = unknown;
const value: UnknownValue = 10; // Allowed, but type is unknown
结论
深入掌握 TypeScript 的高级类型工具将为你的代码带来更多的健壮性和可维护性。通过了解这些晦涩难懂的特性，你可以创建更加强大且可靠的应用程序，同时提高代码的可读性和重用性。
常见问题解答
- 条件类型和联合类型有什么区别？
条件类型根据条件创建新的类型，而联合类型允许一个值包含多种类型。
- 枚举类型和元组类型有什么相似之处？
枚举类型和元组类型都提供了一组值，但枚举类型的值是预定义的，而元组类型的值可以是任何类型。
- 字符串字面值类型和数值字面值类型在何时使用？
当需要确保变量只能存储特定的字符串或数字值时，应使用字符串字面值类型和数值字面值类型。
- 空类型和未知类型有什么区别？
空类型表示一个可以为 null 或 undefined 的值，而未知类型可以表示任何类型的值。
- 高级类型工具对代码有什么好处？
高级类型工具提高了代码的可读性、可维护性、健壮性和重用性。
