Sébastien TIMONER 的博客
所有文章
🇫🇷🇪🇸🇩🇪🇮🇹🇨🇳🇮🇳🇯🇵
mailgithublinkedinrss
Sébastien Timoner
© 2025
•
timoner.com
  1. 首页
  3. typescript
  5. 充分利用TypeScript实用工具类型

充分利用TypeScript实用工具类型

2024/10/11
可用语言 :

分享这篇文章

FacebookXLinkedIn
Sébastien Timoner

Sébastien TIMONER

首席开发工程师
定制开发专家
Aix-en-Provence, France
Mon Univers : Projets, Rendez-vous et Ressources
GitHub - @offroadlabs
LinkedIn
X - @sebtimoner
sebastien@timoner.com

作为 Web 开发和技术团队管理专家，我专注于创建和优化高性能数字解决方案。通过对 React.js、Node.js、TypeScript、Symfony 和 IoT 领域的 Zephyr OS 等现代技术的深入掌握，我确保在 offroadLabs 中为各行业企业的复杂 SaaS 和 IoT 项目从设计到生产的成功。

在 offroadLabs，我提供定制开发服务，结合技术专长和协作方法。无论是创建创新的 SaaS 解决方案、使用 Zephyr OS 开发 IoT 系统、现代化现有应用程序还是支持团队的专业成长，我都致力于提供稳健且高效的解决方案，适应每个项目的具体需求。

我可以在艾克斯普罗旺斯周边或完全远程工作。

TypeScript提供了许多实用工具类型，让你能够以动态和实用的方式操作类型。无论是将属性设为可选、不可变，还是过滤类型的某些字段，这些工具都可以帮助你编写更清晰、更安全、更易读的代码。

在本文中，你将了解TypeScript中一些最常用的实用工具类型，并通过具体示例来说明如何以及何时使用它们。

1. Partial<T>

Partial<T>实用工具类型将类型T的所有属性转换为可选属性。当你处理不需要所有属性的对象时，这特别有用。

示例

假设有一个具有必需属性的User类型：

typescript

如果你想创建一个更新用户的函数，但只需要这些属性的子集，你可以使用Partial<User>：

typescript

通过Partial<User>，你现在可以只更新某些属性，而不必提供所有其他属性。

2. Readonly<T>

Readonly<T>使类型T的所有属性变为只读。这意味着一旦创建了对象，就不能再修改其属性，这对于常量对象来说是理想的选择。

示例

typescript

使用Readonly<Config>，你可以确保config在整个执行过程中保持不变。

3. Pick<T, K>

Pick<T, K>实用工具类型通过仅选择类型T的某些属性来创建新类型。当你想要从现有类型创建子类型时，这很有用。

示例

typescript

通过Pick<User, "id" | "name">，你创建了一个只包含id和name属性的UserSummary类型。

4. Omit<T, K>

相反，Omit<T, K>通过排除类型T的某些属性来创建新类型。这是Pick的反向操作。

示例

typescript

在这个例子中，UserWithoutAddress包含User的所有属性，除了address。

5. Record<K, T>

Record<K, T>用于创建一个对象类型，其中键K是特定类型，值是类型T。这对于创建关联对象（如字典或映射）很有用。

示例

假设你想创建一个将用户角色与访问权限关联的对象：

typescript

在这个例子中，Record<Role, Permissions[]>确保rolePermissions对象包含所有的admin、user和guest键，且值类型为Permissions[]。

6. Exclude<T, U>

Exclude<T, U>允许通过从另一个类型中排除某些类型来创建新类型。这对于从联合类型中过滤特定类型很有用。

示例

typescript

使用Exclude<Status, "suspended">，你创建了一个不能为"suspended"的ActiveStatus类型。

结论

TypeScript的实用工具类型使你能够以简洁和可读的方式表达复杂类型。通过利用Partial、Readonly、Pick、Omit、Record和Exclude，你可以动态操作类型，满足应用程序的需求，而不会使代码变得臃肿。

这些实用工具只是冰山一角：TypeScript还提供了许多其他高级实用工具类型。花时间探索这些工具，你的代码将更易于维护、更安全、更易于阅读。

通过应用这些技巧，你可以更有效地操作类型，编写更健壮的TypeScript代码。祝编码愉快！

1type User = {
2  id: number;
3  name: string;
4  email: string;
5};
1function updateUser(user: User, updates: Partial<User>) {
2  return { ...user, ...updates };
3}
4
5// 使用示例
6const user: User = { id: 1, name: '小明', email: 'xiaoming@example.com' };
7const updatedUser = updateUser(user, { name: '小华' });
1type Config = {
2  apiEndpoint: string;
3  timeout: number;
4};
5
6const config: Readonly<Config> = {
7  apiEndpoint: 'https://api.example.com',
8  timeout: 5000,
9};
10
11// 错误：无法分配到 'timeout' ，因为它是只读属性
12config.timeout = 3000;
1type User = {
2  id: number;
3  name: string;
4  email: string;
5  address: string;
6};
7
8type UserSummary = Pick<User, 'id' | 'name'>;
9
10const userSummary: UserSummary = {
11  id: 1,
12  name: '小明',
13};
14
15// 错误：类型'UserSummary'上不存在属性'email'
16userSummary.email = 'xiaoming@example.com';
1type UserWithoutAddress = Omit<User, 'address'>;
2
3const userWithoutAddress: UserWithoutAddress = {
4  id: 1,
5  name: '小明',
6  email: 'xiaoming@example.com',
7};
8
9// 错误：类型'UserWithoutAddress'上不存在属性'address'
10userWithoutAddress.address = '北京市朝阳区';
1type Role = 'admin' | 'user' | 'guest';
2type Permissions = 'read' | 'write' | 'delete';
3
4const rolePermissions: Record<Role, Permissions[]> = {
5  admin: ['read', 'write', 'delete'],
6  user: ['read', 'write'],
7  guest: ['read'],
8};
1type Status = 'active' | 'inactive' | 'suspended';
2
3type ActiveStatus = Exclude<Status, 'suspended'>;
4
5const status: ActiveStatus = 'active'; // 有效
6const anotherStatus: ActiveStatus = 'suspended'; // 错误