评论

[生存指南]面试题(5):TS工具类,typescript求职救赎之路

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<T>

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

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

type PartialPerson = Partial<Person>;

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

5、Required<T>

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

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

type RequiredPerson = Required<Person>;

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

6、Readonly<T>

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

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>

从类型 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<T>

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

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>

获取函数类型 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岁啦.'
最后一次编辑于  2023-07-27  
点赞 1
收藏
评论
登录 后发表内容