[生存指南]Typescript工具类介绍

众所周知，TypeScript 是一个静态类型的 JavaScript 超集，它提供了许多工具类来帮助编写类型安全的代码。也成为现在前端程序员必须掌握的技能，如果你没有学过后端语言，那么主要的难点会集中在“工具类”、泛型的高级应用和装饰器这块。

这里就主要介绍下，面试常会用到的工具类：

1、Pick<T, K>

从对象 T 中选取部分属性 K，返回一个新的类型。

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

type PersonNameAndAddress = Pick<Person, 'name' | 'address'>;

const person: PersonNameAndAddress = { name: '鸡哥', address: '996 road.' };

2、Omit<T, K>

从对象 T 中剔除部分属性 K，返回一个新的类型。

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

type PersonWithoutAge = Omit<Person, 'age'>;

const person: PersonWithoutAge = { name: '鸡哥', address: '996 road.' };

3、Record<K, T>

创建一个类型，其中键为 K，值为 T。

type Person = {
  name: string;
  age: number;
};

type PersonMap = Record<string, Person>;

const people: PersonMap = {
  alice: { name: '鸡哥', age: 30 },
  bob: { name: '坤哥', age: 40 },
};

4、Partial

将对象的所有属性设为可选属性，返回一个新的类型。

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

type PartialPerson = Partial<Person>;

const person: PartialPerson = { name: '鸡哥' };

5、Required

将对象的所有属性设为必选属性，返回一个新的类型。

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

type RequiredPerson = Required<Person>;

const person: RequiredPerson = { name: '鸡哥', age: 100 };

6、Readonly

将对象的所有属性设为只读属性，返回一个新的类型。

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

type ReadonlyPerson = Readonly<Person>;

const person: ReadonlyPerson = { name: '鸡哥', age: 100 };
person.age = 31; //报错 : Cannot assign to 'age' because it is a read-only property.

7、Exclude<T, U>

从类型 T 中排除类型 U，返回一个新的类型。

type Animal = 'dog' | 'cat' | 'bird';
type DomesticAnimal = 'dog' | 'cat';

type WildAnimal = Exclude<Animal, DomesticAnimal>; // 'bird'

function makeSound(animal: WildAnimal) {
  console.log(`The ${animal} makes a loud noise.`);
}

makeSound('bird'); // OK
makeSound('cat'); //报错 : Argument of type 'cat' is not assignable to parameter of type 'WildAnimal'.

8、NonNullable

从类型 T 中排除 null 和 undefined，返回一个新的类型。

type MaybePerson = Person | null | undefined;
type DefinitelyPerson = NonNullable<MaybePerson>;

const person1: MaybePerson = null;
const person2: DefinitelyPerson = null; // 报错 : Type 'null' is not assignable to type 'Person'.

9、ReturnType

获取函数的返回类型，返回一个新的类型。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetReturnType = ReturnType<typeof greet>; // string

const message: GreetReturnType = greet('鸡哥');
console.log(message); // 'Hello, 鸡哥!'

10、Parameters

获取函数类型 T 的参数类型的元组类型。

function greet(name: string, age: number): string {
  return `Hello, ${name}! You are ${age} years old.`;
}

type GreetParamsType = Parameters<typeof greet>; // [string, number]

const params: GreetParamsType = ['鸡哥', 30];
const message = greet(...params);
console.log(message); // 'Hello, 鸡哥! 30岁啦.'