第 3 卷
6. 高级类型：联合/交叉/索引类型
表示一个值可以是多种类型之一，用 | 分隔，核心是“或”的关系。
Code block
1// 联合类型：值可以是 string 或 number 2type ID = string | number;
3const id1: ID = "123"; // 合法 4const id2: ID = 123; // 合法
5// const id3: ID = true; // 报错 6
7// 函数参数使用联合类型 8function printId(id: ID) {
9console.log(id);
10}
交叉类型 (Intersection Types)
将多个类型合并为一个类型，用 & 分隔，核心是“且”的关系，常用于组合对象类型。
Code block
| 1 | //交叉类型：同时拥有User和Contact的属性 |
|---|---|
| 2 | type User = { name: string }; |
| 3 | type Contact = { phone: string }; |
| 4 | type UserWithContact = User & Contact; |
5 6const user: UserWithContact = {
7name: "张三", 8phone: "13800138000" // 必须同时包含两个类型的属性
9};
索引类型 (Indexed Types)
用于动态访问对象的属性类型，核心是 keyof（获取对象所有键的联合类型）和 T[K]（获取对象属性的类型）。
Code block
1type User = { 2name: string;
3age: number;
9// T[K]：获取属性对应的类型 10type UserNameType = User["name"]; // string
11type UserAgeType = User["age"]; // number 12
13// 通用取值函数（利用索引类型）
| 14 | function getProp<T, K extends keyof T>(obj: T, key: K): T[K] { |
|---|---|
| 15 | return obj[key]; |
| 16 | } |
17
| 18 | const user: User = { name: "张三", age: 20 }; |
|---|---|
| 19 | const name = getProp(user, "name");// string类型 |
| 20 | const age = getProp(user, "age");// number类型 |
| 21 | // const wrong = getProp(user, "gender"); //报错："gender"不是User的键 |
7. 映射类型 (Mapped Types) 是什么？示例
映射类型是 TS 的高级特性，基于现有类型创建新类型，核心是“遍历原类型的所有属性，修改其特性（如只读、可选）”，语法为 { [K in keyof T]: ... }。
核心语法
- in：遍历 keyof T 的所有键；
• 内置映射类型： Readonly<T>（只读）、 Partial<T>（可选）、 Required<T>（必
选）、 Pick<T, K>（挑选属性）等。
自定义映射类型示例
Code block
1// 原类型 2type User = {
3name: string;
4age: number;
5};
6
| 7 | //自定义只读映射类型（等价于Readonly<User>） |
|---|---|
| 8 | type ReadonlyUser = { |
| 9 | readonly [K in keyof User]: User[K]; |
| 10 | }; |
16type PartialUser = { 17[K in keyof User]?: User[K];
18};
19 20const partialUser: PartialUser = { name: "张三" }; // age 可选，合法
21 22// 进阶：将所有属性类型转为 string
23type Stringify<T> = { 24[K in keyof T]: string;
25};
26 27type StringUser = Stringify<User>;
28// StringUser = { name: string; age: string } 29const strUser: StringUser = { name: "张三", age: "20" }; // 合法
内置映射类型示例
Code block
1type User = { 2name: string;
3age: number;
4};
5 6// Partial：所有属性可选
7type PartialUser = Partial<User>;
8 9// Required：所有属性必选（抵消 Partial）
10type RequiredUser = Required<PartialUser>;
11 12// Pick：挑选指定属性
13type PickUser = Pick<User, "name">; // { name: string } 14
15// Omit：排除指定属性（TS 3.5+）
16type OmitUser = Omit<User, "age">; // { name: string }