一文讀懂 TypeScript 泛型及應用

大家好,我是 CUGGZ。

泛型是靜態類型語言的基本特徵,允許將類型作爲參數傳遞給另一個類型、函數、或者其他結構。TypeScript 支持泛型作爲將類型安全引入組件的一種方式。這些組件接受參數和返回值,其類型將是不確定的,直到它在代碼中被使用。下面將通過一些示例,探索如何在函數、類型、類和接口中使用泛型,以及使用泛型創建映射類型和條件類型。

  1. 泛型語法

首先來看看 TypeScript 泛型的語法。泛型的語法爲 <T>,其中 T 表示傳入的類型。在這種情況下,T 和函數參數的工作方式相同,其作爲將在創建結構實例時聲明的類型的佔位符。因此,尖括號內指定的泛型類型也稱爲泛型類型參數。泛型的定義可以有多個泛型類型採參數,例如:<T, K, Z>

注意:通常使用單個字母來命名泛型類型。這不是語法規則,我們也可以像 TypeScript 中的任何其他類型一樣命名泛型,但這種約定有助於向閱讀代碼的人傳達泛型類型不需要特定類型。

下面通過一個函數的例子來看看泛型的基本語法。假設有一個 JavaScript 函數,它接受兩個參數:一個對象和一個包含key的數組。該函數將基於原始對象返回一個新對象,其僅包含想要的key

function pickObjectKeys(obj, keys) {
  let result = {}
  for (const key of keys) {
    if (key in obj) {
      result[key] = obj[key]
    }
  }
  return result
}

pickObjectKeys() 函數中,遍歷了keys數組並使用數組中指定的key創建一個新對象。下面來測試一下這個函數:

const language = {
  name: "TypeScript",
  age: 8,
  extensions: ['ts''tsx']
}

const ageAndExtensions = pickObjectKeys(language, ['age''extensions'])

這裏聲明瞭一個language對象,然後使用 pickObjectKeys() 函數將 language 對象中的 ageextensions 屬性組成了一個新的對象 ageAndExtensions,其值如下:

{
  age: 8,
  extensions: ['ts''tsx']
}

如果想將這個函數遷移到 TypeScript 以使其類型安全,則可以使用泛型。重構的代碼如下:

function pickObjectKeys<T, K extends keyof T>(obj: T, keys: K[]) {
  let result = {} as Pick<T, K>
  for (const key of keys) {
    if (key in obj) {
      result[key] = obj[key]
    }
  }
  return result
}

const language = {
  name: "TypeScript",
  age: 8,
  extensions: ['ts''tsx']
}

const ageAndExtensions = pickObjectKeys(language, ['age''extensions'])

<T, K extends keyof T> 爲函數聲明瞭兩個參數類型,其中 K 被分配給了一個類型,該類型是 T 中的 key 的集合。然後將 obj 參數設置爲 T,表示任何類型,並將 keys 設置爲數組,無論 K 是什麼類型。

當傳入的 obj 參數爲language 對象時,Tage 設置爲number類型,將 extensions 設置爲string[]類型,所以變量 ageAndExtensions  的類型爲:

{
  age: number;
  extensions: string[];
}

這樣就會根據提供給 pickObjectKeys 的參數來判斷返回值的類型,從而允許函數在知道需要強制執行的特定類型之前靈活地強制執行類型結構。當在 Visual Studio Code 等 IDE 中使用該函數時,這使得開發體驗更好,它將根據提供的對象爲 keys 參數提供建議:

  1. 在函數中使用泛型

將泛型與函數一起使用的最常見場景之一就是,當有一些不容易爲所有的用例定義類型時,爲了使該函數適用於更多情況,就可以使用泛型來定義。下面來看看在函數中使用泛型的常見場景。

(1)分配泛型參數

先來看下面的函數,它返回函數參數傳入的內容:

function identity(value) {
  return value;
}

可以爲其添加泛型類型以使函數的類型更安全:

function identity<T>(value: T): T {
  return value;
}

這裏將函數轉化爲接受泛型類型參數 T 的泛型函數,它第一個參數的類型,然後將返回類型也設置爲 T 。下面來測試一下這個函數:

function identity<T>(value: T): T {
  return value;
}

const result = identity(123);

result 的類型爲 123,這是我們傳入的數字:

此時,TypeScript 使用調用代碼本身來推斷泛型類型。這樣調用代碼不需要傳遞任何類型參數。當然,我們也可以顯式地將泛型類型參數設置爲想要的類型:

function identity<T>(value: T): T {
  return value;
}

const result = identity<number>(123);

在這段代碼中,result的類型就是 number

這裏使用 <number> 定義了傳入類型,讓 TypeScript 標識函數的泛型類型參數 Tnumber 類型。這將強制number類型作爲參數和返回值的類型。當再傳入其他類型時,就會報錯:

(2)直接傳遞類型參數

在使用自定義類型時,直接傳遞類型參數也很有用。來看下面的代碼:

type ProgrammingLanguage = {
  name: string;
};

function identity<T>(value: T): T {
  return value;
}

const result = identity<ProgrammingLanguage>({ name: "TypeScript" });

在這段代碼中,result 爲自定義類型 ProgrammingLanguage,它直接傳遞給了 identity 函數。如果沒有顯式地定義類型參數,則result的類型就是 { name: string }

另一個常見的例子就是使用函數從 API 獲取數據:

async function fetchApi(path: string) {
  const response = await fetch(`https://example.com/api${path}`)
  return response.json();
}

這個異步函數將 URL 路徑path作爲參數,使用 fetch API 向 URL 發出請求,然後返回 JSON 響應值。在這種情況下,fetchApi 函數的返回類型是 Promise<any>,這是 fetch 的響應對象的 json() 調用的返回類型。

any 作爲返回類型並不會有任何作用,它表示任意類型,使用它將失去靜態類型檢查。如果我們知道 API 將返回指定結構的對象,則可以使用泛型以使此函數類型更安全:

async function fetchApi<ResultType>(path: string): Promise<ResultType> {
  const response = await fetch(`https://example.com/api${path}`);
  return response.json();
}

這裏就將函數轉換爲接受 ResultType 泛型類型參數的泛型函數。此泛型類型用於函數的返回類型:Promise<ResultType>

注意:由於這個函數是異步的,因此會返回一個 Promise 對象。TypeScript 中的 Promise 類型本身是一個泛型類型,它接受 Promise 解析爲的值的類型。

可以看到,泛型並沒有在參數列表中使用,也沒有在 TypeScript 能夠推斷其值的其他地方使用。這意味着在調用函數時,必須顯式地傳遞此泛型的類型:

type User = {
  name: string;
}

async function fetchApi<ResultType>(path: string): Promise<ResultType> {
  const response = await fetch(`https://example.com/api${path}`);
  return response.json();
}

const data = await fetchApi<User[]>('/users')

在這段代碼中,創建了一個名爲 User 的新類型,並使用該類型的數組 (User[]) 作爲 ResultType 泛型參數的類型。data 變量現在的類型是 User[] 而不是 any

注意:當使用 await 異步處理函數的結果時,返回類型將是 Promise<T> 中的 T 類型,在這個示例中就是泛型類型 ResultType

(3)默認類型參數

在上面 fetchApi 函數的例子中,調用代碼時必須提供類型參數。如果調用代碼不包含泛型類型參數,則 ResultType 將推斷爲 unknow。來看下面的例子:

async function fetchApi<ResultType>(path: string): Promise<ResultType> {
  const response = await fetch(`https://example.com/api${path}`);
  return 
response.json();
}

const data = await fetchApi('/users')

console.log(data.a)

這段代碼嘗試訪問dataa屬性,但是由於dataunknow類型,將無法訪問對象的屬性。

如果不打算爲泛型函數的每次調用添加特定的類型,則可以爲泛型類型參數添加默認類型。通過在泛型類型參數後面添加 = DefaultType 來完成:

async function fetchApi<ResultType = Record<string, any>>(path: string): Promise<ResultType> {
  const response = await fetch(`https://example.com/api${path}`);
  return response.json();
}

const data = await fetchApi('/users')

console.log(data.a)

這裏不需要在調用 fetchApi 函數時將類型傳遞給 ResultType 泛型參數,因爲它具有默認類型 Record<string, any>。這意味着 TypeScript 會將data識別爲具有string類型的鍵和any類型值的對象,從而允許訪問其屬性。

(4)類型參數約束

在某些情況下,泛型類型參數只允許將某些類型傳遞到泛型中,這時就可以對參數添加約束。

假如有一個存儲限制,只能存儲所有屬性值都爲字符串類型的對象。因此,可以創建一個函數,該函數接受任何對象並返回另一個對象,其 key 值與原始對象相同,但所有值都轉換爲字符串。代碼如下:

function stringifyObjectKeyValues<T extends Record<string, any>>(obj: T) {
  return Object.keys(obj).reduce((acc, key) =>  ({
    ...acc,
    [key]: JSON.stringify(obj[key])
  }){} as { [K in keyof T]: string })
}

在這段代碼中,stringifyObjectKeyValues 函數使用 reduce 數組方法遍歷包含原始對象的key的數組,將屬性值字符串化並將它們添加到新數組中。

爲確保調用代碼始終傳入一個對象作爲參數,可以在泛型類型 T 上使用類型約束:

function stringifyObjectKeyValues<T extends Record<string, any>>(obj: T) {
  // ...
}

extends Record<string, any> 被稱爲泛型類型約束,它允許指定泛型類型必須可分配給 extends 關鍵字之後的類型。在這種情況下,Record<string, any> 表示具有string類型的鍵和any類型的值的對象。我們可以使類型參數擴展任何有效的 TypeScript 類型。

在調用reduce時,reducer函數的返回類型是基於累加器的初始值。{} as { [K in keyof T]: string } 通過對空對象 {} 使用類型斷言將累加器的初始值的類型設置爲{ [K in keyof T]: string }type { [K in keyof T]: string } 創建了一個新類型,其鍵與 T 相同,但所有值都設置爲字符串類型,這稱爲映射類型

下面來測試一下這個函數:

function stringifyObjectKeyValues<T extends Record<string, any>>(obj: T) {
  return Object.keys(obj).reduce((acc, key) =>  ({
    ...acc,
    [key]: JSON.stringify(obj[key])
  }){} as { [K in keyof T]: string })
}

const stringifiedValues = stringifyObjectKeyValues({ a: "1", b: 2, c: true, d: [1, 2, 3]})

變量 stringifiedValues 的類型如下:

{
  a: string;
  b: string;
  c: string;
  d: string;
}
  1. 在接口、類和類型中使用泛型

在 TypeScript 中創建接口和類時,使用泛型類型參數來設置結果對象的類型會很有用。例如,一個類可能具有不同類型的屬性,具體取決於傳入構造函數的內容。下面就來看看在類和接口中聲明泛型類型參數的語法。

(1)接口和類中的泛型

要創建泛型接口,可以在接口名稱後添加類型參數列表:

interface MyInterface<T> {
  field: T
}

這裏聲明瞭一個具有field字段的接口,field字段的類型由傳入 T 的類型確定。

對於類,它的語法和接口定義幾乎是相同的:

class MyClass<T> {
  field: T
  constructor(field: T) {
    this.field = field
  }
}

通用接口 / 類的一個常見例子就是當有一個類型取決於如何使用接口 / 類的字段。假設有一個 HttpApplication 類,用於處理對 API 的 HTTP 請求,並且某些 context 值將被傳遞給每個請求處理程序。代碼如下:

class HttpApplication<Context> {
  context: Context
 constructor(context: Context) {
    this.context = context;
  }

  // ... 

  get(url: string, handler: (context: Context) => Promise<void>): this {
    // ... 
    return this;
  }
}

這個類儲存了一個 context,它的類型作爲 get 方法中handler函數的參數類型傳入。在使用時,傳遞給 get 方法的handler的參數類型將從傳遞給類構造函數的內容中推斷出來:

const context = { someValue: true };
const app = new HttpApplication(context);

app.get('/api', async () ={
  console.log(context.someValue)
});

在這段代碼中,TypeScript 會將 context.someValue 的類型推斷爲 boolean

(2)自定義類型中的泛型

將泛型應用於類型的語法類似於它們應用於接口和類的方式。來看下面的代碼:

type MyIdentityType<T> = T

這個泛型類型返回類型參數傳遞的類型。使用以下代碼來實現這種類型:

type B = MyIdentityType<number>

在這種情況下,B 的類型就是number

泛型類型通常用於創建工具類型,尤其是在使用映射類型時。TypeScript 內置了許多工具類型。例如 Partial實用工具類型,它傳入類型 T 並返回另一種具有與 T 相同的類型,但它們的所有字段都設置爲可選。Partial的實現如下:

type Partial<T> = {
  [P in keyof T]?: T[P];
};

這裏,Partial 接受一個類型,遍歷它的屬性類型,然後將它們作爲可選的新類型返回。

注意:由於 Partial 已經內置到了 TypeScript 中,因此將此代碼編譯到 TypeScript 環境中會重新聲明 Partial 並引發錯誤。上面的 Partial 實現僅用於說明目的。

  1. 使用泛型創建映射類型

使用 TypeScript 時,有時需要創建一個與另一種類型具有相同結構的類型。這意味着它們應該具有相同的屬性,但屬性的類型不同。對於這種情況,使用映射類型可以重用初始類型並減少重複代碼。這種結構稱爲映射類型並依賴於泛型。下面就來看看如何創建映射類型。

先來看一個例子,給定一種類型,返回一個新類型,其中所有屬性值都設置爲 boolean 類型。可以使用以下代碼創建此類型:

type BooleanFields<T> = {
  [K in keyof T]: boolean;
}

在這種類型中,使用 [K in keyof T] 指定新類型將具有的屬性。keyof T 用於返回 T 中所有可用屬性的名稱。然後使用 K in 來指定新類型的屬性是keyof T返回的類型中可用的所有屬性。

這將創建一個名爲 K 的新類型,該類型就是當前屬性的名稱。可以用於使用 T[K] 語法來訪問原始類型中此屬性的類型。在這種情況下,將屬性值的類型設置爲 boolean

這種 BooleanFields 類型的一個使用場景是創建一個選項對象。假設有一個數據庫模型,例如 User。從數據庫中獲取此模型的記錄時,還可以傳遞一個指定要返回哪些字段的對象。該對象將具有與模型相同的屬性,但類型設置爲布爾值。在字段中傳遞 true 意味着希望它被返回,而 false 則意味着希望它被省略。

可以在現有模型類型上使用 BooleanFields 泛型來返回與模型具有相同結構的新類型,但所有字段都設置爲布爾類型,代碼如下所示:

type BooleanFields<T> = {
  [K in keyof T]: boolean;
};

type User = {
  email: string;
  name: string;
}

type UserFetchOptions = BooleanFields<User>;

UserFetchOptions 的類型如下:

type UserFetchOptions = {
  email: boolean;
  name: boolean;
}

在創建映射類型時,還可以爲字段提供修飾符,例如 Readonly<T>Readonly<T> 類型返回一個新類型,其中傳遞類型的所有屬性都設置爲只讀屬性。這種類型的實現如下:

type Readonly<T> = {
  readonly [K in keyof T]: T[K]
}

注意:由於 Readonly 已經內置到 TypeScript 中,因此將此代碼編譯到您的 TypeScript 環境中會重新聲明 Readonly 並引發錯誤。此處引用的 Readonly 實現僅用於說明目的。

目前,可以在映射類型中使用的兩個可用修飾符是 readonly 修飾符,它必須作爲前綴添加到屬性中,用於將屬性設置爲只讀;以及?修飾符,可以作爲後綴添加到屬性中,用於將屬性設置爲可選。

  1. 使用泛型創建條件類型

下面來看看如何使用泛型創建條件類型。

(1)基礎條件類型

條件類型是泛型類型,根據某些條件具有不同的結果類型。先來看看下面的泛型類型 IsStringType<T>

type IsStringType<T> = T extends string ? true : false;

在這段代碼中,創建了一個名爲 IsStringType 的新泛型類型,它接收一個類型參數 T。在類型定義中,使用的語法類似於 JavaScript 中的三元表達式。此條件表達式檢查類型 T 是否是 string 類型。如果是,結果的類型將是 true;否則,結果的類型將是 false

要嘗試這種條件類型,需要將類型作爲其類型參數傳遞:

type IsStringType<T> = T extends string ? true : false;

type A = "abc";
type B = {
  name: string;
};

type ResultA = IsStringType<A>;
type ResultB = IsStringType<B>;

在此代碼中,創建了兩種類型:ABA 是字符串字面量類型 abcB 是具有string類型的name屬性的對象的類型。將這兩種類型與 IsStringType 條件類型一起使用,並將結果類型存儲到兩個新類型 ResultAResultB 中。

這裏 ResultA 類型設置爲 true,而 ResultB 類型設置爲 false。因爲 A 確實擴展了字符串類型,而 B 沒有擴展字符串類型,因爲它被設置爲具有字符串類型的單個name屬性的對象的類型。

條件類型的一個有用特性是它允許使用特殊關鍵字 inferextends 中推斷類型信息。可以在條件爲真的分支中使用這種新類型。此功能的一種用途是檢索任何函數類型的返回類型。

例如,GetReturnType 類型定義如下:

type GetReturnType<T> = T extends (...args: any[]) => infer U ? U : never;

在這段代碼中,創建了一個新的泛型類型,它是一個名爲 GetReturnType 的條件類型。此泛型類型接受一個類型參數 T。在類型聲明本身內部,檢查類型 T 是否擴展了與接受可變數量參數(包括 0)的函數簽名匹配的類型,然後推斷該返回函數的類型,創建一個新類型 U,它可用於條件的真實分支。U 的類型將綁定到傳遞函數的返回值的類型。如果傳遞的類型 T 不是函數,則代碼將返回類型nerver

將此類型與以下代碼一起使用:

type GetReturnType<T> = T extends (...args: any[]) => infer U ? U : never;

function someFunction() {
  return true;
}

type ReturnTypeOfSomeFunction = GetReturnType<typeof someFunction>;

在這段代碼中,創建了一個名爲 someFunction 的函數,該函數返回 true。然後,使用 typeof 運算符將此函數的類型傳遞給 GetReturnType 泛型,並將結果類型保存在 ReturnTypeOfSomeFunction 中。

由於 someFunction 變量的類型是函數,因此條件類型將計算條件爲真的分支。這將返回類型 U 作爲結果。U類型是根據函數的返回類型推斷出來的,在本例中是boolean。如果檢查 ReturnTypeOfSomeFunction 的類型,會發現它被設置爲了boolean類型。

(2)高級條件類型

條件類型是 TypeScript 中最靈活的功能之一,允許創建一些高級實用程序類型。接下來就創建一個名爲 NestedOmit<T, KeysToOmit> 的類型,它可以省略對象中的字段,就像現有的 Omit<T, KeysToOmit> 實用程序類型一樣,但也允許使用點表示法省略嵌套字段。

使用新的 NestedOmit<T, KeysToOmit> 泛型,將能夠使用下面例子中的類型:

type SomeType = {
  a: {
    b: string,
    c: {
      d: number;
      e: string[]
    },
    f: number
  }
  g: number | string,
  h: {
    i: string,
    j: number,
  },
  k: {
    l: number,<F3>
  }
}

type Result = NestedOmit<SomeType, "a.b" | "a.c.e" | "h.i" | "k">;

這段代碼聲明瞭一個名爲 SomeType 的類型,該類型具有嵌套屬性的多級結構。使用 NestedOmit 泛型傳入類型,然後列出想要省略的屬性的key。第二個類型參數中使用點符號來標識要省略的鍵。然後將結果類型存儲在 Result 中。

構造此條件類型將使用 TypeScript 中的許很多功能,例如模板文本類型、泛型、條件類型和映射類型。

首先創建一個名爲 NestedOmit 的泛型類型,它接受兩個類型參數:

type NestedOmit<T extends Record<string, any>, KeysToOmit extends string>

第一個類型參數爲 T,它必須是可分配給 Record<string, any> 類型的類型,它是要從中省略屬性的對象的類型。第二個類型參數爲 KeysToOmit,它必須是string類型。使用它來指定要從類型 T 中省略的key

接下來需要判斷 KeysToOmit 是否可分配給類型 ${infer KeyPart1}.${infer KeyPart2}:

type NestedOmit<T extends Record<string, any>, KeysToOmit extends string> =
  KeysToOmit extends `${infer KeyPart1}.${infer KeyPart2}`

這裏就用到了模板文本類型,同時利用條件類型在模板文字中推斷出其他兩種類型。通過這兩部分,將一個字符串拆分爲了兩個字符串。第一部分將分配給類型 KeyPart1 並將包含第一個點之前的所有內容。第二部分將分配給類型 KeyPart2 並將包含第一個點之後的所有內容。如果將 “a.b.c” 作爲 KeysToOmit 傳遞,則最初 KeyPart1 將設置爲字符串類型 “a”,而 KeyPart2 將設置爲 “b.c”。

接下來,使用三元表達式來定義條件爲true的分支:

type NestedOmit<T extends Record<string, any>, KeysToOmit extends string> =
  KeysToOmit extends `${infer KeyPart1}.${infer KeyPart2}`
    ?
      KeyPart1 extends keyof T

這裏使用 KeyPart1 extends keyof T 來檢查 KeyPart1 是否是給定類型 T 的有效屬性。如果是一個有效的 key,使用以下代碼以使條件計算爲兩種類型之間的交集:

type NestedOmit<T extends Record<string, any>, KeysToOmit extends string> =
  KeysToOmit extends `${infer KeyPart1}.${infer KeyPart2}`
    ?
      KeyPart1 extends keyof T
      ?
        Omit<T, KeyPart1>
        & {
          [NewKeys in KeyPart1]: NestedOmit<T[NewKeys], KeyPart2>
        }

Omit<T, KeyPart1> 是使用 TypeScript 自帶的 Omit 構建的類型。此時,KeyPart1 不是點表示法:它將包含一個字段的確切名稱,該字段包含要從原始類型中省略的嵌套字段。因此,可以安全地使用現有的實用程序類型。

使用 Omit 刪除 T[KeyPart1] 內的一些嵌套字段,爲此,必須重新生成 T[KeyPart1] 的類型。爲避免重新生成整個 T 類型,使用 OmitT 中僅刪除 KeyPart1,保留其他字段。然後,將在下一部分的類型中重建 T[KeyPart1]

[NewKeys in KeyPart1]:NestedOmit<T[NewKeys], KeyPart2> 是一個映射類型,其中屬性是可分配給 KeyPart1 的屬性,也就是上面從 KeysToOmit 中提取的部分。這是需要刪除的字段的父級。如果傳入了 a.b.c,那麼在第一次它將是a中的 NewKeys。然後,將此屬性的類型設置爲遞歸調用 NestedOmit 實用程序類型的結果,但現在使用 T[NewKeys] 作爲第一個類型參數傳遞 T 內的此屬性的類型,並作爲第二個類型參數傳遞點符號的其餘key,在 KeyPart2 中可用。

在內部條件爲 false 分支中,返回綁定到 T 的當前類型,就好像 KeyPart1 不是 T的有效key

type NestedOmit<T extends Record<string, any>, KeysToOmit extends string> =
  KeysToOmit extends `${infer KeyPart1}.${infer KeyPart2}`
    ?
      KeyPart1 extends keyof T
      ?
        Omit<T, KeyPart1>
        & {
          [NewKeys in KeyPart1]: NestedOmit<T[NewKeys], KeyPart2>
        }
      : T

條件的這個分支意味着省略 T 中不存在的字段。在這種情況下,無需再進一步。最後,在外部條件爲 false的分支中,使用內置的 Omit 實用程序類型從 T 中省略 KeysToOmit

type NestedOmit<T extends Record<string, any>, KeysToOmit extends string> =
  KeysToOmit extends `${infer KeyPart1}.${infer KeyPart2}`
    ?
      KeyPart1 extends keyof T
      ?
        Omit<T, KeyPart1>
        & {
          [NewKeys in KeyPart1]: NestedOmit<T[NewKeys], KeyPart2>
        }
      : T
    : Omit<T, KeysToOmit>;

如果條件 KeysToOmit extends ${infer KeyPart1}.${infer KeyPart2}false,則表示 KeysToOmit 未使用點表示法,因此可以使用 Omit 實用程序類型。

現在,要使用新的 NestedOmit 條件類型,創建一個名爲 NestedObject 的類型:

type NestedObject = {
  a: {
    b: {
      c: number;
      d: number;
    };
    e: number;
  };
  f: number;
};

調用 NestedOmit 以省略 a.b.c 中可用的嵌套字段:

type Result = NestedOmit<NestedObject, "a.b.c">;

在條件類型的第一次計算中,外部條件爲真,因爲字符串字面量類型a.b.c可分配給模板文本類型${infer KeyPart1}.${infer KeyPart2}。在這種情況下,KeyPart1 將被推斷爲字符串字面量類型a,而 KeyPart2 將被推斷爲字符串的剩餘部分,在本例中爲b.c

下面將計算內部條件,結果爲真,因爲此時 KeyPart1T 的鍵。KeyPart1 現在是a,並且 T 確實具有屬性a

type NestedObject = {
  a: {
    b: {
      c: number;
      d: number;
    };
    e: number;
  };
  f: number;
};

繼續計算條件,現在位於內部 true分支中。這構建了一個新類型,它是其他兩種類型的交集。第一種類型是在 T 上使用 Omit 實用程序類型來省略可分配給 KeyPart1 的字段(在本例中爲 a 字段)的結果。第二種類型是通過遞歸調用 NestedOmit 構建的新類型。

如果對 NestedOmit 進行下一步求值,對於第一次遞歸調用,交集類型會構建一個類型以用作 a 字段的類型。這將重新創建a字段,而不需要忽略嵌套字段。

NestedOmit 的最終計算中,第一個條件將返回 false,因爲傳遞的字符串類型是c。這種情況下,可以使用內置類型從對象中省略該字段。這將返回 b 字段的類型,即省略 c 的原始類型。計算到此結束,TypeScript 返回了需要使用的新類型,省略了嵌套字段。

  1. 小結

本文詳細解釋了適用於函數、接口、類和自定義類型的泛型,還使用泛型創建映射類型和條件類型。這些中的每一個都使泛型成爲使用 TypeScript 時的強大工具。正確的使用泛型將避免一遍又一遍地重複代碼,並使編寫的類型更加靈活。

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/QmPwaX3xuMe6PA3o8VwI0A