TypeScript类型体操指南-20个类型工具实现

TypeScript类型体操指南——20个实用类型工具实

现

标签：TypeScript、类型体操、条件类型、映射类型、模板字面量类型、递归类型、类型工具、前端工程化

日期：2026年9月19日

一句话简介

从内置工具类型到高级递归类型，完整实现20个可直接复制使用的TypeScript类型工具，每个工具配完整实现代码、

真实场景案例、组合用法、错误对比与零基础操作引导。

适用人群

已掌握TypeScript基础语法，希望深入类型系统的前端开发者。

准备中高级前端面试，需要系统掌握类型体操的求职者。

正在开发组件库、工具库，需要设计类型定义的工程师。

使用Vue3、React、Angular等框架，希望提升类型安全的全栈开发者。

技术团队负责人，需要统一团队类型工具库。

文档类型

合集资料类。

关键词

TypeScript、类型体操、条件类型、映射类型、infer、模板字面量类型、递归类型、Partial、Required、Readonly、

Pick、Omit、Record、Exclude、Extract、NonNullable、ReturnType、Parameters、Awaited、DeepPartial、

DeepReadonly、Mutable、UnionToIntersection、GetRequired、GetOptional、CamelCase、Path。

目录

1.第一章类型工具分类清单与使用建议

2.第二章基础工具类型（第1-7个）

工具1：Partial——可选化

工具2：Required——必选化

工具3：Readonly——只读化

工具4：Pick<T,K>——选取属性

工具5：Omit<T,K>——排除属性

工具6：Record<K,T>——构造记录

工具7：Exclude<T,U>——排除联合

3.第三章进阶工具类型（第8-14个）

工具8：Extract<T,U>——提取联合

工具9：NonNullable——非空

工具10：ReturnType——返回类型

工具11：Parameters——参数类型

工具12：Awaited——Promise解析

工具13：DeepPartial——深度可选

工具14：DeepReadonly——深度只读

4.第四章高级类型工具（第15-20个）

工具15：Mutable——去除只读

工具16：UnionToIntersection——联合转交叉

工具17：GetRequired——必选键

工具18：GetOptional——可选键

工具19：CamelCase——驼峰转换

工具20：Path——对象路径

5.第五章速查表与对比表

6.第六章避坑指南

7.第七章常见问题解答

8.第八章附录：类型体操核心概念速查

第一章类型工具分类清单与使用建议

1.120个类型工具总表

序号工具名称核心作用难度内置/自定义高频场景

1Partial所有属性变为可选入门内置表单草稿、更新参数

2Required所有属性变为必选入门内置配置校验、完整对象

3Readonly所有属性变为只读入门内置常量、不可变数据

4Pick<T,K>选取指定属性入门内置列表字段、DTO

5Omit<T,K>排除指定属性入门内置创建参数、脱敏

6Record<K,T>构造键值对类型入门内置字典、映射表

7Exclude<T,U>从联合中排除入门内置状态过滤、事件排除

8Extract<T,U>从联合中提取入门内置事件提取、类型筛选

9NonNullable排除null和undefined入门内置非空断言、安全访问

10ReturnType获取函数返回类型进阶内置封装Hook、API响应

11Parameters获取函数参数类型进阶内置高阶函数、事件处理

12Awaited解析Promise类型进阶内置异步数据、API封装

序号工具名称核心作用难度内置/自定义高频场景

13DeepPartial递归所有属性可选进阶自定义深层表单、配置合并

14DeepReadonly递归所有属性只读进阶自定义不可变状态树

15Mutable去除只读修饰进阶自定义状态修改、测试

16UnionToIntersection联合类型转交叉高级自定义函数重载合并

17GetRequired提取必选属性高级自定义表单校验、类型分析

18GetOptional提取可选属性高级自定义默认值填充

19CamelCase字符串转驼峰高级自定义API字段转换

20Path获取对象路径联合高级自定义表单路径、深层访问

1.2使用建议

场景推荐工具组合

表单草稿与提交Partial+Required

API请求参数Pick<T,K>+Omit<T,K>+Partial

状态管理不可变Readonly+DeepReadonly

异步数据封装Awaited+ReturnType

事件系统Extract<T,U>+Exclude<T,U>+Parameters

配置合并DeepPartial+Required

字段命名转换CamelCase+Record<K,T>

深层路径访问Path+GetRequired

函数重载合并UnionToIntersection+Parameters

表单校验GetRequired+GetOptional

1.3整理方法

所有类型工具统一放入src/types/utils.ts。每个工具独立注释，标注作用、示例。建议使用type而非

interface定义工具类型，因为工具类型需要参与条件类型和映射类型运算。文件末尾使用exporttype{...}

统一导出。

第二章基础工具类型（第1-7个）

工具1：Partial——可选化

要素1：基础信息

语法：typePartial<T>={[PinkeyofT]?:T[P]}

参数说明：

T：任意对象类型。

[PinkeyofT]：映射类型，遍历T的所有键。

?：将每个属性变为可选。

T[P]：索引访问类型，获取P对应的值类型。

作用：将对象类型T的所有属性变为可选属性，生成一个新类型。

要素2：完整实现代码

typeMyPartial<T>={

[PinkeyofT]?:T[P]

}

变体1：保留原始类型

typePartialWithOriginal<T>=Partial<T>&T

变体2：仅部分键可选

typePartialBy<T,KextendskeyofT>=Omit<T,K>&Partial<Pick<T,K>>

要素3：使用示例

interfaceUser{

id:number

name:string

email:string

age:number

}

typePartialUser=Partial<User>

//{

//

id?:number

//

name?:string

//

email?:string

//

age?:number

//}

constdraft:PartialUser={name:'张开发'}

constempty:PartialUser={}

typePartialNameAndAge=PartialBy<User,'name'|'age'>

//{

//

id:number

//

email:string

//

name?:string

//

age?:number

//}

要素4：真实工作场景完整案例

背景：开发用户信息编辑表单。表单加载时从接口获取完整用户数据，用户可能只修改部分字段，提交时只需传递修

改过的字段，减少网络传输。

数据：

interfaceUserProfile{

id:number

nickname:string

avatar:string

bio:string

gender:'male'|'female'|'unknown'

birthday:string

city:string

}

constoriginalProfile:UserProfile={

id:1,

nickname:'张开发',

avatar:'【头像地址】',

bio:'前端工程师',

gender:'male',

birthday:'1995-06-15',

city:'示例市'

}

操作步骤：

1.定义UpdateUserProfileParams=Partial<Omit<UserProfile,'id'>>。

2.表单组件只维护修改过的字段。

3.提交时调用updateUserProfile(id,changedFields)。

typeUpdateUserProfileParams=Partial<Omit<UserProfile,'id'>>

asyncfunctionupdateUserProfile(id:number,params:UpdateUserProfileParams){

returnrequest.put(`/user/${id}`,params)

}

constchangedFields:UpdateUserProfileParams={

nickname:'张全栈',

city:'示例市示例区'

}

updateUserProfile(1,changedFields)

结果：接口只收到修改过的字段，后端只更新非空字段。类型系统确保传入字段名和类型正确，拼写错误会编译报

错。

要素5：组合用法

组合公式：Partial<Pick<T,K>>

适用场景：只需要将部分字段变为可选，其余字段保持不变。

typeUser={

id:number

name:string

email:string

}

typeOptionalName=Partial<Pick<User,'name'>>&Omit<User,'name'>

//{id:number;email:string;name?:string}

要素6：常见错误与正确写法对比

错误1：对非对象类型使用Partial

typeWrong=Partial<string>//不会报错，但结果是{}

正确做法：确保T是对象类型。

typeCorrect=Partial<{value:string}>

错误2：误以为Partial是深度可选

interfaceNested{

user:{name:string;age:number}

}

typeWrong=Partial<Nested>

//{user?:{name:string;age:number}}

//仍然是必选

正确做法：需要深度可选时使用DeepPartial<T>。

要素7：进阶技巧

结合Required实现“部分必选、部分可选”：

typePartialExcept<T,KextendskeyofT>=Partial<T>&Pick<T,K>

typeUser={id:number;name:string;email:string}

typePartialExceptId=PartialExcept<User,'id'>

//{id:number;name?:string;email?:string}

要素8：零基础操作引导

在哪里输入：打开VSCode，在src/types/utils.ts文件中输入。

怎么输入：输入typeMyPartial<T>={，按回车，输入[PinkeyofT]?:T[P]，再输入}。

怎么确认：在下方输入typeTest=MyPartial<{a:string;b:number}>，鼠标悬停在Test上，VSCode提

示{a?:string;b?:number}。

结果长什么样：悬停提示显示所有属性带?。

报错了怎么办：

报错Cannotfindname'T'：检查泛型<T>是否写在类型名后面。

报错Type'P'cannotbeusedtoindextype'T'：检查是否写了keyofT。

工具2：Required——必选化

要素1：基础信息

语法：typeRequired<T>={[PinkeyofT]-?:T[P]}

参数说明：

-?：移除可选修饰符，将属性变为必选。

其余同Partial。

作用：将对象类型T的所有可选属性变为必选属性。

要素2：完整实现代码

typeMyRequired<T>={

[PinkeyofT]-?:T[P]

}

变体：仅部分键必选

typeRequiredBy<T,KextendskeyofT>=Omit<T,K>&Required<Pick<T,K>>

要素3：使用示例

interfaceConfig{

host?:string

port?:number

protocol?:'http'|'https'

}

typeFullConfig=Required<Config>

//{host:string;port:number;protocol:'http'|'https'}

typeRequiredHost=RequiredBy<Config,'host'>

//{port?:number;protocol?:'http'|'https';host:string}

要素4：真实工作场景完整案例

背景：应用启动时从环境变量读取配置，环境变量可能缺失，需要合并默认配置后得到完整配置。

数据：

interfaceAppConfig{

apiBaseUrl?:string

timeout?:number

retryCount?:number

enableLog?:boolean

}

constdefaultConfig:Required<AppConfig>={

apiBaseUrl:'/api',

timeout:15000,

retryCount:3,

enableLog:false

}

constuserConfig:AppConfig={

timeout:30000

}

操作步骤：

1.定义Required<AppConfig>作为完整配置类型。

2.合并默认配置与用户配置。

3.合并结果类型为Required<AppConfig>。

functionmergeConfig(defaults:Required<AppConfig>,user:AppConfig):Required<AppConfig>{

return{...defaults,...user}

}

constfinalConfig=mergeConfig(defaultConfig,userConfig)

//finalConfig.timeout确定为number，无undefined

结果：finalConfig所有字段都有值，后续代码无需判空。

要素5：组合用法

组合公式：Required<Pick<T,K>>&Partial<Omit<T,K>>

适用场景：部分字段必选，其余可选。

typeUser={id?:number;name?:string;email?:string}

typeIdRequired=Required<Pick<User,'id'>>&Partial<Omit<User,'id'>>

//{id:number;name?:string;email?:string}

要素6：常见错误与正确写法对比

错误1：对已必选类型使用Required无变化

typeA=Required<{name:string}>//{name:string}

这不是错误，但需理解。

错误2：忘记-?中的减号

typeWrong<T>={[PinkeyofT]?:T[P]}//这仍是Partial

正确：

typeCorrect<T>={[PinkeyofT]-?:T[P]}

要素7：进阶技巧

结合DeepPartial实现深度必选：

typeDeepRequired<T>=TextendsFunction

?T

:TextendsArray<inferU>

?Array<DeepRequired<U>>

:Textendsobject

?{[PinkeyofT]-?:DeepRequired<T[P]>}

:T

要素8：零基础操作引导

在哪里输入：src/types/utils.ts。

怎么输入：输入typeMyRequired<T>={[PinkeyofT]-?:T[P]}。

怎么确认：定义typeTest=MyRequired<{a?:string;b?:number}>，悬停显示{a:string;b:number

}。

报错了怎么办：

报错Unexpectedtoken：检查-?是否写在一起，中间无空格。

报错Cannotfindname'P'：检查是否写了[PinkeyofT]。

工具3：Readonly——只读化

要素1：基础信息

语法：typeReadonly<T>={readonly[PinkeyofT]:T[P]}

参数说明：

readonly：将属性变为只读，不可修改。

其余同Partial。

作用：将对象类型T的所有属性变为只读属性。

要素2：完整实现代码

typeMyReadonly<T>={

readonly[PinkeyofT]:T[P]

}

变体：仅部分键只读

typeReadonlyBy<T,KextendskeyofT>=Omit<T,K>&Readonly<Pick<T,K>>

要素3：使用示例

interfaceState{

count:number

user:string

}

typeReadonlyState=Readonly<State>

//{readonlycount:number;readonlyuser:string}

conststate:ReadonlyState={count:0,user:'张开发'}

//state.count=1//编译报错

要素4：真实工作场景完整案例

背景：在状态管理中使用不可变数据，确保某些配置对象在初始化后不可修改。

数据：

interfaceThemeConfig{

primaryColor:string

fontSize:number

borderRadius:number

darkMode:boolean

}

consttheme:Readonly<ThemeConfig>={

primaryColor:'#409eff',

fontSize:14,

borderRadius:6,

darkMode:false

}

操作步骤：

1.使用Readonly<ThemeConfig>声明主题配置。

2.任何试图修改theme.primaryColor的代码都会编译报错。

3.需要修改时创建新对象：constnewTheme={...theme,primaryColor:'#67c23a'}。

结果：团队协作中，主题配置不会被意外修改，所有修改必须显式创建新对象，符合不可变数据原则。

要素5：组合用法

组合公式：Readonly<Pick<T,K>>&Omit<T,K>

适用场景：只读部分字段。

typeUser={id:number;name:string;email:string}

typeIdReadonly=Readonly<Pick<User,'id'>>&Omit<User,'id'>

要素6：常见错误与正确写法对比

错误1：以为Readonly是深度只读

interfaceNested{

user:{name:string}

}

typeWrong=Readonly<Nested>

//{readonlyuser:{name:string}}

//='x'仍然可以

正确：需要深度只读时使用DeepReadonly<T>。

错误2：对数组使用Readonly

typeArr=Readonly<string[]>//readonlystring[]

这可以，但ReadonlyArray<string>更语义化。

要素7：进阶技巧

使用asconst断言获得更窄的只读字面量类型：

constconfig={

mode:'dark',

level:1

}asconst

//{readonlymode:'dark';readonlylevel:1}

要素8：零基础操作引导

在哪里输入：src/types/utils.ts。

怎么输入：输入typeMyReadonly<T>={readonly[PinkeyofT]:T[P]}。

怎么确认：定义typeTest=MyReadonly<{a:string}>，悬停显示{readonlya:string}。尝试赋值

constt:Test={a:'x'};t.a='y'，编译报错。

报错了怎么办：

报错Cannotassignto'a'becauseitisaread-onlyproperty：这是预期行为，说明只读生效。

报错readonlymodifiercannotappearonatypemember：检查readonly是否写在[PinkeyofT]

前面。

工具4：Pick<T,K>——选取属性

要素1：基础信息

语法：typePick<T,KextendskeyofT>={[PinK]:T[P]}

参数说明：

T：源对象类型。

K：要选取的键，必须是keyofT的子集。

[PinK]：只遍历K中的键。

作用：从T中选取指定的属性K，构造新类型。

要素2：完整实现代码

typeMyPick<T,KextendskeyofT>={

[PinK]:T[P]

}

变体：选取多个键组合

typePickBy<T,KextendskeyofT>=Pick<T,K>

要素3：使用示例

interfaceUser{

id:number

name:string

email:string

password:string

createdAt:string

}

typeUserListItem=Pick<User,'id'|'name'|'email'>

//{id:number;name:string;email:string}

typeLoginParams=Pick<User,'email'|'password'>

//{email:string;password:string}

要素4：真实工作场景完整案例

背景：用户列表接口只返回部分字段，详情接口返回全部字段，需要为不同接口定义精确的类型。

数据：

interfaceUserEntity{

id:number

name:string

email:string

phone:string

password:string

idCard:string

address:string

createdAt:string

updatedAt:string

}

typeUserListResponse=Pick<UserEntity,'id'|'name'|'email'|'phone'>[]

typeUserDetailResponse=Omit<UserEntity,'password'>

typeUserCreateParams=Pick<UserEntity,'name'|'email'|'phone'|'password'>

操作步骤：

1.定义完整实体UserEntity。

2.列表接口使用Pick选取安全字段。

3.详情接口使用Omit排除密码。

4.创建接口使用Pick选取必要字段。

结果：列表接口不返回敏感字段，详情接口排除密码，创建接口类型明确。类型系统防止将password错误地渲染到

列表页。

要素5：组合用法

组合公式：Pick<T,K>&Partial<Omit<T,K>>

适用场景：部分字段必选，其余可选。

typeUser={id:number;name:string;email:string}

typeIdRequired=Pick<User,'id'>&Partial<Omit<User,'id'>>

要素6：常见错误与正确写法对比

错误1：K不在keyofT中

typeWrong=Pick<User,'age'>//编译报错

正确：确保K是T的键。

typeCorrect=Pick<User,'name'>

错误2：误用Pick选取不存在的深层属性

typeWrong=Pick<User,'address.city'>//编译报错

正确：使用Path<T>或手动定义。

要素7：进阶技巧

结合keyof动态选取：

functionpick<Textendsobject,KextendskeyofT>(obj:T,keys:K[]):Pick<T,K>{

constresult={}asPick<T,K>

keys.forEach(key=>{

result[key]=obj[key]

})

returnresult

}

constuser={id:1,name:'张开发',email:'【邮箱】'}

constpicked=pick(user,['id','name'])

//{id:number;name:string}

要素8：零基础操作引导

在哪里输入：src/types/utils.ts。

怎么输入：输入typeMyPick<T,KextendskeyofT>={[PinK]:T[P]}。

怎么确认：定义typeTest=MyPick<{a:string;b:number;c:boolean},'a'|'c'>，悬停显示{a:

string;c:boolean}。

报错了怎么办：

报错Type'"x"'doesnotsatisfytheconstraint'keyofT'：检查选取的键是否存在于源类型。

报错Cannotfindname'K'：检查泛型参数是否写在<T,KextendskeyofT>中。

工具5：Omit<T,K>——排除属性

要素1：基础信息

语法：typeOmit<T,Kextendskeyofany>=Pick<T,Exclude<keyofT,K>>

参数说明：

T：源对象类型。

K：要排除的键，可以是任意键的联合。

内部使用Exclude排除K，再用Pick选取剩余键。

作用：从T中排除指定的属性K，构造新类型。

要素2：完整实现代码

typeMyOmit<T,Kextendskeyofany>=Pick<T,Exclude<keyofT,K>>

变体：排除多个键

typeOmitMany<T,KextendskeyofT>=Omit<T,K>

要素3：使用示例

interfaceUser{

id:number

name:string

email:string

password:string

createdAt:string

}

typeSafeUser=Omit<User,'password'>

//{id:number;name:string;email:string;createdAt:string}

typeUserWithoutMeta=Omit<User,'id'|'createdAt'>

//{name:string;email:string;password:string}

要素4：真实工作场景完整案例

背景：后端返回的用户对象包含密码字段，前端渲染时必须排除。同时创建用户时不需要id和createdAt。

数据：

interfaceUserEntity{

id:number

name:string

email:string

password:string

createdAt:string

updatedAt:string

}

typeSafeUser=Omit<UserEntity,'password'>

typeCreateUserParams=Omit<UserEntity,'id'|'createdAt'|'updatedAt'>

操作步骤：

1.定义SafeUser排除密码。

2.定义CreateUserParams排除服务端生成字段。

3.API函数使用这些类型。

asyncfunctiongetUsers():Promise<SafeUser[]>{

returnrequest.get('/users')

}

asyncfunctioncreateUser(params:CreateUserParams):Promise<SafeUser>{

returnrequest.post('/users',params)

}

结果：任何试图在渲染中使用user.password的代码都会编译报错。创建用户时不会误传id。

要素5：组合用法

组合公式：Omit<T,K>&{extra:string}

适用场景：排除字段后添加新字段。

typeUserWithRole=Omit<User,'password'>&{role:string}

要素6：常见错误与正确写法对比

错误1：Omit的K约束是keyofany而非keyofT

typeWrong=Omit<User,'notExist'>//不报错，但结果不变

正确：确保排除的键有意义。

错误2：误以为Omit会报错不存在的键

typeResult=Omit<User,'age'>//不报错，age被忽略

这是设计行为，需注意。

要素7：进阶技巧

结合Pick和Omit实现字段重命名：

typeRename<T,KextendskeyofT,Nextendsstring>=Omit<T,K>&{[PinN]:T[K]}

typeUser={id:number;name:string}

typeRenamed=Rename<User,'name','fullName'>

//{id:number;fullName:string}

要素8：零基础操作引导

在哪里输入：src/types/utils.ts。

怎么输入：输入typeMyOmit<T,Kextendskeyofany>=Pick<T,Exclude<keyofT,K>>。

怎么确认：定义typeTest=MyOmit<{a:string;b:number;c:boolean},'b'>，悬停显示{a:

string;c:boolean}。

报错了怎么办：

报错Type'K'doesnotsatisfytheconstraint'keyofany'：检查K的约束。

报错Excludeisnotdefined：确保TypeScript版本支持内置Exclude，或手动实现。

工具6：Record<K,T>——构造记录

要素1：基础信息

语法：typeRecord<Kextendskeyofany,T>={[PinK]:T}

参数说明：

K：键的联合类型，可以是string、number、symbol或其联合。

T：值的类型。

[PinK]：遍历K中的每个键。

作用：构造一个对象类型，键为K，值为T。

要素2：完整实现代码

typeMyRecord<Kextendskeyofany,T>={

[PinK]:T

}

变体：键为枚举

enumStatus{

Active='active',

Inactive='inactive'

}

typeStatusMap=Record<Status,string>

//{active:string;inactive:string}

要素3：使用示例

typePage='home'|'about'|'contact'

typePageTitle=Record<Page,string>

//{home:string;about:string;contact:string}

consttitles:PageTitle={

home:'首页',

about:'关于',

contact:'联系'

}

typeUserMap=Record<number,{name:string;age:number}>

要素4：真实工作场景完整案例

背景：权限系统需要定义角色到权限列表的映射。

数据：

typeRole='admin'|'editor'|'viewer'

typePermission='user:list'|'user:edit'|'user:delete'|'post:list'

constrolePermissions:Record<Role,Permission[]>={

admin:['user:list','user:edit','user:delete','post:list'],

editor:['user:list','post:list'],

viewer:['user:list','post:list']

}

functionhasPermission(role:Role,permission:Permission):boolean{

returnrolePermissions[role].includes(permission)

}

操作步骤：

1.定义角色和权限联合类型。

2.使用Record<Role,Permission[]>定义映射。

3.实现权限判断函数。

结果：新增角色时必须补全映射，否则编译报错。权限判断函数类型安全。

要素5：组合用法

组合公式：Record<K,Partial<T>>

适用场景：键到可选对象的映射。

typeUser={name:string;age:number}

typeUserMap=Record<string,Partial<User>>

要素6：常见错误与正确写法对比

错误1：K为对象类型

typeWrong=Record<{id:number},string>//编译报错

正确：K必须是string|number|symbol的子类型。

错误2：误用Record替代接口

typeWrong=Record<'name'|'age',string|number>

//{name:string|number;age:string|number}

如果希望name是string、age是number，应使用接口或映射类型。

要素7：进阶技巧

结合asconst和Record实现枚举映射：

constSTATUS={

active:'激活',

inactive:'未激活'

}asconst

typeStatusKey=keyoftypeofSTATUS

typeStatusLabel=Record<StatusKey,string>

要素8：零基础操作引导

在哪里输入：src/types/utils.ts。

怎么输入：输入typeMyRecord<Kextendskeyofany,T>={[PinK]:T}。

怎么确认：定义typeTest=MyRecord<'a'|'b',number>，悬停显示{a:number;b:number}。

报错了怎么办：

报错Type'K'doesnotsatisfytheconstraint'string|number|symbol'：检查K是否为对象类

型。

报错Anindexsignatureparametertypecannotbealiteraltype：检查K是否使用联合字面量，而

非单一字面量。

工具7：Exclude<T,U>——排除联合

要素1：基础信息