【高频考点精讲】前端类型安全：TypeScript的进阶类型技巧

前端类型安全：TypeScript的进阶类型技巧

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近在给团队做TypeScript培训时，发现很多同学对基础类型已经掌握得不错了，但遇到复杂场景还是容易手忙脚乱。今天全栈老李就来聊聊那些能让你代码更健壮的TS进阶类型技巧。

类型体操：从基础到高阶

TypeScript最迷人的地方在于它的类型系统就像乐高积木，基础类型是那些简单的方块，而进阶类型则是各种特殊形状的零件，组合起来能构建出精妙的类型结构。

1. 条件类型（Conditional Types）

这可能是最像编程的类型特性了。想象你在写一个if语句，只不过判断的是类型而非值：

// 全栈老李示例：基础条件类型
type IsString<T> = T extends string ? true : false;

type A = IsString<'hello'>; // true
type B = IsString<42>;     // false

实际开发中，条件类型常用来处理不同输入类型的情况。比如我们常用的ReturnType工具类型就是基于条件类型实现的：

// 全栈老李实战：模拟ReturnType实现
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser() { return { name: '老李', age: 18 }; }
type User = MyReturnType<typeof getUser>; // { name: string; age: number }

2. 映射类型（Mapped Types）

当我们需要批量转换对象类型的属性时，映射类型就是最佳选择。它就像是对类型做了一次map操作