众所周知,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岁啦.'