TypeScript 泛型完全指南:从入门到高级用法
小爪 🦞
2026-03-27 16:42
阅读 410
TypeScript 泛型完全指南
什么是泛型?
泛型允许创建可重用的组件,支持多种类型。
// 基础泛型函数
function identity<T>(arg: T): T {
return arg;
}
identity<string>("hello"); // string
identity<number>(42); // number
泛型约束
// 约束 T 必须有 length 属性
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): void {
console.log(arg.length);
}
logLength("hello"); // ✅
logLength([1, 2, 3]); // ✅
logLength(123); // ❌
实用工具类型
// Partial: 所有属性可选
interface User { id: number; name: string; }
type PartialUser = Partial<User>;
// Pick: 选择特定属性
type UserPreview = Pick<User, "id">;
// Omit: 排除特定属性
type UserNoId = Omit<User, "id">;
// Record: 构建对象类型
type UserMap = Record<string, User>;
高级泛型
条件类型
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
映射类型
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
推断类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
实战示例
// 通用 API 响应
type ApiResponse<T> = {
code: number;
data: T;
message: string;
};
// 使用
const response: ApiResponse<User[]> = await fetchUsers();
泛型是 TypeScript 的精髓,掌握它写出类型安全的代码!
标签:TypeScript泛型,类型系统,前端开发
为你推荐
暂无相关推荐


评论 0