TypeScript 进阶：泛型、条件类型与类型体操

为什么需要 TypeScript？

TypeScript 在 JavaScript 基础上添加静态类型，提升代码质量和开发体验：

• 编译时错误检测
• 更好的 IDE 支持
• 代码即文档

1. 泛型基础

泛型让类型参数化，实现代码复用：

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}

const result1 = identity<string>("hello");
const result2 = identity<number>(42);

// 泛型接口
interface Box<T> {
  value: T;
  getValue(): T;
}

// 泛型约束
function logLength<T extends { length: number }>(arg: T): void {
  console.log(arg.length);
}

logLength("hello"); // ✅
logLength([1, 2, 3]); // ✅
logLength(42); // ❌

2. 条件类型

根据条件选择类型：

// 基础条件类型
type IsString<T> = T extends string ? true : false;

type A = IsString<string>;  // true
type B = IsString<number>;  // false

// 内置条件类型
// Exclude<T, U> - 从 T 中排除 U
type T1 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"

// Extract<T, U> - 从 T 中提取 U
type T2 = Exclude<"a" | "b" | "c", "a">; // "a"

// NonNullable - 排除 null 和 undefined
type T3 = NonNullable<string | null | undefined>; // string

3. 映射类型

基于已有类型创建新类型：

// Partial - 所有属性可选
type Partial<T> = {
  [P in keyof T]?: T[P];
};

// Required - 所有属性必填
type Required<T> = {
  [P in keyof T]-?: T[P];
};

// Readonly - 所有属性只读
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// Pick - 选择部分属性
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

// Omit - 排除部分属性
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

4. 实用类型体操

获取函数参数类型

type FirstParameter<T extends (...args: any[]) => any> = 
  T extends (first: infer P, ...args: any[]) => any ? P : never;

function fn(a: string, b: number) {}
type Param = FirstParameter<typeof fn>; // string

深度只读

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

字符串操作类型（TS 4.1+）

type Greeting = `Hello, ${string}`;
type EventName = "click" | "hover";
type EventWithPrefix = `on${Capitalize<EventName>}`; // "onClick" | "onHover"

5. 类型守卫

// typeof 守卫
function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + value;
  }
  return padding + value;
}

// instanceof 守卫
function getArea(shape: Square | Circle) {
  if (shape instanceof Circle) {
    return Math.PI * shape.radius ** 2;
  }
  return shape.side ** 2;
}

// 自定义类型守卫
function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

总结

掌握 TypeScript 高级类型，能写出更安全、更灵活的代码。类型系统是工具，不是束缚！