序文: 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を使用してすべての子要素を選択する方法の詳細な説明
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...
#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...
セキュリティ上の理由から、MySql-Server はローカル マシン (localhost、127...
HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...
目次背景目的分割前プロセス設計ディレクトリ構造の設計問題分割後プロセス設計ディレクトリ構造の設計問題...
目次既存のイメージからイメージを更新します。イメージを最初から構築する: Docker イメージ リ...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <t...
関連する依存関係をインストールするnpm i lib-flexible --save npm i p...
HTML+CSS+JS で Win10 の明るさ調整効果を模倣コード <!doctypehtm...
序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...
イメージが正常にビルドされると、Docker 環境があれば使用できますが、イメージを Docker ...
注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...
<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...
アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...
序文以前フロントエンドを勉強していたとき、メタタグに対する私の理解はこの一文だけでした。 <メ...