TypeScript常用约束

1. 基础类型（number、string、boolean）

1const age: number = 28;
2const name: string = '车车';
3const isDone: boolean = true;
复制

解释：

• number 类型：用于表示数字，包括整数和浮点数
• string 类型：用于表示文本字符串，可以使用单引号、双引号或反引号
• boolean 类型：只有两个值 true 或 false，表示真或假
• 使用冒号 : 后跟类型名称来指定变量的类型
• 类型标注确保变量只能存储指定类型的值，提高代码的可靠性

2. 对象类型（接口 Interface）

1interface User {
2  id: number;
3  name: string;
4  email?: string; // 可选属性
5}
6
7const user: User = { id: 1, name: 'Che' };
复制

解释：

• interface 接口：用于定义对象的结构和类型
• 必选属性：如 id 和 name，在创建对象时必须提供
• 可选属性：通过在属性名后添加 ? 标记，如 email?，表示该属性可以提供也可以省略
• 对象实例化时，必须满足接口定义的结构，不能有额外的未定义属性
• 接口可以被类实现，也可以作为函数参数和返回值的类型约束

3. 联合类型（多个值中的一个）

1type Status = 'success' | 'error' | 'loading';
2
3let state: Status = 'success'; // ✅ 只能是这几种值
复制

解释：

• 联合类型：使用 | 符号定义一个可以接受多种类型值的类型
• 字面量类型：本例中 'success'、'error'、'loading' 是字符串字面量类型，限制变量只能取这些特定值
• type 关键字：用于创建类型别名，给联合类型一个更有意义的名称
• 联合类型提供了类型安全的枚举替代方案，在编译时就能捕获类型错误

4. 数组类型

1const numbers: number[] = [1, 2, 3];
2const users: User[] = [{ id: 1, name: 'A' }]; ♥️
3或泛型写法;
4const titles: Array<string> = ['Vue', 'React'];
复制

解释：

• 数组类型表示方法 1：类型[] 格式，表示该数组中的所有元素都必须是指定类型
• 数组类型表示方法 2：Array<类型> 格式，这是泛型语法，功能与方法 1 相同
• 自定义类型数组：可以使用之前定义的接口或类型作为数组元素类型，如 User[]
• TypeScript 会检查数组中的每个元素是否符合指定类型
• 数组方法（如 push, map, filter 等）也会受到类型约束

5. 函数类型

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5const handleClick: (id: number) => void = (id) => {
6  console.log(id);
7};
复制

解释：

1、传统函数声明 ( add )

• 使用 function 关键字定义了一个名为 add 的函数
• 参数 a 和 b 都被显式标注为 number 类型
• 函数返回值通过 : number 注解为 number 类型
• 函数体内返回两个参数的和

2、 箭头函数与类型注解 ( handleClick )

• 使用常量 const 声明了一个变量 handleClick
• 等号左侧通过 : (id: number) => void 定义了函数的类型签名：接收一个 number 类型参数，无返回值 ( void )
• 等号右侧使用箭头函数实现了这个函数
• TypeScript 类型推断机制使得箭头函数内的参数 id 无需重复注解类型

6. 泛型（Generic）

1function getFirstItem<T>(arr: T[]): T {
2  return arr[0];
3}
4
5const first = getFirstItem<string>(['a', 'b', 'c']);
复制

解释：

泛型用于写可复用、可类型推断的函数/类/接口。常见场景：表单、API 响应类型、组件 props、工具函数。

• 泛型：使用 <T> 语法定义一个类型参数，可以在函数定义的多个位置使用
• 类型参数 T：代表一个占位符类型，在函数调用时会被具体类型替换
• 函数接收：参数 arr 的类型是 T[]，表示任意类型的数组
• 函数返回：返回类型是 T，与数组元素类型保持一致
• 类型参数化调用：调用时可以显式指定类型参数 getFirstItem<string>，也可以省略让 TypeScript 自动推断
• 泛型提供了编写可重用代码的强大方式，同时保持类型安全

7. 类型别名（type）

1type Point = { x: number; y: number };
2
3const pos: Point = { x: 10, y: 20 };
复制

解释：

• 类型别名：使用 type 关键字可以为任何类型创建一个新名称
• 对象字面量类型：可以直接在类型别名中定义对象结构
• 类型别名与接口类似，但有更多功能：可以表示原始类型、联合类型、交叉类型等
• 类型别名不能被继承或实现，但可以引用自身形成递归结构
• 对于简单的对象类型定义，类型别名和接口可以互换使用

8. 枚举（Enum）

1enum Role {
2  Admin = 'admin',
3  User = 'user',
4  Guest = 'guest',
5}
6
7const role: Role = Role.Admin;
复制

解释：

• 枚举：使用 enum 关键字定义一组命名的常量集合
• 字符串枚举：本例使用字符串值作为枚举成员的值（'admin', 'user', 'guest'）
• 枚举提供了更易读的代码，同时保持类型安全
• 可以通过点号语法访问枚举成员：Role.Admin
• TypeScript 还支持数字枚举、异构枚举等其他形式

9. React Props 类型（函数式组件）

1interface ButtonProps {
2  label: string;
3  onClick: () => void;
4}
5
6const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
7  <button onClick={onClick}>{label}</button>
8);
复制

解释：

• React 组件 Props 类型：使用接口定义组件接收的属性类型
• 函数类型属性：onClick: () => void 定义了一个无参数、无返回值的函数属性
• React.FC 泛型：React.FC<ButtonProps> 是 React 函数式组件的类型，泛型参数指定了 Props 类型
• 解构赋值：组件函数参数通过解构直接获取 props 中的属性
• 类型安全的组件定义确保了组件使用时传递的 props 类型正确

10. Record / Partial / Pick 等工具类型

1// Record：构造一个键值对对象
2const permissions: Record<string, boolean> = {
3  read: true,
4  write: false,
5};
6
7// Partial：将所有属性变为可选
8type UserPartial = Partial<User>;
9
10// Pick：只保留部分属性
11type UserBase = Pick<User, 'id' | 'name'>;
复制

解释：

• Record<K, T>：构造一个键类型为 K、值类型为 T 的对象类型
• Partial：将类型 T 的所有属性转换为可选属性
• Pick<T, K>：从类型 T 中选取指定的属性集合 K（K 是字符串字面量联合类型）
• 这些是 TypeScript 内置的工具类型，用于快速创建常用的类型转换
• 可以组合使用这些工具类型创建复杂的类型，减少重复代码

11. 类型断言（不推荐滥用）

1const input = document.getElementById('input') as HTMLInputElement;
2input.value = 'test';
复制

解释：

• 类型断言：使用 as 关键字告诉 TypeScript 编译器，你确定某个值的具体类型
• document.getElementById：默认返回 HTMLElement | null，需要断言为具体元素类型
• 类型断言不会改变运行时行为，只是在编译时绕过类型检查
• 另一种语法形式：<HTMLInputElement>document.getElementById('input')（JSX 中不适用）
• 建议谨慎使用类型断言，应优先考虑类型保护或条件检查

12. 接口继承

1interface Base {
2  id: number;
3}
4interface User extends Base {
5  name: string;
6}
复制

解释：

• 接口继承：使用 extends 关键字可以让一个接口继承另一个接口的所有属性
• 继承关系：User 接口继承了 Base 接口的 id: number 属性
• 组合类型：User 接口现在包含 id: number 和 name: string 两个属性
• 接口可以继承多个接口，用逗号分隔：interface C extends A, B { ... }
• 接口继承促进了代码复用，建立了清晰的类型层次结构

附加：常用约束类型汇总表