实用指南：Typescript高级类型详解

Typescript中的高级类型主要有下面几种:

1. 联合类型 (Union Types)

type Status = "success" | "error" | "loading";
type ID = string | number;
function handleStatus(status: Status) {// status 只能是 "success", "error", "loading" 之一
}

2. 交叉类型 (Intersection Types)

interface Person {name: string;age: number;
}
interface Employee {employeeId: string;department: string;
}
type Staff = Person & Employee;
// Staff 必须同时包含 Person 和 Employee 的所有属性

3. 映射类型 (Mapped Types)

// 将所有属性变为可选
type Partial = {[P in keyof T]?: T[P];
};
// 将所有属性变为只读
type Readonly = {readonly [P in keyof T]: T[P];
};
interface User {id: number;name: string;
}
type PartialUser = Partial; // { id?: number; name?: string; }

4. 条件类型 (Conditional Types)

type IsString = T extends string ? true : false;
type A = IsString; // true
type B = IsString; // false
// 内置示例
type Exclude = T extends U ? never : T;
type Extract = T extends U ? T : never;

5. 索引访问类型 (Indexed Access Types)

interface User {id: number;name: string;address: {street: string;city: string;};
}
type UserName = User["name"]; // string
type Address = User["address"]; // { street: string; city: string; }
type UserProperties = User[keyof User]; // string | number | { street: string; city: string; }

6. 模板字面量类型 (Template Literal Types)

type EventName = "click" | "hover" | "focus";
type HandlerName = `on${Capitalize}`;
// "onClick" | "onHover" | "onFocus"
type CSSValue = `${number}px` | `${number}em` | `${number}%`;

7. 递归类型 (Recursive Types)

type Json =| string| number| boolean| null| { [key: string]: Json }| Json[];
type DeepReadonly = {readonly [P in keyof T]: T[P] extends object? DeepReadonly: T[P];
};

区别与联系

区别

类型	主要用途	特点
联合类型	表示多个类型之一	使用 `	` 运算符
交叉类型	合并多个类型	使用 & 运算符
映射类型	批量转换属性	使用 in 关键字
条件类型	基于条件选择类型	使用三元运算符
索引访问	获取特定属性类型	使用 [] 语法
模板字面量	字符串模式匹配	使用模板字符串语法

联系与组合使用

这些高级类型经常组合使用，形成强大的类型编程能力：

// 组合使用示例
interface Product {id: number;name: string;price: number;category: "electronics" | "clothing" | "books";
}
// 获取所有字符串属性的键
type StringKeys = {[K in keyof T]: T[K] extends string ? K : never;
}[keyof T];
type ProductStringKeys = StringKeys; // "name" | "category"
// 创建动态的 getter 类型
type Getters = {[K in keyof T as `get${Capitalize}`]: () => T[K];
};
type ProductGetters = Getters;
// {
//   getId: () => number;
//   getName: () => string;
//   getPrice: () => number;
//   getCategory: () => "electronics" | "clothing" | "books";
// }

这些高级类型让 TypeScript 的类型系统变得极其强大，能够精确地描述复杂的类型关系，提供更好的类型安全和开发体验。