TypeScript常用约束

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

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

2. 对象类型（接口 Interface）

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

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

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

4. 数组类型

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

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};
复制

6. 泛型（Generic）

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

7. 类型别名（type）

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

8. 枚举（Enum）

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

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);
复制

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'>;
复制

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

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

12. 接口继承

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

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