序文: ほとんどの関数は固定されたパラメータセットを受け入れます。ただし、一部の関数では、関数の呼び出し方法に応じて、可変数の引数、異なる型の引数を受け入れたり、異なる型を返したりすることもできます。このような関数に注釈を付けるために、TypeScript は関数オーバーロードを提供します。 1. 関数シグネチャまず、特定の人に挨拶メッセージを返す関数を考えてみましょう。 関数greet(人: 文字列): 文字列 { `Hello, ${person}!` を返します。 } 上記の関数は、文字型の引数 1 つ (人の名前) を受け入れます。関数の呼び出しは非常に簡単です: greeting('World'); // 'こんにちは、World!'
このような関数は、文字列または文字列の配列を引数として受け入れ、文字列または文字列の配列を返します。 このような関数に注釈を付けるにはどうすればよいでしょうか?方法は2つあります。 最初のアプローチは簡単で、パラメータと戻り値の型を更新して関数シグネチャを直接変更します。 リファクタリング後のgreet()は次のようになります。 関数greet(person: 文字列 | 文字列[]): 文字列 | 文字列[] { if (typeof person === 'string') { `Hello, ${person}!` を返します。 } そうでない場合 (Array.isArray(person)) { person.map(name => `こんにちは、${name}!`) を返します。 } 新しいエラーをスローします('挨拶できません'); } これで、greet() を 2 つの方法で呼び出すことができます。 greeting('World'); // 'こんにちは、World!' greeting(['Xiaozhi', 'Daye']); // ['こんにちは、Xiaozhi!', 'こんにちは、Daye!'] 複数の呼び出しメソッドをサポートするために関数シグネチャを直接更新することは、一般的で適切なアプローチです。 ただし、場合によっては、別のアプローチを採用し、関数を呼び出すすべての方法を個別に定義する必要があります。このアプローチは関数オーバーロードと呼ばれます。 2. 関数のオーバーロード2 番目の方法は、関数オーバーロードを使用することです。関数シグネチャが比較的複雑で、複数の型が関係する場合は、このアプローチをお勧めします。 関数オーバーロードを定義するには、オーバーロード シグネチャと実装シグネチャを定義する必要があります。 オーバーロードされたシグネチャは、関数本体なしで、関数のパラメーターと戻り値の型を定義します。関数には、関数を呼び出すさまざまな方法に対応する複数のオーバーロードされたシグネチャを含めることができます。 一方、実装シグネチャには、実装関数の本体だけでなく、パラメータの型と戻り値の型もあり、実装シグネチャは 1 つしか存在できません。 // オーバーロードシグネチャ function greeting(person: string): string; 関数greet(persons: string[]): string[]; // シグネチャ関数を実装するgreet(person: unknown): unknown { if (typeof person === 'string') { `Hello, ${person}!` を返します。 } そうでない場合 (Array.isArray(person)) { person.map(name => `こんにちは、${name}!`) を返します。 } 新しいエラーをスローします('挨拶できません'); }
各オーバーロード シグネチャは、関数を呼び出す 1 つの方法を記述します。 実装シグネチャ これで、上記のように、 greeting('World'); // 'こんにちは、World!' greeting(['Xiaozhi', 'Daye']); // ['こんにちは、Xiaozhi!', 'こんにちは、Daye!'] 2.1 オーバーロードされたシグネチャは呼び出し可能実装シグネチャは関数の動作を実装しますが、直接呼び出すことはできません。オーバーロードされたシグネチャのみが呼び出し可能です。 greeting('World'); // オーバーロードされたシグネチャ呼び出し可能関数 greeting(['Xiaozhi', 'Daye']); // オーバーロードされたシグネチャ呼び出し可能関数 const someValue: unknown = 'Unknown'; greeting(someValue); // 実装シグネチャは呼び出し可能ではない // エラーを報告します。この呼び出しに一致するオーバーロードはありません。 オーバーロード 1/2、「(person: string): string」で次のエラーが発生しました。 'unknown' 型の引数は 'string' 型のパラメータに割り当てることができません。 オーバーロード 2/2、「(persons: string[]): string[]」で次のエラーが発生しました。 'unknown' 型の引数は 'string[]' 型のパラメータに割り当てることができません。 上記の例では、実装シグネチャが 2.1 実装署名は普遍的でなければならない// オーバーロードシグネチャ function greeting(person: string): string; 関数greet(persons: string[]): string[]; // このオーバーロード シグネチャは、実装シグネチャと互換性がありません。 // シグネチャ関数を実装するgreet(person: unknown): string { // ... 新しいエラーをスローします('挨拶できません'); } オーバーロードされたシグネチャ関数 実装シグネチャの 3. メソッドのオーバーロード前の例では、関数オーバーロードが通常の関数に適用されました。しかし、メソッドをオーバーロードすることもできます メソッド オーバーロード セクションでは、オーバーロード シグネチャと実装シグネチャの両方がクラスの一部になります。 たとえば、オーバーロードされたメソッド クラス Greeter { メッセージ: 文字列; コンストラクター(メッセージ: 文字列) { this.message = メッセージ; } // オーバーロードシグネチャ greeting(person: string): string; 挨拶(人物: 文字列[]): 文字列[]; // シグネチャを実装するgreet(person: unknown): unknown { if (typeof person === 'string') { `${this.message}, ${person}!` を返します。 } そうでない場合 (Array.isArray(person)) { person.map(name => `${this.message}, ${name}!`) を返します。 } 新しいエラーをスローします('挨拶できません'); } Greeterクラスには、greet()オーバーロードメソッドが含まれています。メソッドの呼び出し方法を記述する2つのオーバーロードシグネチャと、正しい実装を含む実装シグネチャです。 メソッドのオーバーロードのおかげで、hi.greet() を、文字列または文字列の配列を引数として 2 つの方法で呼び出すことができます。 const hi = new Greeter('Hi'); hi.greet('Xiaozhi'); // 'こんにちは、Xiaozhi!' hi.greet(['Wang Daye', 'Daye']); // ['こんにちは、Wang Daye!', 'こんにちは、Daye!'] 4. 関数オーバーロードを使用する場合関数オーバーロードを適切に使用すると、複数の方法で呼び出される可能性のある関数の使いやすさが大幅に向上します。これは、自動補完を行うときに特に便利です。自動補完では、可能なすべてのオーバーロードがリストされます。 ただし、場合によっては、関数オーバーロードではなく、関数シグネチャを使用することをお勧めします。 たとえば、オプションのパラメータを持つ関数のオーバーロードは使用しないでください。 // 推奨されません function myFunc(): string; 関数 myFunc(param1: 文字列): 文字列; 関数 myFunc(param1: 文字列、param2: 文字列): 文字列; 関数 myFunc(...args: 文字列[]): 文字列 { // 実装... } 関数シグネチャでオプションのパラメータを使用するだけで十分です。 // 推奨される方法 function myFunc(param1?: string, param2: string): string { // 実装... } 5. まとめ
関数オーバーロードを使用するには、オーバーロード シグネチャ (パラメーターと戻り値の型を持ち、本体を持たない関数のセット) を定義する必要があります。これらのシグネチャは、関数をどのように呼び出すかを示します。 さらに、関数の正しい実装 (実装シグネチャ)、つまりパラメータと戻り値の型、および関数本体** を記述する必要があります。実装シグネチャは呼び出し可能ではないことに注意してください。 ** 通常の関数に加えて、クラス内のメソッドもオーバーロードできます。 以下もご興味があるかもしれません:
|
<<: Dockerのプロセスとイメージを実行するための基本コマンドの詳細な説明
>>: jQuery エディタ プラグイン tinyMCE の使い方
この記事では、divマウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考まで...
目次道具:ログインシナリオ:練習する:シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具:...
序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...
現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...
序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...
最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...
降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...
Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単...
目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...
MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...
Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...
Nginx は、ngx_http_limit_req_module モジュールの limit_req...
SFTPの概念sftp は、安全なファイル転送プロトコルである Secure File Transf...
質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...
まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...