最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

世界报道:TypeScript中的实用工具类型(Utility Types)

来源：博客园

TypeScript中的实用工具类型是一些预定义的泛型类型，可用于操作或创建其它新类型。这些实用工具类型在所有TypeScript项目中都是全局可用的，因此无需添加任务依赖项即可使用它们。

1.Partial

将Type的所有属性都设置为可选的类型。


(资料图片仅供参考)

1 interface Person { 2   name: string; 3    age: number; 4   email: string; 5 } 6  7  type PartialPerson = Partial; 8  9  //相当于10  // interface Person {11  //   name?: string | undefined;12  //   age?: number | undefined;13  //   email?: string | undefined;14  // }15 16 interface Todo {17    title: string;18    description: string;19 }20 21 function updateTodo(todo: Todo, fieldsToUpdate: Partial) {22    return { ...todo, ...fieldsToUpdate };23 }24 25 const todo1 = {26   title: "organize desk",27   description: "clear clutter",28 };29 30 const todo2 = updateTodo(todo1, {31    description: "throw out trash",32 });

2.Required

与Partical 相反，该类型由Type中所有属性设置为required组成。

1 interface Person { 2  name?: string | undefined; 3  age?: number | undefined; 4  email?: string | undefined; 5 } 6  7  8 type RequiredPerson = Required; 9 10 // 相当于11 // interface Person {12 //   name: string;13 //   age: number;14 //   email: string;15 // }

3.Omit

构建一个新类型--从类型Type中获取所有属性，然后从中剔除Keys属性。

1 interface User { 2   id: number; 3   name: string; 4   email: string; 5   age: number; 6 } 7  8 type UserWithoutEmail = Omit; 9 10 // 相当于11 // interface Person {12 //   id: string;13 //   name: string;14 //   age: number;15 // }

也可以移除多个属性，

1 interface User { 2   id: number; 3   name: string; 4   email: string; 5   age: number; 6 } 7  8 type UserWithoutEmailAndName = Omit; 9 10 // 相当于 11 // interface Person {12 //   id: string;13 //   age: number;14 // }

4.Pick

从类型Type中挑选部分属性Keys来构造类型，与Omit相反。

1 interface User { 2   id: number; 3   name: string; 4   email: string; 5   age: number; 6 } 7  8 type UserWithEmailAndName = Pick; 9 10 // 相当于11 // interface Person {12 //   name: string;13 //   email: string;14 // }

可以组合使用这些类型，创造新的类型

1 interface User { 2   id: number; 3   name: string; 4   email: string; 5   age: number; 6 } 7  8 type PartialPick = Partial>; 9 10 // 相当于11 // interface Person {12 //   name?: string | undefined;13 //   email?: string | undefined;14 // }
1 interface User { 2   id: number; 3   name: string; 4   email: string; 5   age: number; 6 } 7  8 type OmitPartialPick = Omit>, "email">; 9 10 // 相当于 11 // interface Person {12 //   name?: string | undefined;13 // }

5.Readonly

通过该Type构造新类型，并将它所有的属性设置为只读的，也就意味着构造出的类型的属性不能被再次赋值。

1 interface Person { 2   id: number; 3   name: string; 4   age: number; 5 } 6  7 type ReadonlyPerson = Readonly; 8  9 //相当于10 // interface Person {11 //   readonly id: number;12 //   readonly name: string;13 //   readonly age: number;14 // }15 16 const person: ReadonlyPerson = {17   id: 1,18   name: "John",19   age: 2520 };21 22 person.name = "Mike"; // Error: Cannot assign to "name" because it is a read-only property.

这个类型可用来表示在运行时会失败的赋值表达式（比如，当尝试给冻结对象的属性再次赋值时）

Object.freeze

1 function freeze(obj: T): Readonly;

6.Record

构造一个对象类型，其属性为Keys,属性值为Type；该实用工具类型可用于将一种类型的属性映射到另一种类型。

1 interface CatInfo { 2   age: number; 3   breed: string; 4 } 5   6 type CatName = "miffy" | "boris" | "mordred"; 7   8 const cats: Record = { 9   miffy: { age: 10, breed: "Persian" },10   boris: { age: 5, breed: "Maine Coon" },11   mordred: { age: 16, breed: "British Shorthair" },12 };13  14 cats.boris;15

7.Exclude

通过从 UnionType 中排除所有可分配给 ExcludedMembers 的属性来构造一个类型；也就是删除 union 类型的成员来创建新类型。

1 type T0 = Exclude<"a" | "b" | "c", "a">;2 type T0 = "b" | "c"3 4 type T1 = Exclude<"a" | "b" | "c", "a" | "b">;5 type T1 = "c"6 7 type T2 = Exclude void), Function>;8 type T2 = string | number

8.Extract

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

1 type T0 = Extract<"a" | "b" | "c", "a" | "f">;2 type T0 = "a"3 4 type T1 = Extract void), Function>;5 type T1 = () => void

9.NonNullable

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

1 type T0 = NonNullable;2 type T0 = string | number3 4 type T1 = NonNullable;5 type T1 = string[]

10.ReturnType

由函数类型Type的返回值类型构建一个新类型。

1 function add(a: number, b: number): number { 2   return a + b; 3 } 4  5 type AddReturnType = ReturnType; 6 // type AddReturnType = number; 7  8  9 function addStr(a: string, b: string): string{10   return a + b;11 }12 13 type AddReturnType2 = ReturnType;14 // type AddReturnType2 = string;15 16 type T0 = ReturnType<() => string>;17 type T0 = string18 19 type T1 = ReturnType<(s: string) => void>;20 type T1 = void21 22 type T2 = ReturnType<() => T>;    23 type T2 = unknown24 25 type T3 = ReturnType<() => T>;26 type T3 = number[]

11.Parameters

由函数类型Type的参数类型来构建出一个元组类型。

1 function add(a: number, b: string, c:boolean): string { 2   return a + b; 3 } 4  5 type AddReturnType = Parameters; 6 // type AddReturnType = [a: number, b: string, c:boolean]; 7  8 type T0 = Parameters<() => string>; 9 type T0 = []10 11 type T1 = Parameters<(s: string) => void>;12 type T1 = [s: string]13 14 type T2 = Parameters<(arg: T) => T>;15 type T2 = [arg: unknown]

12.Awaited

这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作——具体来说，就是它们递归展开 Promises 的方式。

1 async function fetchData(): Promise { 2   // fetch data from API and return a string 3 } 4  5 type ResolvedResult = Awaited>; 6 // type ResolvedResult = string 7  8 type A = Awaited>; 9 type A = string10  11 type B = Awaited>>; 12 type B = number13  14 type C = Awaited>;  15 type C = number | boolean

以上，是较常用的一些实用工具类型。

参考资料：

https://www.typescriptlang.org/docs/handbook/utility-types.html#uppercasestringtype

https://dev.to/arafat4693/typescript-utility-types-that-you-must-know-4m6k

关键词：