🧪 Frontend Lab
交互式前端学习实验室

泛型基础

typescript · intermediate · 20-25 min · Step 1/3

泛型 (Generics)

泛型是"类型的参数"——让函数/类可以适应多种类型。

问题:没有泛型

// 方案1:any — 丢失类型信息
function identity(value: any): any { return value; }

// 方案2:重载 — 写不完
function identity(value: string): string;
function identity(value: number): number;

解决:泛型

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

identity<string>('hello');  // 返回 string
identity(42);               // 自动推断为 number

泛型约束

interface HasLength {
  length: number;
}

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

logLength('hello');     // OK: string 有 length
logLength([1, 2, 3]);   // OK: array 有 length
logLength(42);          // ❌ number 没有 length

常用泛型

// 泛型接口
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

type UserResponse = ApiResponse<User>;
type PostResponse = ApiResponse<Post[]>;