TypeScript Generics通過允許功能，接口和組件來啟用可重復(fù)使用的類型安全代碼，同時保留類型信息。 1。使用類型變量（例如t）來表示占位符類型，如身份功能所示，可以保留類型安全性與任何類型。 2。它們是諸如Apiresponse 之類的結(jié)構(gòu)的理想選擇，可以在API或州經(jīng)理中始終如一地處理不同的數(shù)據(jù)形狀。 3。使用擴(kuò)展，可以限制仿制藥以確保所需的屬性，例如t擴(kuò)展具有ID字段的對象的{id：numbers}。 4。多類型參數(shù)（例如，K，V，R）支持MapObject（例如MapObject）和默認(rèn)類型（例如，T =未知）（例如，t =未知）的復(fù)雜轉(zhuǎn)換，而無需犧牲靈活性。 5。仿制藥被廣泛用于實用程序功能，諸如USEFetch （）之類的React鉤子和狀態(tài)管理，以避免重復(fù)并確保編譯時安全性，這對于邏輯在不同類型的邏輯重復(fù)時對于可擴(kuò)展，可維護(hù)的代碼至關(guān)重要。

打字稿仿制藥是編寫可重復(fù)使用的類型安全代碼的最強(qiáng)大功能之一。它們允許您創(chuàng)建在各種類型而不是單一類型的組件，函數(shù)或類中，而無需犧牲類型的信息。這在保持強(qiáng)大的打字時解鎖了靈活性，這在大規(guī)模應(yīng)用中至關(guān)重要。

讓我們分解仿制藥如何幫助您構(gòu)建更多可重復(fù)使用的代碼以及何時使用它們。

1。什么是仿制藥？ （以及為什么需要它們）

仿制藥在他們的核心上讓您編寫可以處理不同類型的功能或數(shù)據(jù)結(jié)構(gòu)，同時保留類型安全性。

例如，想象一個簡單的身份功能：

函數(shù)身份（arg：any）：任何{
  返回arg;
}

這起作用了，但是它拋出了類型信息。使用仿制藥，您可以保留它：

函數(shù)身份<t>（arg：t）：t {
  返回arg;
}

在這里， T是一種類型變量- 當(dāng)調(diào)用函數(shù)時將使用任何類型的占位符。

您可以這樣稱呼它：

 const num =身份（42）; //類型：數(shù)字
const str =身份（“ Hello”）; //類型：字符串

Typescript Infers會自動T ，因此您不必總是寫下identity<number>(42) 。

這看起來似乎很容易，但是當(dāng)建立類型變化但行為保持一致的諸如caches，apis或州經(jīng)理之類的公用事業(yè)時，這變得至關(guān)重要。

2。在功能和接口中使用仿制藥

當(dāng)跨多種類型抽象邏輯時，仿制藥確實會發(fā)光。

示例：通用API響應(yīng)包裝器

假設(shè)您正在處理一致的API響應(yīng)：

接口apiresponse <t> {
  數(shù)據(jù)：t;
  狀態(tài)：數(shù)字；
  消息？：字符串；
}

現(xiàn)在，您可以通過不同的端點重復(fù)使用此界面：

 const userresponse：apiresponse <user> = {
  數(shù)據(jù)：{id：1，名稱：“ Alice”}，
  狀態(tài)：200，
};

const postsresponse：apiresponse <post []> = {
  數(shù)據(jù)：[{id：1，title：“ hello”}]，
  狀態(tài)：200，
};

現(xiàn)在，您的組件或服務(wù)可以在不知道T的確切形狀的情況下處理ApiResponse<T> ，但仍提供完整的自動完成和類型檢查。

3。用extends約束仿制藥

有時您想要靈活性 - 但不是太多。您可以限制使用extends通用類型接受的類型。

例如，假設(shè)您需要一個從對象中提取屬性的函數(shù)，但前提是它具有id字段：

函數(shù)logid <t擴(kuò)展{id：number}>（item：t）：void {
  console.log（item.ID）;
}

現(xiàn)在，這可以確保任何傳遞的參數(shù)必須具有類型number的id ：

 logid（{id：123，name：“ bob”}）; //?好
logid（{name：“ charlie”}）; //錯誤：缺少'id'

這種模式在需要結(jié)構(gòu)保證的情況下，在公用事業(yè)功能，表單處理程序或串行中很常見。

4。多類參數(shù)和默認(rèn)類型

您不僅限于一種通用類型。

功能mapObject <k，v，r>（
  obj：記錄<k，v>，
  fn ：（ value：v）=> r
）：記錄<k，r> {
  返回對象。Fromentries（
    object.entries（obj）.map（（[[key，value]）=> [key，fn（value）]）
  ）作為記錄<k，r>;
}

另外，您可以提供默認(rèn)類型以獲得更好的人體工程學(xué)：

接口queryResult <t = unknown> {
  數(shù)據(jù)：t;
  加載：布爾值；
}

現(xiàn)在，如果未指定任何類型， QueryResult值為unknown ，但保持靈活。

5。實踐中可重復(fù)使用的組件

仿制藥特別有用：

• 實用程序功能（例如， pick ， omit ， deepClone ）
• 國家管理（例如，動作，具有有效載荷類型的還原器）
• 反應(yīng)組件（例如，形式，接受通用道具的模態(tài)）
• 數(shù)據(jù)獲取鉤子（例如， useFetch<T>() ）

示例：通用式鉤子

功能usefetch <t>（url：string）：{數(shù)據(jù)：t |無效的;加載：boolean} {
  const [data，setData] = usestate <t | null>（null）;
  const [loading，setloading] = usestate（true）;

  useeffect（（）=> {
    提?。╱rl）
      然后（r => r.json（））
      。
      .finally（（）=> setloading（false））;
  }，[url]）;

  返回{數(shù)據(jù)，加載};
}

// 用法
const {data} = usefetch <user []>（“/api/users”）;

在這里，相同的鉤子可以安全處理任何預(yù)期的響應(yīng)類型。

仿制藥一開始可能會感到抽象，但它們只是打字稿的方式，讓您編寫未來的代碼。一旦開始使用它們，您就會發(fā)現(xiàn)自己更少重復(fù)，自信地重構(gòu)并在編譯時間捕捉錯誤。

基本上：如果您要重復(fù)針對不同類型的相同邏輯，那么該到達(dá)仿制藥了。

以上是用打字稿通用來解鎖可重復(fù)使用性的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！