15 种TypeScript最常用的实用程序类型

ae655c897cc1c5f5480f31397eded997.jpeg

英文 | https://javascript.plainenglish.io/15-utility-types-that-every-typescript-developer-should-know-6cf121d4047c

我们在使用 TypeScript 的过程中,我们是面向类型编程的,为了满足不同的工作场景,我们需要对已知类型进行改造。

为了方便 TypeScript 用户,TypeScript 开发团队为我们提供了许多有用的内置实用程序类型。

通过这些实用类型,我们可以轻松地转换类型、提取类型、排除类型,或者获取函数的参数类型或返回值类型。

在本文中,我从 TypeScript 的内置实用程序类型中挑选了 15 种非常有用的类型,并以图像的形式介绍了它们的用法和内部工作原理,看完这篇文章,相信你可以真正掌握这些内置实用程序类型的用法。

1.Partial<Type>

构造一个类型,其中 Type 的所有属性都设置为可选。

6d8fa038f62df968210d5e78e956e384.jpeg

/**
 * Make all properties in T optional. 
 * typescript/lib/lib.es5.d.ts
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

f7923b53365c481b79827325a51c9733.jpeg

2.  Required<Type>

构造一个类型,该类型由设置为 required  Type 的所有属性组成,部分的反义词。

9ab597b377def929c730379c5f9a6b3a.jpeg

/**
 * Make all properties in T required.
 * typescript/lib/lib.es5.d.ts
 */
type Required<T> = {
    [P in keyof T]-?: T[P];
};

d7fae30369489809e7254f7d6af7b9cb.jpeg

3.Readonly<Type>

构造一个 Type 的所有属性都设置为 readonly 的类型,这意味着构造类型的属性不能被重新分配。

632db6bb6e5468288c137436212be21c.jpeg

/**
 * Make all properties in T readonly.
 * typescript/lib/lib.es5.d.ts
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

4bd8a343e2d41c05e479a39dc02688ad.jpeg

4.Record<Keys, Type>

构造一个对象类型,其属性键为 Keys,其属性值为 Type,此实用程序可用于将一种类型的属性映射到另一种类型。

69a89bc5934c3297fc0d8f02990d6e0e.jpeg

/**
 * Construct a type with a set of properties K of type T.
 * typescript/lib/lib.es5.d.ts
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

5. Exclude<UnionType, ExcludedMembers>

通过从 UnionType 中排除可分配给 ExcludedMembers 的所有联合成员来构造类型。

e6a41c47d4d4ed7a7b6791d49dff3689.jpeg

/**
 * Exclude from T those types that are assignable to U.
 * typescript/lib/lib.es5.d.ts
 */
type Exclude<T, U> = T extends U ? never : T;

5a720b625a8de305056a5d43f850bacd.jpeg

6. Extract<Type, Union>

通过从 Type 中提取所有可分配给 Union 的联合成员来构造一个类型。

4d1e3939cf9527f6ea8ea3468b42d324.jpeg

/**
 * Extract from T those types that are assignable to U.
 * typescript/lib/lib.es5.d.ts
 */
type Extract<T, U> = T extends U ? T : never;

19885a111e99c2ded737d599cf2c7b71.jpeg

7. Pick<Type, Keys>

通过从 Type 中选择一组属性 Keys(字符串文字或字符串文字的联合)来构造一个类型。

70a6dbb175a30bc036e0f54d5dcf2690.jpeg

/**
 * From T, pick a set of properties whose keys are in the union K.
 * typescript/lib/lib.es5.d.ts
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

bff00d2331fa6735ec2f614f129b0384.jpeg

8.Omit<Type, Keys>

通过从 Type 中选择所有属性然后删除 Keys(字符串文字或字符串文字的联合)来构造一个类型。

695acbbfdae7fb95d772f03770c8f364.jpeg

/**
 * Construct a type with the properties of T except for those 
 * in type K. 
 * typescript/lib/lib.es5.d.ts
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

567c68101458b3b76a1b27f1a7f15824.jpeg

9. NonNullable<Type>

通过从 Type 中排除 null 和 undefined 来构造一个类型。

cc63c3b7b0c78f38ecb1a75b2a5c436c.jpeg

/**
 * Exclude null and undefined from T.
 * typescript/lib/lib.es5.d.ts
 */
type NonNullable<T> = T extends null | undefined ? never : T;

10. Parameters<Type>

从函数类型 Type 的参数中使用的类型构造元组类型。

feecfa7328033b3027383564eda2811b.jpeg

/**
 * Obtain the parameters of a function type in a tuple.
 * typescript/lib/lib.es5.d.ts
 */
type Parameters<T extends (...args: any) => any> = T extends 
  (...args: infer P) => any ? P : never;

11. ReturnType<Type>

构造一个由函数 Type 的返回类型组成的类型。

88254749aebdf04b460cb37bb477c631.jpeg

/**
 * Obtain the return type of a function type.
 * typescript/lib/lib.es5.d.ts
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

12. Uppercase<StringType>

将字符串文字类型转换为大写。

dff39516eb90e59eae944a0ee6bd0368.jpeg

13.小写<StringType>

将字符串文字类型转换为小写。

3ab0ea2b45e9adf29cede4fe4242dd00.jpeg

14. 大写<StringType>

将字符串文字类型的第一个字符转换为大写。

f0c7ff62a5d3dd6e04a4c9ebe2940d93.jpeg

15. 取消大写<StringType>

将字符串文字类型的第一个字符转换为小写。

a2ad4222c5df7ff37d44f28536f84ba3.jpeg

除了上述这些实用程序类型之外,还有一些其他常用的 TypeScript 内置实用程序类型,具体如下:

  • ConstructorParameters<Type>:根据构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的元组类型(如果 Type 不是函数,则类型 never )。

  • InstanceType<Type>:构造一个由Type中构造函数的实例类型组成的类型。

  • ThisParameterType<Type>:为函数类型提取此参数的类型,如果函数类型没有此参数,则为未知。

本文介绍的实用程序类型在内部使用了有关映射类型、条件类型和推断类型推断的知识。如果你对映射类型和条件类型不熟悉,后面我将继续分享一些这个方面的知识。

学习更多技能

请点击下方公众号

58eed93a5a6e5924d6ece19ec8b77e25.gif

b039ce91ce8e60a745c2da956aa5bf66.jpeg

1938bf20239f4179412f8e39ed491239.png

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值