好看的课外书,玄幻小说完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

一篇學(xué)會(huì)TypeScript實(shí)用工具類型

1. Partial

Partial 作用是將傳入的屬性變?yōu)榭蛇x項(xiàng)。適用于對(duì)類型結(jié)構(gòu)不明確的情況。它使用了兩個(gè)關(guān)鍵字：keyof和in，先來(lái)看看它們都是什么含義。keyof 可以用來(lái)取得接口的所有 key 值：

為夷陵等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及夷陵網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、夷陵網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

type T = keyof Person 
// T 類型為： "name" | "age" | "number"

in關(guān)鍵字可以遍歷枚舉類型,：

type Person = "name" | "age" | "number"

type Obj =  {
  [p in Person]: any
} 
// Obj 的類型為： { name: any, age: any, number: any }

keyof 可以產(chǎn)生聯(lián)合類型, in 可以遍歷枚舉類型。所以可以一起使用, 下面是Partial的定義：

/**
 * Make all properties in T optional
 * 將T中的所有屬性設(shè)置為可選
 */
type Partial = {
    [P in keyof T]?: T[P];
};

這里，keyof T 用來(lái)獲取 T 所有屬性名, 然后使用 in 進(jìn)行遍歷, 將值賦給 P, 最后 T[P] 取得相應(yīng)屬性的值。中間的?就用來(lái)將屬性設(shè)置為可選。

來(lái)看下面的例子：

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

type PartialPerson = Partial;
// PartialPerson 的類型為 {name?: string; age?: number; height?: number;}

const person: PartialPerson = {
  name: "zhangsan";
}

這里就使用Partial將Person類型中的屬性都指定為可選屬性。

2. Required

Required 的作用是將傳入的屬性變?yōu)楸剡x項(xiàng)，和上面的Partial恰好相反，其聲明如下：

/**
 * Make all properties in T required
 * 將T中的所有屬性設(shè)置為必選
 */
type Required = {
    [P in keyof T]-?: T[P];
};

可以看到，這里使用-?將屬性設(shè)置為必選，可以理解為減去問(wèn)號(hào)。使用形式和上面的Partial差不多：

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

type RequiredPerson = Required;
// RequiredPerson 的類型為 {name: string; age: number; height: number;}

const person: RequiredPerson = {
  name: "zhangsan";
  age: 18;
  height: 180;
}

這里就使用Required將Person類型中的屬性都指定為必選屬性。

3. Readonly

將T類型的所有屬性設(shè)置為只讀(readonly)，構(gòu)造出來(lái)類型的屬性不能被再次賦值。Readonly的聲明形式如下：

/**
 * Make all properties in T readonly
 */
type Readonly = {
    readonly [P in keyof T]: T[P];
};

來(lái)看下面的例子：

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

type ReadonlyPerson = Readonly;

const person: ReadonlyPerson = {
  name: "zhangsan",
  age: 18
}

person.age = 20;  //  Error: cannot reassign a readonly property

可以看到，通過(guò) Readonly 將Person的屬性轉(zhuǎn)化成了只讀，不能再進(jìn)行賦值操作。Readonly 類型對(duì)于凍結(jié)對(duì)象非常有用。

4. Pick

從 Type類型中挑選部分屬性 Keys 來(lái)構(gòu)造新的類型。它的聲明形式如下：

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick = {
    [P in K]: T[P];
};

來(lái)看下面的例子：

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

const person: Pick = {
  name: "zhangsan",
  age: 18
}

這樣就使用Pick從Person類型中挑出來(lái)了name和age屬性的類型，新的類型中只包含這兩個(gè)屬性。

5. Record

Record 用來(lái)構(gòu)造一個(gè)類型，其屬性名的類型為Keys中的類型，屬性值的類型為Type。這個(gè)工具類型可用來(lái)將某個(gè)類型的屬性映射到另一個(gè)類型上，下面是其聲明形式：

/**
 * Construct a type with a set of properties K of type T
 */
type Record = {
    [P in K]: T;
};

來(lái)看下面的例子：

type Pageinfo = {
    title: string;
}

type Page = 'home' | 'about' | 'contact';

const page: Record = {
    about: {title: 'about'},
    contact: {title: 'contact'},
    home: {title: 'home'},
}

6. Exclude

Exclude 用于從類型Type中去除不在ExcludedUnion類型中的成員，下面是其聲明的形式：

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude = T extends U ? never : T;

來(lái)看下面的例子：

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

const person: Exclude = {
  name: "zhangsan";
  height: 180;
}

這里就使用Exclude將Person類型中的age屬性給剔除了，只會(huì)剔除兩個(gè)參數(shù)中都包含的屬性。

7. Extract

Extract 用于從類型Type中取出可分配給Union類型的成員。作用與Exclude相反。下面是它的聲明形式：

/**
 * Extract from T those types that are assignable to U
 */
type Extract = T extends U ? T : never;

來(lái)看下面的例子：

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

該工具類型對(duì)于找出兩種類型的公共部分很有用：

interface Human {
  id: string;
  name: string;
  surname: string;
}

interface Cat {
  id: string;
  name: string;
  sound: string;
}

// "id" | "name"
type CommonKeys = Extract;

8. Omit

上面的 Pick 和 Exclude 都是最基礎(chǔ)的工具類型，很多時(shí)候用 Pick 或者 Exclude 可能不如直接寫類型更直接。而 Omit 就基于這兩個(gè)來(lái)做的一個(gè)更抽象的封裝，它允許從一個(gè)對(duì)象中剔除若干個(gè)屬性，剩下的就是需要的新類型。下面是它的聲明形式：

/**
 * Construct a type with the properties of T except for those in type K.
 */
type Omit = Pick>;

來(lái)看下面的例子：

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

const person: Omit = {
  name: "zhangsan";
}

這樣就使用Omit從Person類型中剔除了 age 和 height 屬性，只剩下 name 屬性。

9. ReturnType

ReturnType會(huì)返回函數(shù)返回值的類型，其聲明形式如下：

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

來(lái)看下面的例子：

function foo(type): boolean {
  return type === 0
}

type FooType = ReturnType

這里使用 typeof 是為了獲取 foo 的函數(shù)簽名，等價(jià)于 (type: any) => boolean。

10. InstanceType

InstanceType 會(huì)返回 Type 構(gòu)造函數(shù)類型的實(shí)例類型。其聲明形式如下：

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

來(lái)看下面的例子：

class Person {
  name: string;
  age: number;

  constructor(person: { name: string; age: number }) {
    this.name = person.name;
    this.age = person.age;
  }
}

type PersonInstanceType = InstanceType;
// PersonInstanceType 的類型：{ name: string; age: number }

當(dāng)然，你可能不會(huì)這么寫，因?yàn)榭梢灾苯邮褂肬serManager類型：

class Person {
  name: string;
  age: number;

  constructor(person: { name: string; age: number }) {
    this.name = person.name;
    this.age = person.age;
  }
}

const person: Person = {
  name: "zhangsan",
  age: 18,
};

這就等價(jià)于：

class Person {
  name: string;
  age: number;

  constructor(person: { name: string; age: number }) {
    this.name = person.name;
    this.age = person.age;
  }
}

type PersonInstanceType = InstanceType;
                                       
const person: PersonInstanceType = {
  name: "zhangsan",
  age: 18,
};

當(dāng)我們?cè)?TypeScript 中創(chuàng)建動(dòng)態(tài)類時(shí)，InstanceType可以用于檢索動(dòng)態(tài)實(shí)例的類型。

11. Parameters

Parameters 可以從函數(shù)類型Type的參數(shù)中使用的類型構(gòu)造一個(gè)元組類型。其聲明形式如下：

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

來(lái)看下面的例子：

const add = (x: number, y: number) => {
  return x + y;
};

type FunctionParameters = Parameters;
// FunctionParameters 的類型：[x: number, y: number]

除此之外，還可以檢測(cè)單個(gè)參數(shù)：

// "number"
type FirstParam = Parameters[0];

// "number"
type SecondParam = Parameters[1];

// "undefined"
type ThirdParam = Parameters[2];

Parameters 對(duì)于獲取函數(shù)參數(shù)的類型以確保類型安全很有用，尤其是在使用第三方庫(kù)時(shí)：

const saveUser = (user: { name: string; height: number; age: number }) => {
  // ...
};

const user: Parameters[0] = {
  name: "zhangsan",
  height: 180,
  age: 18,
};

12. ConstructorParameters

ConstructorParameters 可以從構(gòu)造函數(shù)的類型來(lái)構(gòu)造元組或數(shù)組類型。其聲明形式如下：

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

它類似于參數(shù)，但適用于類構(gòu)造函數(shù)：

class Person {
  private name: string;
  private age: number;

  constructor(person: { name: string; age: number }) {
    this.name = person.name;
    this.age = person.age;
  }
}

type ConstructorParametersType = ConstructorParameters;
// ConstructorParametersType 的類型：[person: { name: string, age: number}]

與 Parameters 類型一樣，當(dāng)使用外部庫(kù)時(shí)，它有助于確保構(gòu)造函數(shù)接受我們傳入的參數(shù)：

class Person {
  private name: string;
  private age: number;

  constructor(person: { name: string; age: number }) {
    this.name = person.name;
    this.age = person.age;
  }
}

const params: ConstructorParameters[0] = {
  name: "zhangsan",
  age: 18,
};

13. NonNullable

NonNullable 通過(guò)從Type中排除null和undefined來(lái)創(chuàng)建新類型。它就等價(jià)于Exclude。其聲明形式如下：

/**
 * Exclude null and undefined from T
 */
type NonNullable = T extends null | undefined ? never : T;

來(lái)看下面的例子：

type Type = string | null | undefined; 

// string
type NonNullableType = NonNullable;

這里就使用NonNullable將Type中的null和undefined剔除掉了。

當(dāng)前文章：一篇學(xué)會(huì)TypeScript實(shí)用工具類型
文章源于：http://m.fisionsoft.com.cn/article/cohghgp.html

新聞中心

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

其他資訊