TypeScript 高级类型系统深入解析

TypeScript 的类型系统是其最强大的特性之一。掌握高级类型能让你写出更安全、更灵活的代码。

泛型（Generics）

泛型让我们能够创建可重用的组件：

function identity<T>(arg: T): T {
  return arg;
}

// 使用
const result = identity<string>('hello');
const number = identity(42); // 类型推断

泛型约束

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

条件类型（Conditional Types）

条件类型基于类型关系进行类型选择：

type NonNullable<T> = T extends null | undefined ? never : T;

type ApiResponse<T> = T extends string
  ? { message: T }
  : T extends number
  ? { code: T }
  : { data: T };

映射类型（Mapped Types）

映射类型可以基于现有类型创建新类型：

type Partial<T> = {
  [P in keyof T]?: T[P];
};

type Required<T> = {
  [P in keyof T]-?: T[P];
};

interface User {
  id: number;
  name: string;
  email?: string;
}

type PartialUser = Partial<User>; // 所有属性可选
type RequiredUser = Required<User>; // 所有属性必需

模板字面量类型

TypeScript 4.1+ 支持模板字面量类型：

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type APIEndpoint<T extends HTTPMethod> = `${T} /api/users`;

实用工具类型

TypeScript 内置了许多实用的工具类型：

// Pick - 选择特定属性
type UserPreview = Pick<User, 'id' | 'name'>;

// Omit - 排除特定属性
type CreateUser = Omit<User, 'id'>;

// Record - 创建键值对类型
type UserRoles = Record<string, 'admin' | 'user' | 'guest'>;

// ReturnType - 获取函数返回类型
function getUser() {
  return { id: 1, name: 'John' };
}
type UserType = ReturnType<typeof getUser>;

类型守卫（Type Guards）

类型守卫帮助 TypeScript 理解运行时的类型：

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function processValue(value: unknown) {
  if (isString(value)) {
    // 这里 TypeScript 知道 value 是 string
    console.log(value.toUpperCase());
  }
}

最佳实践

1. 优先使用类型推断：让 TypeScript 自动推断类型
2. 合理使用 any：尽量避免，必要时使用 unknown
3. 善用工具类型：减少重复的类型定义
4. 类型优先：先设计类型，再实现逻辑

TypeScript 的类型系统虽然复杂，但掌握这些高级特性将大大提升你的开发体验和代码质量。