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

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北,关注公众号

回复1,加入高级Node交流群

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

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

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

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

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

1.Partial<Type>

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

695b04b6e7cc050a6199b76f064ddcfc.jpeg

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

0c200e9c04737d52d1f2880c11823852.jpeg

2.  Required<Type>

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

017348d421031b1d991ceb2ce4ba6347.jpeg

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

337dcabe6006eb1f11c350fe0c3f0df8.jpeg

3.Readonly<Type>

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

0da82a08423d9624379a58f1f5deade4.jpeg

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

61514d26ddf9393908ca91b8ac8f8a02.jpeg

4.Record<Keys, Type>

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

9d102e612136c8d2194b8db5f0675987.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 的所有联合成员来构造类型。

d6df32af032b6ed3303b07ff324f069a.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;

22d47e947a20b7f0bdd8d07e3d726334.jpeg

6. Extract<Type, Union>

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

8f410af3205929933564f1d4666b4921.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;

2db4ac77b2679381db602afeb8c1d0a8.jpeg

7. Pick<Type, Keys>

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

348bc2cd541127df6fadee4b906add31.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];
};

4f42120d3a094e40fc7f893088ab86ae.jpeg

8.Omit<Type, Keys>

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

728ceb0e2fecd3cd02acb7bc469759a5.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>>;

9adad91440b4909ea69d9e308a61526f.jpeg

9. NonNullable<Type>

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

0b2536d0cee6d38c6e13b60461c90592.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 的参数中使用的类型构造元组类型。

0be5cf73f34b551767767272c03858bd.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 的返回类型组成的类型。

8b8ca18192b4c796b8f94fde7393943b.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>

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

09e1b07488444bffd65cefb190f7d47c.jpeg

13.小写<StringType>

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

a51ebbfa7af859de89dcb611abd0a3c3.jpeg

14. 大写<StringType>

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

19474bdd421c8f1c676581680b9c462e.jpeg

15. 取消大写<StringType>

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

4227aae677958aad2a271e5a8e632a2a.jpeg

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

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

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

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

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

Node 社群

我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

cd118c3daa6fb1862766a81661dbc1a1.jpeg

   “分享、点赞、在看” 支持一波👍

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值