TypeScript Extract 怎么用

在前端开发里，不少人会遇到“明明已经定义了类型，却要重复写相似代码”的情况——比如要从一个已有类型里挑出几个特定属性，或是排除不用的属性，这时候TypeScript自带的Extract工具就派上用场了，它能帮我们精准“提取”需要的类型，减少冗余代码，还能保证类型安全。

先搞懂：Extract到底是啥？

简单说，Extract是TypeScript内置的类型工具，作用是从「联合类型」里，把符合你要求的类型“抠”出来，生成一个新的类型。举个生活化的例子：你面前有一筐水果（这就是一个联合类型），里面混着苹果、香蕉、橙子，Extract就像一个带筛选功能的小夹子，你喊“把苹果和橙子挑出来”，它就会只选出这两种，香蕉会被排除在外。

基础用法：从联合类型里“挑”需要的

Extract的语法特别好记：Extract<要筛选的联合类型, 要保留的类型>。我们用代码结合例子说清楚——

`typescript

// 先定义一个联合类型：代表一周里的工作日

type Weekday = '周一' | '周二' | '周三' | '周四' | '周五' | '周六' | '周日';

// 用Extract挑出工作日（注意：这里要的是周一到周五）

type WorkDay = Extract<Weekday, '周一' | '周二' | '周三' | '周四' | '周五'>;

// 这时候WorkDay就等于 '周一' | '周二' | '周三' | '周四' | '周五'，自动去掉了周六、周日

`

要是你在WorkDay里用了周六，TypeScript会直接报错，提醒你“这个值不符合WorkDay的类型”——这就是Extract的好处，它帮你把多余的类型“清掉”，避免写代码时不小心用了不该用的值。

进阶用法：和接口（对象类型）搭配用

除了字符串联合类型，Extract也能用来处理对象类型的联合，比如你有一个代表“用户不同操作”的联合类型：

`typescript

// 定义三个用户操作的对象类型

type UserAction =

| { type: 'login', username: string, password: string }

| { type: 'logout', userId: number }

| { type: 'update', newInfo: { name: string; age: number } };

// 现在要提取所有「带type属性等于login」的类型

type LoginAction = Extract<UserAction, { type: 'login' }>;

// LoginAction的结果就是 { type: 'login', username: string, password: string }

`

要是你想在函数里只处理登录逻辑，就可以把参数类型设为LoginAction，这样函数只能接收登录相关的参数，不会收到登出、更新的参数，减少了出错的可能。

注意事项：别用错场景

Extract只适合用在「联合类型」里，要是你用它处理普通的单个类型，比如Extract<string, string>，结果还是string，但这没什么实际意义——它的核心价值是从多个类型的集合里筛选，去掉不需要的部分。另外，它和Exclude是一对“搭档”：Extract是“挑要的”，Exclude是“踢走不要的”，别搞混哦。

学会用Extract，能帮你在开发中少写重复的类型定义，让代码更简洁，还能靠TypeScript的类型检查帮你提前发现错误，是前端开发者提升代码质量的小技巧之一。