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

2026-09-27

字数统计: 2.2k字 | 阅读时长≈ 11分

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

本节目标：掌握 TypeScript 的高级类型系统：泛型、条件类型、映射类型、模板字面量类型，能读懂和编写类型工具。

1. TS 基础回顾

// 基本类型
let x: number = 42;
let s: string = 'hello';
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ['age', 25];

// 接口
interface User {
  id: number;
  name: string;
  email?: string;     // 可选
  readonly created: Date;  // 只读
}

// 类型别名
type ID = string | number;
type Status = 'pending' | 'success' | 'failed';

// 联合类型
type Result = { ok: true; value: number } | { ok: false; error: string };

// 交叉类型
type A = { x: number };
type B = { y: string };
type C = A & B;  // { x: number; y: string }

2. 泛型（Generics）

核心思想：类型参数化，让函数/接口/类支持多种类型而不丢失类型信息。

2.1 泛型函数

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

const a = identity(42);        // T = number, 返回 number
const b = identity('hello');   // T = string, 返回 string
const c = identity<number>(42); // 显式指定

2.2 泛型约束

// 约束必须有 length 属性
interface Lengthwise { length: number }

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

logLength('hello');  // 5
logLength([1, 2]);   // 2
// logLength(42);    // Error: number 没有 length

2.3 多泛型参数

function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

const p = pair('age', 25);  // [string, number]

2.4 泛型接口

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

const userRes: ApiResponse<User> = await fetch('/api/user').then(r => r.json());
const listRes: ApiResponse<User[]> = await fetch('/api/users').then(r => r.json());

2.5 泛型类

class Stack<T> {
  private items: T[] = [];

  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
console.log(stack.pop());  // 2

2.6 默认类型参数

interface Container<T = string> {
  value: T;
}

const a: Container = { value: 'hello' };  // T 默认 string
const b: Container<number> = { value: 42 };

3. 条件类型（Conditional Types）

1	T extends U ? X : Y

type IsString<T> = T extends string ? true : false;

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

3.1 infer 关键字

在条件类型中推断类型：

// 提取函数返回值类型（手写 ReturnType）
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function foo() { return 42; }
type FooReturn = MyReturnType<typeof foo>;  // number

// 提取 Promise 内部类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type A = UnwrapPromise<Promise<string>>;  // string
type B = UnwrapPromise<number>;          // number（不匹配，返回原类型）

// 提取数组元素类型
type ElementOf<T> = T extends (infer E)[] ? E : never;

type C = ElementOf<string[]>;  // string

3.2 分布式条件类型

当 T 是联合类型时，条件类型会分发：

type ToArray<T> = T extends any ? T[] : never;

type A = ToArray<string | number>;
// 等价于 (string extends any ? string[] : never) | (number extends any ? number[] : never)
// = string[] | number[]

阻止分发：用 [] 包一层

type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;

type B = ToArrayNonDist<string | number>;
// = (string | number)[]  ← 不分发了

4. 映射类型（Mapped Types）

type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

type Optional<T> = {
  [K in keyof T]?: T[K];
};

interface User { id: number; name: string; }
type ReadonlyUser = Readonly<User>;
// { readonly id: number; readonly name: string; }

4.1 keyof 操作符

1 2	interface User { id: number; name: string; email: string; } type UserKeys = keyof User; // 'id' \| 'name' \| 'email'

4.2 内置映射类型

// Partial<T>    - 所有属性可选
// Required<T>  - 所有属性必填
// Readonly<T>  - 所有属性只读
// Pick<T, K>   - 选取部分属性
// Omit<T, K>   - 排除部分属性
// Record<K, V> - 构造键值对类型

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

type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string }

type UserWithoutEmail = Omit<User, 'email'>;
// { id: number; name: string; age: number }

type UserOptional = Partial<User>;
// { id?: number; name?: string; email?: string; age?: number; }

type UserRequired = Required<UserOptional>;
// { id: number; name: string; email: string; age: number; }

type RoleMap = Record<'admin' | 'user' | 'guest', string[]>;
// { admin: string[]; user: string[]; guest: string[]; }

4.3 高级映射

// 映射并改名
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface User { id: number; name: string; }
type UserGetters = Getters<User>;
// { getId: () => number; getName: () => string }

// 过滤属性
type FilterByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};

type NumberFields = FilterByType<User, number>;
// { id: number }

5. 模板字面量类型

type World = "world";
type Greeting = `hello ${World}`;  // "hello world"

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

// 联合类型展开
type Event = EventName<'click' | 'focus' | 'blur'>;
// "onClick" | "onFocus" | "onBlur"

// 实战：类型安全的事件 emitter
class Emitter<Events extends Record<string, any[]>> {
  on<K extends keyof Events>(event: K, listener: (...args: Events[K]) => void) {
    // ...
  }
}

interface MyEvents {
  click: [x: number, y: number];
  change: [value: string];
}

const e = new Emitter<MyEvents>();
e.on('click', (x, y) => console.log(x, y));  // 类型正确
e.on('change', (value) => console.log(value));
// e.on('click', (x: string) => {});  // Error: 类型不匹配

6. 类型守卫（Type Guards）

function process(value: string | number) {
  // typeof 守卫
  if (typeof value === 'string') {
    return value.toUpperCase();  // 这里 value 是 string
  }
  return value.toFixed(2);  // 这里 value 是 number
}

// instanceof 守卫
class Dog { bark() {} }
class Cat { meow() {} }
function speak(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

// in 守卫
interface Bird { fly(): void; layEggs(): void; }
interface Fish { swim(): void; layEggs(): void; }
function move(animal: Bird | Fish) {
  if ('fly' in animal) {
    animal.fly();
  } else {
    animal.swim();
  }
}

// 自定义类型谓词
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

7. 类型工具函数实战

7.1 DeepPartial

type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;

interface Config {
  server: { port: number; host: string };
  db: { url: string; pool: { min: number; max: number } };
}
type PartialConfig = DeepPartial<Config>;
// 所有嵌套属性都变可选

7.2 DeepReadonly

type DeepReadonly<T> = T extends (infer U)[]
  ? ReadonlyArray<DeepReadonly<U>>
  : T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;

7.3 NonNullable 深层

type DeepNonNullable<T> = T extends null | undefined
  ? never
  : T extends object
  ? { [K in keyof T]: DeepNonNullable<T[K]> }
  : T;

7.4 函数参数类型提取

type MyParameters<T> = T extends (...args: infer P) => any ? P : never;
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(name: string, age: number): string {
  return `Hello ${name}, ${age}`;
}

type P = MyParameters<typeof greet>;  // [string, number]
type R = MyReturnType<typeof greet>;  // string

8. 类型断言与转换

// 类型断言（编译时，运行时无影响）
const value = obj as User;        // 强制断言
const value2 = <User>obj;          // JSX 中不用 as

// const 断言（保留字面量类型）
const config = {
  url: 'https://api.example.com',
  method: 'POST',
} as const;
// type: { readonly url: "https://..."; readonly method: "POST" }

// satisfies：检查类型但不丢失具体类型
const colors = {
  red: '#ff0000',
  green: '#00ff00',
} satisfies Record<string, string>;
// colors.red 的类型仍是 '#ff0000'，不是 string

9. 装饰器（实验性）

// tsconfig: "experimentalDecorators": true

function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${key}(${args.join(', ')})`);
    return original.apply(this, args);
  };
}

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

new Calculator().add(1, 2);
// "Calling add(1, 2)"
// 3

10. 实战：类型安全的事件总线

type EventMap = {
  'user:login': { userId: string };
  'user:logout': void;
  'cart:update': { itemId: string; quantity: number };
};

class EventBus<Events extends Record<string, any>> {
  private listeners: { [K in keyof Events]?: Array<(p: Events[K]) => void> } = {};

  on<K extends keyof Events>(event: K, listener: (payload: Events[K]) => void) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event]!.push(listener);
  }

  emit<K extends keyof Events>(event: K, payload: Events[K]) {
    this.listeners[event]?.forEach(fn => fn(payload));
  }
}

const bus = new EventBus<EventMap>();
bus.on('user:login', (p) => console.log(p.userId));  // 类型安全
bus.emit('user:login', { userId: '123' });          // OK
// bus.emit('user:login', { wrong: 'field' });     // Error

小结

概念	关键点
泛型	类型参数化，保留类型信息
约束	`<T extends X>` 限制 T 的范围
条件类型	`T extends U ? X : Y`
infer	在条件类型中提取子类型
映射类型	`{ [K in keyof T]: ... }`
模板字面量	构造字符串联合类型
类型守卫	运行时检查 + 编译时收窄
satisfies	检查类型但保留具体信息

核心建议：

别为了用类型而用类型（项目先跑起来）
优先用内建工具类型（Partial、Pick、Omit、Record）
复杂类型推导不了时，用 as 显式标注
用 // @ts-expect-error 标注已知问题（不是忽略）

下一节讲 ES6+ 与现代 ECMAScript 演进。

本文作者： CoderSong
本文链接： https://jack-song-gif.github.io/2026/09/27/FE-05-TypeScript进阶/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！