TypeScript高级类型体操完全指南

TypeScript的类型系统是一个强大的工具，本文将带你深入理解其高级特性，掌握类型编程的核心技巧。

🎯 基础类型操作

1. 条件类型（Conditional Types）

type IsString<T> = T extends string ? true : false;
type Result = IsString<'hello'>; // true

// 高级条件类型
type Flatten<T> = T extends Array<infer U> ? U : T;

2. 映射类型（Mapped Types）

// 将所有属性变为可选
interface User {
  name: string;
  age: number;
  email: string;
}

type PartialUser = {
  [K in keyof User]?: User[K];
};

// 只读属性
interface ReadonlyUser {
  readonly [K in keyof User]: User[K];
}

🔧 高级技巧

1. 模板字面量类型

type EventName<T extends string> = `${T}Change`;
type ButtonEvent = EventName<'button'>; // "buttonChange"

// 复杂模板操作
type CamelCase<S extends string> = 
  S extends `${infer P1}_${infer P2}${infer P3}` 
    ? `${P1}${Uppercase<P2>}${CamelCase<P3>}` 
    : S;

2. 递归类型

// 深度Partial
interface DeepPartial<T> {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
}

// 树形结构遍历
interface TreeNode<T> {
  value: T;
  children: TreeNode<T>[];
}

🎪 实战案例

1. API响应类型安全

interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

type UserResponse = ApiResponse<{
  id: number;
  name: string;
}>;

2. 表单验证类型

type ValidationRule<T> = {
  [K in keyof T]?: (value: T[K]) => boolean | string;
};

interface LoginForm {
  username: string;
  password: string;
}

const rules: ValidationRule<LoginForm> = {
  username: (v) => v.length >= 3 || "用户名至少3位",
  password: (v) => /[A-Z]/.test(v) || "必须包含大写字母"
};

🚀 性能优化

• 避免过度复杂的类型
• 使用类型缓存
• 合理拆分类型定义

总结

掌握TypeScript高级类型系统，能够显著提升代码的类型安全性和开发效率。