TypeScript的常用工具类型及其应用示例

更新时间：2026年05月25日 09:45:32 作者：Raink老师

TypeScript内置的工具类型(Utility Types)提供了一种高效的方式来变换和操作现有类型,适用于表单处理、API数据转换等场景,合理组合使用这些工具类型,可使类型定义更精简高效,感兴趣的可以了解一下

一、Partial<Type>

作用：将某个类型的所有属性变为可选。

语法：

Partial<T>

示例：

interface User {
    Id: string;
    email: string;
}
type PartialUser = Partial<User>;
const partialUser: PartialUser = { Id: '123' };
console.log(partialUser); // 输出: { Id: '123' }

说明：

PartialUser 中的所有属性都是可选的。
partialUser 只传入了 Id 属性也合法。

二、Required<Type>

作用：将某个类型中的所有属性变为必填。

语法：

Required<T>

示例：

interface User {
    name?: string;
    age?: number;
}
type RequiredUser = Required<User>;
const requiredUser: RequiredUser = { name: 'John', age: 20 };
console.log(requiredUser); // 输出: { name: 'John', age: 20 }

说明：

RequiredUser 中的所有属性都变成了必填。
缺少任何属性都会报错。

三、Readonly<Type>

作用：将类型中所有属性标记为只读，禁止修改。

语法：

Readonly<T>

示例：

interface User {
    name: string;
    age: number;
}
type ReadonlyUser = Readonly<User>;
const readonlyUser: ReadonlyUser = { name: 'John', age: 30 };
readonlyUser.name = 'Jane'; 
// 报错：Cannot assign to 'name' because it is a read-only property.

说明：

ReadonlyUser 的属性不能被修改。
用于实现对象的不可变性。

四、Pick<Type, Keys>

作用：从类型 T 中挑选出一组指定的属性，构成新类型。

语法：

Pick<T, K>

示例：

interface User {
    name: string;
    age: number;
    email: string;
}
type UserSummary = Pick<User, 'name' | 'email'>;
const userSummary: UserSummary = { name: 'ram', email: 'ram@example.com' };
console.log(userSummary); // 输出: { name: 'ram', email: 'ram@example.com' }

说明：

只选择了 User 中的 name 和 email 属性。

五、Parameters<Type>

作用：提取函数类型中所有参数类型，组成元组类型。

语法：

Parameters<T>

示例：

function sum(a: number, b: number): number {
    return a + b;
}
type SumParams = Parameters<typeof sum>;  // [number, number]
const params: SumParams = [1, 2];
console.log(params); // 输出: [1, 2]

说明：

SumParams 是一个元组类型 [number, number]。
可以动态地从函数中提取参数类型进行复用。

六、Record<Keys, Type>

作用：构建一个具有固定 key 的对象类型，所有 key 对应的值都是指定的类型。

语法：

Record<K, T>

示例：

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;
const inventory: Inventory = {
    apple: 10,
    banana: 15,
    orange: 20
};
console.log(inventory); 
// 输出: { apple: 10, banana: 15, orange: 20 }

说明：

Inventory 是一个 key 为水果名，value 为数量的对象。
保证所有 key 都存在，且值为 number 类型。

七、Exclude<Type, ExcludedUnion>

作用：从联合类型 T 中排除掉属于 U 的部分。

语法：

Exclude<T, U>

示例：

type Status = 'pending' | 'approved' | 'rejected';
type NonRejectedStatus = Exclude<Status, 'rejected'>;
const status: NonRejectedStatus = 'approved';
console.log(status); // 输出: approved

说明：

NonRejectedStatus 只包含 'pending' 和 'approved'，排除了 'rejected'。
如果赋值为 'rejected' 会报错。

八、使用建议和最佳实践

理解每种工具类型的用途：如 Partial 用于表单、更新操作，Readonly 用于不可变数据。
保持类型一致性：统一使用工具类型能让代码更具可读性。
合理组合工具类型：可以 Pick 再 Readonly，但避免过度嵌套造成难以维护。

九、总结

TypeScript 的工具类型为我们提供了一套强大且灵活的类型变换机制，可以让类型定义更加精简、强大而不失可读性。无论是在业务模型构建、表单设计还是 API 数据转换中，它们都能大幅提升代码的开发效率与维护质量。

推荐使用场景包括：

接口部分字段可选（使用 Partial）
创建只读数据模型（使用 Readonly）
提取函数参数、返回值类型（使用 Parameters, ReturnType）
对接口类型取子集（使用 Pick, Omit）
创建特定 key 的对象（使用 Record）

充分掌握这些工具类型，是成为 TypeScript 高效开发者的必经之路。

到此这篇关于TypeScript的常用工具类型及其应用示例的文章就介绍到这了,更多相关TypeScript 常用工具类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript判断机器是否联网的2种方法
只有机器已经联网以后，web应用才能启动，下面使用javascript判断机器是否联网，具体判断代码如下，有此需求的朋友可以参考下
2013-08-08
js加减乘除精确运算方法实例代码
这篇文章主要给大家介绍了关于js加减乘除精确运算方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
JavaScript贪吃蛇小组件实例代码
本文通过实例代码给大家分享了JavaScript贪吃蛇小组件功能 ,需要的朋友可以参考下
2017-08-08
javascript管中窥豹形参与实参浅析
本想从语言的角度来分析，无奈功力不够，只能粗浅的尝试一下，于是称之管中窥豹，还望大牛指正
2011-12-12
js如何修改对象数组的key值
这篇文章主要介绍了js如何修改对象数组的key值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
JavaScript中的this关键字用法详解
在编写JavaScript应用的时候，我们经常会使用this关键字。那么this关键字究竟是怎样工作的，它的设计有哪些好的地方，有哪些不好的地方，本文带大家全面系统地认识这个老朋友，感兴趣的小伙伴可以借鉴阅读
2023-05-05
JS的IE和Firefox兼容性集锦
JS的IE和Firefox兼容性集锦...
2006-12-12
原生JavaScript实现轮播图效果
这篇文章主要为大家详细介绍了原生JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
一款JavaScript压缩工具：X2JSCompactor
一款JavaScript压缩工具：X2JSCompactor...
2007-06-06
Bootstrap学习笔记之css组件(3)
这篇文章主要为大家详细介绍了bootstrap学习笔记中的css组件，感兴趣的小伙伴们可以参考一下
2016-06-06