返回

掘金TypeScript中那些你不知道的工具类，原来源码逻辑如此简单！

前端

一、Partail：让字段可有可无
Partail顾名思义，就是允许某些字段可有可无。TypeScript中，我们经常会遇到这种情况：一个对象可能包含某些可选字段，也可能不包含这些字段。这时，我们可以使用Partail类型来这种可有可无的关系。

interface Person {
  name: string;
  age?: number; // 使用Partail标记age字段可有可无
}

二、Requied：强制要求字段存在
Requied与Partail相反，它强制要求某个字段必须存在。我们经常在函数参数类型时使用Requied。

function greet(name: Requied<string>) {
  console.log(`Hello, ${name}!`);
}

三、Readonly：确保字段只读
Readonly类型可以将一个对象的所有字段标记为只读，确保这些字段在对象创建后无法被修改。

const person: Readonly<Person> = {
  name: 'Jane Doe',
  age: 30,
};
// person.name = 'John Doe'; // 错误：Readonly对象不可修改

四、Exclude：排除指定类型
Exclude类型可以从一个类型中排除另一个类型。例如，我们可以使用Exclude将string类型从number | string类型中排除，得到number类型。

type MyType = Exclude<number | string, string>; // MyType = number

五、Extract：提取指定类型
Extract类型可以从一个类型中提取另一个类型。例如，我们可以使用Extract将number类型从number | string类型中提取出来。

type MyType = Extract<number | string, number>; // MyType = number

六、Pick：选择指定属性
Pick类型可以从一个类型中选择指定的属性，创建一个只包含这些属性的新类型。

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

type PersonNameAndAge = Pick<Person, 'name', 'age'>; // PersonNameAndAge = { name: string; age: number; }

七、Omit：排除指定属性
Omit类型与Pick相反，它可以从一个类型中排除指定的属性，创建一个不包含这些属性的新类型。

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

type PersonWithoutGender = Omit<Person, 'gender'>; // PersonWithoutGender = { name: string; age: number; }

八、Record：创建键值对对象
Record类型可以创建一个键值对对象，键的类型由第一个类型参数指定，值的类型由第二个类型参数指定。

type PersonRecord = Record<string, Person>; // PersonRecord = { [key: string]: Person; }

九、NonNullable：过滤空值
NonNullable类型可以从一个类型中过滤掉空值，留下非空值。

type NonNullableNumber = NonNullable<number | null>; // NonNullableNumber = number

十、ReturnType：获取函数返回值类型
ReturnType类型可以获取一个函数的返回值类型。

function greet(): string {
  return 'Hello, world!';
}

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

结语：
本篇文章对TypeScript中10个常用的工具类进行了深入解读，从Partail到ReturnType，通过源码逻辑解读，揭秘了这些工具类的强大功能和使用场景。希望这些内容对大家有所帮助，也希望大家能积极探索TypeScript中的更多奥秘，写出更优雅、更健壮的代码！