TypeScript中的实用工具类型(Utility Types)

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

1.Partial<Type>

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

interface Person {
  name: string;
   age: number;
  email: string;
}

 type PartialPerson = Partial<Person>;

 //相当于
 // interface Person {
 //   name?: string | undefined;
 //   age?: number | undefined;
 //   email?: string | undefined;
 // }

interface Todo {
   title: string;
   description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
   return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};

const todo2 = updateTodo(todo1, {
   description: "throw out trash",
});

2.Required<Type>

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

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

3.Omit<Type, Keys>

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

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

type UserWithoutEmail = Omit<User, 'email'>;

// 相当于
// interface Person {
//   id: string;
//   name: string;
//   age: number;
// }

也可以移除多个属性，

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

type UserWithoutEmailAndName = Omit<User, 'email' | 'name'>;

// 相当于 
// interface Person {
//   id: string;
//   age: number;
// }

4.Pick<Type, Keys>

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

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

type UserWithEmailAndName = Pick<User, 'email' | 'name'>;

// 相当于
// interface Person {
//   name: string;
//   email: string;
// }

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

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

type PartialPick = Partial<Pick<User, 'email' | 'name'>>;

// 相当于
// interface Person {
//   name?: string | undefined;
//   email?: string | undefined;
// }

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

type OmitPartialPick = Omit<Partial<Pick<User, 'email' | 'name'>>, 'email'>;

// 相当于 
// interface Person {
//   name?: string | undefined;
// }

5.Readonly<Type>

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

interface Person {
  id: number;
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

//相当于
// interface Person {
//   readonly id: number;
//   readonly name: string;
//   readonly age: number;
// }

const person: ReadonlyPerson = {
  id: 1,
  name: 'John',
  age: 25
};

person.name = 'Mike'; // Error: Cannot assign to 'name' because it is a read-only property.

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

Object.freeze

function freeze<T>(obj: T): Readonly<T>;

6.Record<Keys, Type>

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

interface CatInfo {
  age: number;
  breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};
 
cats.boris;
 

7.Exclude<UnionType, ExcludedMembers>

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

type T0 = Exclude<"a" | "b" | "c", "a">;
type T0 = "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
type T1 = "c"

type T2 = Exclude<string | number | (() => void), Function>;
type T2 = string | number

8.Extract<Type, Union>

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

type T0 = Extract<"a" | "b" | "c", "a" | "f">;
type T0 = "a"

type T1 = Extract<string | number | (() => void), Function>;
type T1 = () => void

9.NonNullable<Type>

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

type T0 = NonNullable<string | number | undefined>;
type T0 = string | number

type T1 = NonNullable<string[] | null | undefined>;
type T1 = string[]

10.ReturnType<Type>

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

function add(a: number, b: number): number {
  return a + b;
}

type AddReturnType = ReturnType<typeof add>;
// type AddReturnType = number;


function addStr(a: string, b: string): string{
  return a + b;
}

type AddReturnType2 = ReturnType<typeof addStr>;
// type AddReturnType2 = string;

type T0 = ReturnType<() => string>;
type T0 = string

type T1 = ReturnType<(s: string) => void>;
type T1 = void

type T2 = ReturnType<<T>() => T>;    
type T2 = unknown

type T3 = ReturnType<<T extends U, U extends number[]>() => T>;
type T3 = number[]

11.Parameters<Type>

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

function add(a: number, b: string, c:boolean): string {
  return a + b;
}

type AddReturnType = Parameters<typeof add>;
// type AddReturnType = [a: number, b: string, c:boolean];

type T0 = Parameters<() => string>;
type T0 = []

type T1 = Parameters<(s: string) => void>;
type T1 = [s: string]

type T2 = Parameters<<T>(arg: T) => T>;
type T2 = [arg: unknown]

12.Awaited<Type>

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

async function fetchData(): Promise<string> {
  // fetch data from API and return a string
}

type ResolvedResult = Awaited<ReturnType<typeof fetchData>>;
// type ResolvedResult = string

type A = Awaited<Promise<string>>;
type A = string
 
type B = Awaited<Promise<Promise<number>>>; 
type B = number
 
type C = Awaited<boolean | Promise<number>>;  
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