序文: TypeScript の登場によりこの問題は解決しましたが、API の再利用を考えると、TypeScript はそれほど柔軟ではないようです。このとき、 any 型を使用すると柔軟性のなさという問題を解決できますが、JavaScript の問題に戻り、最終結果が期待どおりにならない可能性があります。 この問題を解決するために、 1. 使いやすいここで、主に同じ型の 2 つの値を受け入れ、2 つのパラメーターの連結された値を返す // いわゆるジェネリックは、より一般的な意味では、一般的に参照される型です。 // 同じ型の 2 つのパラメーターを受け入れ、連結された値を返す join 関数を定義します。 関数 join<T>(最初: T、2番目: T) { `${first}${second}` を返す } // ここで、T は文字列として指定されます typejoin<string>('第一', '第二') //第一第二// ここでは、型推論を通じて、コンパイラは渡されたパラメータに基づいて型を自動的に推論しますjoin(1, 2) // 12 ジェネリックは山括弧 <> を使用して定義されます。結合関数を定義するときに、どの型が受け入れられるかはわかりませんが、2 つの型が同じでなければならないことは確かです。このような要件を満たしたい場合、ジェネリックなしで解決するのはそれほど簡単ではありません。 関数を呼び出す場合、2 つの方法があります。1 つは型を文字列型として直接指定する方法、もう 1 つは型推論を使用する方法です。エディターは渡されたパラメーターに基づいて型を自動的に決定するのに役立ちます。 2. 関数内でジェネリックを使用する関数を定義するときに、複数のジェネリックを使用することができ、数量と使用方法が対応している限り、戻り値の型もジェネリックを通じて指定できます。 サンプルコードは次のとおりです。 関数の恒等式<T, Y, P>(1番目: T、2番目: Y、3番目: P): Y { 2番目を返す } //指定された型 identity<boolean, string, number>(true, 'string', 123) // string // 型推論 identity('string', 123, true) // true 3. クラス内でジェネリックを使用するジェネリックは関数だけでなくクラスでも使用できます。 サンプルコードは次のとおりです。 クラスDataManager<T> { // T 型のプライベート配列を持つクラスを定義します。constructor(private data: T[]) {} // インデックスに基づいて配列内の値を取得します getItem(index: number): T { this.data[インデックス]を返す } } const data = new DataManager(['一碗周']) data.getItem(0) // 周の一杯 さらに、ジェネリックはインターフェースから継承することもできます。サンプルコードは次のとおりです。 インターフェースアイテム{ 名前: 文字列 } クラス DataManager<T extends Item> { // T 型のプライベート配列を持つクラスを定義します。constructor(private data: T[]) {} // インデックスに基づいて配列内の値を取得します getItem(index: number): string { this.data[index].nameを返す } } const data = new DataManager([{ name: '一碗周' }]) data.getItem(0) // 周の一杯 ジェネリック制約の効果を得るには、 4. ジェネリック制約における型パラメータの使用次のような要件があるとします。いくつかのプロパティを含むプライベート オブジェクトを持つクラスを定義し、キーを通じて対応する値を取得するメソッドを定義します。 実装コードは次のとおりです。 // インターフェースを定義する interface Person { 名前: 文字列 年齢: 番号 趣味: 弦楽器 } // クラスを定義する class Me { コンストラクター(プライベート情報: Person) {} getInfo(キー: 文字列) { this.info[キー]を返す } } const me = 新しい Me({ 名前:「周の一杯」 年齢: 18歳 趣味:「コーディング」 }) // me.getInfo() を呼び出すと、未定義の値が返される可能性があります。たとえば、me.getInfo('myName') // undefined 上記のコードでは、インスタンス オブジェクトで この問題は、特定の型のすべてのキーを取得するために使用できる keyof 演算子によって解決できます。その戻り値の型はユニオン型です。 サンプルコードは次のとおりです。 type myPerson = keyof Person // '名前' | '年齢' | '趣味' これで、この演算子を使用して上記の問題を解決できます。 サンプルコードは次のとおりです。 クラスMe{ コンストラクター(プライベート情報: Person) {} // これは getInfo<T extends keyof Person>(key: T): Person[T] { と同じです。 this.info[キー]を返す } // getInfo<T extends 'name' | 'age' | 'hobby'>(key: T): Person[T] { // this.info[key]を返す // } } const me = 新しい Me({ 名前:「周の一杯」 年齢: 18歳 趣味:「コーディング」 }) // 不明なプロパティが渡された場合、me.getInfo() を呼び出すとコンパイル エラーが発生します。me.getInfo('myName') // エラー: '"myName"' 型の引数は、'keyof Person' 型のパラメーターに割り当てることはできません。 オブジェクトに存在しないプロパティにアクセスすると、コンパイルが異常になります。 TypeScript ジェネリックの使用に関するこの記事はこれで終わりです。TypeScript ジェネリックに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL における datetime と timestamp の違いと選択
>>: CSSを使用してすべての子要素を選択する方法の詳細な説明
この記事では、弾性ナビゲーション効果を実現するためのJavaScriptの具体的なコードを参考までに...
コードをコピーコードは次のとおりです。 html {オーバーフロー: 非表示; }体{オーバーフロー...
1. MySQLイメージを取得するターミナルから最新のMySQLイメージを取得するdocker pu...
参考までに、Javascriptを使用してメッセージボードの例(メッセージ削除あり)を実装します。具...
テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...
まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...
[LeetCode] 185. 部門別給与上位3位従業員テーブルにはすべての従業員が保持されます。...
最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...
今日のタスク1. Linuxディストリビューションの選択2.vmwareが仮想マシン(centos)...
MySQLとMariaDBの関係MariaDB データベース管理システムは MySQL のブランチで...
フロントエンドテクノロジー層 (写真は少し極端ですが、参考までに) Javascript と DOM...
過去の Linux イメージに関する問題を修正従来の Linux イメージで作成された ECS クラ...
目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...
LinuxにMySQL 5.7.18をインストールする方法1. MySQLをダウンロードします。公...
ユニアプリコード <テンプレート> <表示> <image v-for...