[解決済み] TypeScriptでメソッドのオーバーローディングをする方法はありますか?
2022-06-11 02:47:22
質問
TypeScript言語でメソッドのオーバーローディングを行う方法はありますか?
このようなことを実現したいのですが。
class TestClass {
someMethod(stringParameter: string): void {
alert("Variant #1: stringParameter = " + stringParameter);
}
someMethod(numberParameter: number, stringParameter: string): void {
alert("Variant #2: numberParameter = " + numberParameter + ", stringParameter = " + stringParameter);
}
}
var testClass = new TestClass();
testClass.someMethod("string for v#1");
testClass.someMethod(12345, "string for v#2");
以下は、私がやりたくないことの例です(私はJSでハックをオーバーロードするその部分が本当に嫌いなのです)。
class TestClass {
private someMethod_Overload_string(stringParameter: string): void {
// A lot of code could be here... I don't want to mix it with switch or if statement in general function
alert("Variant #1: stringParameter = " + stringParameter);
}
private someMethod_Overload_number_string(numberParameter: number, stringParameter: string): void {
alert("Variant #2: numberParameter = " + numberParameter + ", stringParameter = " + stringParameter);
}
private someMethod_Overload_string_number(stringParameter: string, numberParameter: number): void {
alert("Variant #3: stringParameter = " + stringParameter + ", numberParameter = " + numberParameter);
}
public someMethod(stringParameter: string): void;
public someMethod(numberParameter: number, stringParameter: string): void;
public someMethod(stringParameter: string, numberParameter: number): void;
public someMethod(): void {
switch (arguments.length) {
case 1:
if(typeof arguments[0] == "string") {
this.someMethod_Overload_string(arguments[0]);
return;
}
return; // Unreachable area for this case, unnecessary return statement
case 2:
if ((typeof arguments[0] == "number") &&
(typeof arguments[1] == "string")) {
this.someMethod_Overload_number_string(arguments[0], arguments[1]);
}
else if ((typeof arguments[0] == "string") &&
(typeof arguments[1] == "number")) {
this.someMethod_Overload_string_number(arguments[0], arguments[1]);
}
return; // Unreachable area for this case, unnecessary return statement
}
}
}
var testClass = new TestClass();
testClass.someMethod("string for v#1");
testClass.someMethod(12345, "string for v#2");
testClass.someMethod("string for v#3", 54321);
どのように解決するのですか?
仕様によると、TypeScriptはメソッドのオーバーロードをサポートしていますが、かなり厄介で、パラメータの種類を確認するための手作業が多く含まれています。これは、プレーンなJavaScriptでメソッドのオーバーロードに最も近いものが、そのチェックも含んでいることと、TypeScriptが実行時の不要なパフォーマンスコストを避けるために実際のメソッド本体を変更しないようにしていることが主な理由だと思います。
私の理解が正しければ、まずオーバーロードのそれぞれについてメソッド宣言を書き、次に one メソッドの実装を書かなければなりません。この実装は引数をチェックして、どのオーバーロードが呼び出されたかを決定します。実装の署名は、すべてのオーバーロードと互換性がある必要があります。
class TestClass {
someMethod(stringParameter: string): void;
someMethod(numberParameter: number, stringParameter: string): void;
someMethod(stringOrNumberParameter: any, stringParameter?: string): void {
if (stringOrNumberParameter && typeof stringOrNumberParameter == "number")
alert("Variant #2: numberParameter = " + stringOrNumberParameter + ", stringParameter = " + stringParameter);
else
alert("Variant #1: stringParameter = " + stringOrNumberParameter);
}
}
関連
-
jsを使った簡単な照明スイッチのコード
-
JavaScriptのクロージャの説明
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み】TypeScriptのインターフェースと型について
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptのクロージャの説明
-
Vueにシンプルなメモ帳機能を実装
-
vue ディレクティブ v-html と v-text
-
vueが定義するプライベートフィルタと基本的な使い方
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。
-
[解決済み] Typescript によるインターフェース型チェック
-
[解決済み】TypeScriptの関数のオーバーローディング