タイプスクリプトジェネリックは、タイプ情報(bào)を保持しながら、関數(shù)、インターフェイス、およびコンポーネントが複數(shù)のタイプで動(dòng)作できるようにすることにより、再利用可能なタイプセーフコードを有効にします。 1。ジェネリックは、Tのようなタイプ変數(shù)を使用して、ID関數(shù)に見られるように、プレースホルダータイプを表し、型とは異なり、タイプの安全性を維持します。 2。これらは、Apiresponse のような構(gòu)造に最適であり、APIまたは州のマネージャー間でさまざまなデータ形狀の一貫した処理を可能にします。 3.拡張機(jī)能を使用して、Genericsを制約して、IDフィールドを持つオブジェクトのt extends {id：number}などの必要なプロパティを確保することができます。 4。複數(shù)のタイプパラメーター（例：k、v、r）は、mapobjectやデフォルトタイプなどの複雑な変換をサポートし、柔軟性を犠牲にすることなく使いやすさを向上させます。 5.ジェネリックは、ユーティリティ関數(shù)、usefetch （）のような反応フック、および複製を回避し、コンパイル時(shí)間の安全性を確保するために狀態(tài)管理で広く使用されているため、ロジックが異なるタイプで繰り返されるときにスケーラブルで保守可能なコードに不可欠になります。

タイプスクリプトジェネリックは、再利用可能なタイプセーフコードを作成するための最も強(qiáng)力な機(jī)能の1つです。これらを使用すると、タイプ情報(bào)を犠牲にすることなく、単一の種類ではなく、さまざまなタイプで動(dòng)作するコンポーネント、関數(shù)、またはクラスを作成できます。これにより、強(qiáng)力なタイピングを維持しながら柔軟性が解除されます。これは、大規(guī)模なアプリケーションでは不可欠です。

ジェネリックがどのように再利用可能なコードを作成するのに役立つか、いつそれらを使用するかを分解しましょう。

1。ジェネリックとは何ですか？ （そしてなぜあなたがそれらを必要とするのか）

コアでは、ジェネリックを使用すると、タイプの安全性を維持しながらさまざまなタイプを処理できる関數(shù)またはデータ構(gòu)造を作成できます。

たとえば、単純なアイデンティティ関數(shù)を想像してください。

関數(shù)ID（arg：any）：any {
  argを返します。
}

これは機(jī)能しますが、タイプ情報(bào)を捨てます。ジェネリックを使用すると、あなたはそれを保存します：

関數(shù)ID <T>（arg：t）：t {
  argを返します。
}

ここで、 Tタイプ変數(shù)です。関數(shù)が呼び出されたときに使用される型のプレースホルダーです。

あなたはそれをこのように呼ぶことができます：

 const num = ID（42）; //タイプ：番號(hào)
const str = ID（ "hello"）; //タイプ：文字列

タイプスクリプトは自動(dòng)的にTされるため、常にidentity<number>(42)を記述する必要はありません。

これは些細(xì)なことに思えるかもしれませんが、キャッシュ、API、または狀態(tài)マネージャーなどのユーティリティを構(gòu)築すると、タイプが異なるが動(dòng)作が一貫している場(chǎng)合に重要になります。

2。関數(shù)とインターフェイスでジェネリックを使用します

ジェネリックは、複數(shù)のタイプでロジックを抽象化するときに本當(dāng)に輝いています。

例：一般的なAPI応答ラッパー

一貫した形狀でAPI応答を処理しているとします：

インターフェイスapiresponse <t> {
  データ：t;
  ステータス：番號(hào);
  メッセージ？：文字列;
}

これで、このインターフェイスを異なるエンドポイントで再利用できます。

 const userresponse：apiresponse <user> = {
  データ：{id：1、name： "Alice"}、
  ステータス：200、
};

const postsresponse：apiresponse <post []> = {
  データ：[{id：1、title： "hello"}]、
  ステータス：200、
};

コンポーネントまたはサービスは、 Tの正確な形狀を知らずにApiResponse<T>を処理できるようになりましたが、それでも完全なオートコンプリートとタイプチェックを提供できます。

3。 extendsジェネリックを制約します

柔軟性が必要な場(chǎng)合もありますが、あまり柔軟性がありません。ジェネリックがextendsを使用して受け入れるタイプを制限できます。

たとえば、オブジェクトからプロパティを抽出する関數(shù)が必要であると仮定しますが、それはidフィールドがある場(chǎng)合にのみです。

 function logid <t extends {id：number}>（item：t）：void {
  console.log（item.id）;
}

これにより、渡された引數(shù)には、タイプnumberのidが必要であることが保証されます。

 logid（{id：123、name： "bob"}）; //?わかりました
logid（{name： "Charlie"}）; //?エラー：「ID」がありません

このパターンは、構(gòu)造的保証が必要なユーティリティ関數(shù)、フォームハンドラー、またはシリアイザーで一般的です。

4.複數(shù)のタイプパラメーターとデフォルトタイプ

1つの一般的なタイプに限定されません。

 function mapobject <k、v、r>（
  OBJ：レコード<k、v>、
  fn ：（値：v）=> r
）：記録<k、r> {
  Object.fromentriesを返します（
    object.entries（obj）.map（（[key、value]）=> [key、fn（value）]））
  ）記録として<K、r>;
}

また、より良い人間工學(xué)のためにデフォルトタイプを提供することもできます。

インターフェイスqueryResult <t = unknown> {
  データ：t;
  読み込み：ブール;
}

QueryResult 、タイプが指定されていない場(chǎng)合はunknownですが、柔軟性のままです。

5。実際には再利用可能なコンポーネント

ジェネリックは特に役立ちます：

• ユーティリティ関數(shù)（たとえば、 pick 、 omit 、 deepClone ）
• 國(guó)家管理（例、アクション、ペイロードタイプの還元?jiǎng)垼?/li>
• 反応コンポーネント（例、フォーム、一般的な小道具を受け入れるモーダル）
• フックを取得するデータ（例： useFetch<T>() ）

例：一般的な反応フック

関數(shù)usefetch <t>（url：string）：{data：t |ヌル;読み込み：boolean} {
  const [data、setdata] = uesestate <t | null>（null）;
  const [loading、setloading] = uesestate（true）;

  effect（（）=> {
    フェッチ（url）
      .then（r => r.json（））
      .then（data => setData（tとしてのデータ））
      .finally（（）=> setLoading（false））;
  }、[url]）;

  {data、loading}を返します。
}

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

ここでは、同じフックが予想される応答タイプを安全に処理します。

ジェネリックは最初は抽象的に感じるかもしれませんが、將來のコードを書くことができるタイプスクリプトの方法です。それらを使用し始めると、複製が少なくなり、自信を持ってリファクタリングし、コンパイル時(shí)間でバグをキャッチすることがわかります。

基本的に：さまざまなタイプについて同じロジックを繰り返している場(chǎng)合は、ジェネリックに手を伸ばす時(shí)が來ました。

以上がTypeScriptジェネリックによる再利用性のロックを解除しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。