在 TypeScript 中使用泛型的方法

Posted on 2022-06-17 by WalkonNet

泛型是靜態類型語言的基本特征，允許將類型作為參數傳遞給另一個類型、函數、或者其他結構。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對象中的age和extensions屬性組成瞭一個新的對象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對象時，T將age設置為number類型，將extensions設置為string[]類型，所以變量ageAndExtensions的類型為：

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

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

2. 在函數中使用泛型

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

（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 標識函數的泛型類型參數 T 為 number 類型。這將強制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)

這段代碼嘗試訪問data的a屬性，但是由於data是unknow類型，將無法訪問對象的屬性。

如果不打算為泛型函數的每次調用添加特定的類型，則可以為泛型類型參數添加默認類型。通過在泛型類型參數後面添加 = 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;
}

3. 在接口、類和類型中使用泛型

在 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 實現僅用於說明目的。

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

使用 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 修飾符，它必須作為前綴添加到屬性中，用於將屬性設置為隻讀；以及?修飾符，可以作為後綴添加到屬性中，用於將屬性設置為可選。

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

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

（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>;

在此代碼中，創建瞭兩種類型：A 和 B。A 是字符串字面量類型 abc，B 是具有string類型的name屬性的對象的類型。將這兩種類型與 IsStringType條件類型一起使用，並將結果類型存儲到兩個新類型ResultA和ResultB中。

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

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

例如，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 類型，使用 Omit 從 T 中僅刪除 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}.inferKeyPart1.{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。

下面將計算內部條件，結果為真，因為此時KeyPart1是T的鍵。 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 返回瞭需要使用的新類型，省略瞭嵌套字段。

6. 小結

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

到此這篇關於在 TypeScript 中使用泛型的方法的文章就介紹到這瞭,更多相關TypeScript 泛型內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

在 TypeScript 中使用泛型的方法

目錄

1. 泛型語法

2. 在函數中使用泛型

（1）分配泛型參數

（2）直接傳遞類型參數

（3）默認類型參數

（4）類型參數約束

3. 在接口、類和類型中使用泛型

（1）接口和類中的泛型

（2）自定義類型中的泛型

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

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

（1）基礎條件類型

（2）高級條件類型

6. 小結

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

1. 泛型語法

2. 在函數中使用泛型

（1）分配泛型參數

（2）直接傳遞類型參數

（3）默認類型參數

（4）類型參數約束

3. 在接口、類和類型中使用泛型

（1）接口和類中的泛型

（2）自定義類型中的泛型

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

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

（1）基礎條件類型

（2）高級條件類型

6. 小結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆