欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript條件類型與內(nèi)置條件類型超詳細(xì)講解

 更新時(shí)間：2023年03月09日 10:50:43   作者：劍九 六千里  
我們可以使用TypeScript中的條件類型來(lái)根據(jù)邏輯定義某些類型，就像是在編寫(xiě)代碼那樣。它采用的語(yǔ)法和我們?cè)贘avaScript中熟悉的三元運(yùn)算符很像：condition ? ifConditionTrue : ifConditionFalse。我們來(lái)看看他是怎么工作的

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、TS中條件類型是什么

TS中的條件類型就是在類型中添加條件分支，以支持更加靈活的泛型，滿足更多的使用場(chǎng)景。內(nèi)置條件類型是TS內(nèi)部封裝好的一些類型處理，使用起來(lái)更加便利。

二、條件類型

1.在類型中添加條件分支

代碼如下（示例）：

namespace a {
  interface Fish {
    name1: string
  }
  interface Water {
    name2: string
  }
  interface Bird {
    name3: string
  }
  interface Sky {
    name4: string
  }
  // 1.在類型中添加條件分支，以支持更加靈活的泛型
  type Condition<T> = T extends Fish ? Water : Sky;
  let con1: Condition<Bird> = { name4: '天空' };
}

2.條件類型的分發(fā)

namespace a {
  interface Fish {
    name1: string
  }
  interface Water {
    name2: string
  }
  interface Bird {
    name3: string
  }
  interface Sky {
    name4: string
  }
  // 2.條件類型的分發(fā)
  // 因?yàn)槭锹?lián)合類型因此會(huì)返回Water和Sky兩種類型
  let con2: Condition<Fish | Bird> = { name2: '' };
  let con3: Condition<Fish | Bird> = { name4: '' };
}

3.分布式的條件分發(fā)

namespace b {
  interface Fish {
    name1: string
  }
  interface Water {
    name2: string
  }
  interface Bird {
    name3: string
  }
  interface Sky {
    name4: string
  }
  // 分布式的條件分發(fā)
  // 找出不包含F(xiàn)ish的部分,下面這三種寫(xiě)法都可以
  type Condition<T> = [T] extends [Fish] ? Water : Sky;
  // type Condition<T> = T[] extends Fish[] ? Water : Sky;
  // type Condition<T> = {t: T} extends {t: Fish} ? Water : Sky;
  // 條件類型的分發(fā)
  // 因?yàn)槭锹?lián)合類型找到不包含F(xiàn)ish的部分，因此返回的還是Sky
  let con2: Condition<Fish | Bird> = { name4: '' };
}

4.更多示例

namespace c {
  // 找出T中不包含U的部分
  type Diff<T, U> = T extends U ? never : T;
  type R1 = Diff<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R1: 'd'
  // 由于U中的'a','b','c'都是T中的子類型，因此R1的類型就是'd'
  // 找出T中包含U的部分
  type Filter<T, U> = T extends U ? T : never;
  type R2 = Filter<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R2: 'a' | 'b' | 'c'
  // 由于U中的'a','b','c'都是T中的子類型，因此R2的類型就是'a' | 'b' | 'c'
}

三、內(nèi)置條件類型

1.Exclude

從T中排除掉U，和上面的Diff相同

type Exclude<T, U> = T extends U ? never : T;
type R3 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R3: 'd'

2.Extract

從T中找出包含U的部分，和上面的filter相同

type Extract<T, U> = T extends U ? T : never;
type R4 = Extract<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R4: 'a' | 'b' | 'c'

3.NonNullable

從T中找出不為null和undefined的參數(shù)

type NonNullable<T> = T extends null | undefined ? never : T;
type R5 = NonNullable<'a' | null | undefined | 'd'>; // R5: 'a' | 'd'

4.ReturnType和Parameters

  • infer：推斷的意思，是一個(gè)關(guān)鍵字
  • ReturnType 獲取函數(shù)的返回類型
  • Parameters 獲取函數(shù)參數(shù)類型，返回一個(gè)元組
namespace d {
  // 1.1
  // ReturnType 獲取函數(shù)的返回類型
  type ReturnType<T> = T extends (...args: any[]) => infer R ? R : T;
  function getUser() {
    return {
      name: '張三',
      age: 10
    }
  }
  // TS可以從參數(shù)中推斷返回值類型
  type ReturnUser = ReturnType<typeof getUser>; // type ReturnUser = {name: string;age: number;}
  // 1.2
  // Parameters 獲取函數(shù)參數(shù)類型，返回一個(gè)元組
  type Parameters<T> = T extends (...args: infer P) => any ? P : never;
  function getPerson(a: string, b: number) {
    return {
      name: '李四',
      age: 18
    }
  }
  type ParamsType = Parameters<typeof getPerson>; // type ParamsType = [a: string, b: number]
}

5.InstanceType和ConstructorParameters

  • InstanceType 獲取構(gòu)造函數(shù)的實(shí)例類型
  • ConstructorParameters 獲取類的構(gòu)造函數(shù)的參數(shù)類型
namespace e {
  class Person {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
    getName() {
      console.log(this.name);
    }
  }
  // ConstructorParameters 獲取類的構(gòu)造函數(shù)的參數(shù)類型
  type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (
    ...args: infer P) => any ? P : never;
  type Params = ConstructorParameters<typeof Person> // type Params = [name: string]
  // InstanceType 獲取構(gòu)造函數(shù)的實(shí)例類型
  type Instance = InstanceType<typeof Person>;
  let instance: Instance = {
    name: '張三',
    getName() {}
  }
}

四、拓展infer的使用

示例如下：

1.tuple轉(zhuǎn)union

元組轉(zhuǎn)為聯(lián)合類型

type ElementOf<T> = T extends Array<infer P> ? P : never;
type Tuple = [string, number];
type TupleToUnion = ElementOf<Tuple>; // type TupleToUnion = string | number

2.聯(lián)合類型轉(zhuǎn)成交叉類型

string | number =》string & number

type T1 = { name: string };
type T2 = { age: number };
type ToIntersection<T> = T extends { a: (x: infer U) => void, b: (x: infer U) => void } ? U : never;
// 由于U需要同時(shí)滿足T1的定義、T2的定義，因此U需要包含T1、T2所有的類型，因此T3就是T1 & T2
type T3 = ToIntersection<{ a: (x: T1) => void, b: (x: T2) => void }>; // type T3 = T1 & T2

到此這篇關(guān)于TypeScript條件類型與內(nèi)置條件類型超詳細(xì)講解的文章就介紹到這了,更多相關(guān)TypeScript條件與內(nèi)置條件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論