进阶篇-工具类型-《前端知识进阶》

admin 2025-11-01 15:36:35 编程 来源:ZONE.CI 全球网 0 阅读模式
  • 1. Partial
  • 2. Required
  • 3. Readonly
  • 4. Pick
  • 5. Record
  • 6. Exclude
  • 7. Extract
  • 8. Omit
  • 9. ReturnType
  • 10. InstanceType
  • 11. Parameters
  • 12. ConstructorParameters
  • 13. NonNullable

    工具类型是Typescript 附带的特殊类型,可用于提高代码的可读性和灵活性。简单地说,根据提供的类型,工具类型将会按照规则构造一个新类型。下面就来看看TypeScript中有哪些实用的工具类型!

    1. Partial

    Partial 作用是将传入的属性变为可选项。适用于对类型结构不明确的情况。它使用了两个关键字:keyofin,先来看看它们都是什么含义。keyof 可以用来取得接口的所有 key 值:

    1. type Person = {
    2. name: string;
    3. age: number;
    4. height: number;
    5. }
    6. type T = keyof Person
    7. // T 类型为: "name" | "age" | "number"

    in关键字可以遍历枚举类型,:

    1. type Person = "name" | "age" | "number"
    2. type Obj = {
    3. [p in Person]: any
    4. }
    5. // Obj 的类型为: { name: any, age: any, number: any }

    keyof 可以产生联合类型, in 可以遍历枚举类型。所以可以一起使用, 下面是Partial的定义:

    1. /**
    2. * Make all properties in T optional
    3. * 将T中的所有属性设置为可选
    4. */
    5. type Partial<T> = {
    6. [P in keyof T]?: T[P];
    7. };

    这里,keyof T 用来获取 T 所有属性名, 然后使用 in 进行遍历, 将值赋给 P, 最后 T[P] 取得相应属性的值。中间的?就用来将属性设置为可选。

    来看下面的例子:

    1. type Person = {
    2. name: string;
    3. age: number;
    4. height: number;
    5. }
    6. type PartialPerson = Partial<Person>;
    7. // PartialPerson 的类型为 {name?: string; age?: number; height?: number;}
    8. const person: PartialPerson = {
    9. name: "zhangsan";
    10. }

    这里就使用PartialPerson类型中的属性都指定为可选属性。

    2. Required

    Required 的作用是将传入的属性变为必选项,和上面的Partial恰好相反,其声明如下:

    1. /**
    2. * Make all properties in T required
    3. * 将T中的所有属性设置为必选
    4. */
    5. type Required<T> = {
    6. [P in keyof T]-?: T[P];
    7. };

    可以看到,这里使用-?将属性设置为必选,可以理解为减去问号。使用形式和上面的Partial差不多:

    1. type Person = {
    2. name?: string;
    3. age?: number;
    4. height?: number;
    5. }
    6. type RequiredPerson = Required<Person>;
    7. // RequiredPerson 的类型为 {name: string; age: number; height: number;}
    8. const person: RequiredPerson = {
    9. name: "zhangsan";
    10. age: 18;
    11. height: 180;
    12. }

    这里就使用RequiredPerson类型中的属性都指定为必选属性。

    3. Readonly

    将T类型的所有属性设置为只读(readonly),构造出来类型的属性不能被再次赋值。Readonly的声明形式如下:

    1. /**
    2. * Make all properties in T readonly
    3. */
    4. type Readonly<T> = {
    5. readonly [P in keyof T]: T[P];
    6. };

    来看下面的例子:

    1. type Person = {
    2. name: string;
    3. age: number;
    4. }
    5. type ReadonlyPerson = Readonly<Person>;
    6. const person: ReadonlyPerson = {
    7. name: "zhangsan",
    8. age: 18
    9. }
    10. person.age = 20; // Error: cannot reassign a readonly property

    可以看到,通过 ReadonlyPerson的属性转化成了只读,不能再进行赋值操作。Readonly 类型对于冻结对象非常有用。

    4. Pick

    Type 类型中挑选部分属性 Keys 来构造新的类型。它的声明形式如下:

    1. /**
    2. * From T, pick a set of properties whose keys are in the union K
    3. */
    4. type Pick<T, K extends keyof T> = {
    5. [P in K]: T[P];
    6. };

    来看下面的例子:

    1. type Person = {
    2. name: string;
    3. age: number;
    4. height: number;
    5. }
    6. const person: Pick<Person, "name" | "age"> = {
    7. name: "zhangsan",
    8. age: 18
    9. }

    这样就使用PickPerson类型中挑出来了nameage属性的类型,新的类型中只包含这两个属性。

    5. Record

    Record 用来构造一个类型,其属性名的类型为Keys中的类型,属性值的类型为Type。这个工具类型可用来将某个类型的属性映射到另一个类型上,下面是其声明形式:

    1. /**
    2. * Construct a type with a set of properties K of type T
    3. */
    4. type Record<K extends keyof any, T> = {
    5. [P in K]: T;
    6. };

    来看下面的例子:

    1. type Pageinfo = {
    2. title: string;
    3. }
    4. type Page = 'home' | 'about' | 'contact';
    5. const page: Record<Page, Pageinfo> = {
    6. about: {title: 'about'},
    7. contact: {title: 'contact'},
    8. home: {title: 'home'},
    9. }

    6. Exclude

    Exclude 用于从类型Type中去除不在ExcludedUnion类型中的成员,下面是其声明的形式:

    1. /**
    2. * Exclude from T those types that are assignable to U
    3. */
    4. type Exclude<T, U> = T extends U ? never : T;

    来看下面的例子:

    1. type Person = {
    2. name: string;
    3. age: number;
    4. height: number;
    5. }
    6. const person: Exclude<Person, "age" | "sex"> = {
    7. name: "zhangsan";
    8. height: 180;
    9. }

    这里就使用ExcludePerson类型中的age属性给剔除了,只会剔除两个参数中都包含的属性。

    7. Extract

    Extract 用于从类型Type中取出可分配给Union类型的成员。作用与Exclude相反。下面是它的声明形式:

    1. /**
    2. * Extract from T those types that are assignable to U
    3. */
    4. type Extract<T, U> = T extends U ? T : never;

    来看下面的例子:

    1. type ExtractedType = Extract<"x" | "y" | "z", "x" | "y">;
    2. // "x" | "y"

    该工具类型对于找出两种类型的公共部分很有用:

    1. interface Human {
    2. id: string;
    3. name: string;
    4. surname: string;
    5. }
    6. interface Cat {
    7. id: string;
    8. name: string;
    9. sound: string;
    10. }
    11. // "id" | "name"
    12. type CommonKeys = Extract<keyof Human, keyof Cat>;

    8. Omit

    上面的 PickExclude 都是最基础的工具类型,很多时候用 Pick 或者 Exclude 可能不如直接写类型更直接。而 Omit 就基于这两个来做的一个更抽象的封装,它允许从一个对象中剔除若干个属性,剩下的就是需要的新类型。下面是它的声明形式:

    1. /**
    2. * Construct a type with the properties of T except for those in type K.
    3. */
    4. type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

    来看下面的例子:

    1. type Person = {
    2. name: string;
    3. age: number;
    4. height: number;
    5. }
    6. const person: Omit<Person, "age" | "height"> = {
    7. name: "zhangsan";
    8. }

    这样就使用OmitPerson类型中剔除了 ageheight 属性,只剩下 name 属性。

    9. ReturnType

    ReturnType会返回函数返回值的类型,其声明形式如下:

    1. /**
    2. * Obtain the return type of a function type
    3. */
    4. type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

    来看下面的例子:

    1. function foo(type): boolean {
    2. return type === 0
    3. }
    4. type FooType = ReturnType<typeof foo>

    这里使用 typeof 是为了获取 foo 的函数签名,等价于 (type: any) => boolean

    10. InstanceType

    InstanceType 会返回 Type 构造函数类型的实例类型。其声明形式如下:

    1. /**
    2. * Obtain the return type of a constructor function type
    3. */
    4. type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;

    来看下面的例子:

    1. class Person {
    2. name: string;
    3. age: number;
    4. constructor(person: { name: string; age: number }) {
    5. this.name = person.name;
    6. this.age = person.age;
    7. }
    8. }
    9. type PersonInstanceType = InstanceType<typeof Person>;
    10. // PersonInstanceType 的类型:{ name: string; age: number }

    当然,你可能不会这么写,因为可以直接使用UserManager类型:

    1. class Person {
    2. name: string;
    3. age: number;
    4. constructor(person: { name: string; age: number }) {
    5. this.name = person.name;
    6. this.age = person.age;
    7. }
    8. }
    9. const person: Person = {
    10. name: "zhangsan",
    11. age: 18,
    12. };

    这就等价于:

    1. class Person {
    2. name: string;
    3. age: number;
    4. constructor(person: { name: string; age: number }) {
    5. this.name = person.name;
    6. this.age = person.age;
    7. }
    8. }
    9. type PersonInstanceType = InstanceType<typeof Person>;
    10. const person: PersonInstanceType = {
    11. name: "zhangsan",
    12. age: 18,
    13. };

    当我们在 TypeScript 中创建动态类时,InstanceType可以用于检索动态实例的类型。

    11. Parameters

    Parameters 可以从函数类型Type的参数中使用的类型构造一个元组类型。其声明形式如下:

    1. /**
    2. * Obtain the parameters of a function type in a tuple
    3. */
    4. type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

    来看下面的例子:

    1. const add = (x: number, y: number) => {
    2. return x + y;
    3. };
    4. type FunctionParameters = Parameters<typeof add>;
    5. // FunctionParameters 的类型:[x: number, y: number]

    除此之外,还可以检测单个参数:

    1. // "number"
    2. type FirstParam = Parameters<typeof add>[0];
    3. // "number"
    4. type SecondParam = Parameters<typeof add>[1];
    5. // "undefined"
    6. type ThirdParam = Parameters<typeof add>[2];

    Parameters 对于获取函数参数的类型以确保类型安全很有用,尤其是在使用第三方库时:

    1. const saveUser = (user: { name: string; height: number; age: number }) => {
    2. // ...
    3. };
    4. const user: Parameters<typeof saveUser>[0] = {
    5. name: "zhangsan",
    6. height: 180,
    7. age: 18,
    8. };

    12. ConstructorParameters

    ConstructorParameters 可以从构造函数的类型来构造元组或数组类型。其声明形式如下:

    1. /**
    2. * Obtain the parameters of a constructor function type in a tuple
    3. */
    4. type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;

    它类似于参数,但适用于类构造函数:

    1. class Person {
    2. private name: string;
    3. private age: number;
    4. constructor(person: { name: string; age: number }) {
    5. this.name = person.name;
    6. this.age = person.age;
    7. }
    8. }
    9. type ConstructorParametersType = ConstructorParameters<typeof Person>;
    10. // ConstructorParametersType 的类型:[person: { name: string, age: number}]

    Parameters 类型一样,当使用外部库时,它有助于确保构造函数接受我们传入的参数:

    1. class Person {
    2. private name: string;
    3. private age: number;
    4. constructor(person: { name: string; age: number }) {
    5. this.name = person.name;
    6. this.age = person.age;
    7. }
    8. }
    9. const params: ConstructorParameters<typeof Person>[0] = {
    10. name: "zhangsan",
    11. age: 18,
    12. };

    13. NonNullable

    NonNullable 通过从Type中排除nullundefined来创建新类型。它就等价于Exclude<T, null | undefined>。其声明形式如下:

    1. /**
    2. * Exclude null and undefined from T
    3. */
    4. type NonNullable<T> = T extends null | undefined ? never : T;

    来看下面的例子:

    1. type Type = string | null | undefined;
    2. // string
    3. type NonNullableType = NonNullable<Type>;

    这里就使用NonNullableType中的nullundefined剔除掉了。

    以太坊cppgolang区别 编程

    以太坊cppgolang区别

    以太坊是一种去中心化的开源平台,它采用智能合约技术,旨在构建和运行不受干扰的分布式应用程序。作为目前最受欢迎的区块链平台之一,以太坊提供了多种编程语言的支持,其
    progolang 编程

    progolang

    Go语言(Golang)是由Google开发的一门静态类型编程语言。作为一名专业的Golang开发者,我深知这门语言的优势和特点。在本文中,我将介绍Golang
    golangn个发送者 编程

    golangn个发送者

    Golang是一种开源的编程语言,由Google团队开发,旨在提高程序的并发性和简化软件开发过程。在Go语言中,有时需要向多个接收者发送信息。本文将介绍如何在G
    golang技能图谱 编程

    golang技能图谱

    从互联网行业的快速发展到人工智能技术的日益成熟,各种编程语言也应运而生。而在这众多的编程语言中,Golang(即Go)作为一门强大且高效的开发语言备受关注。Go
    评论:0   参与:  5