5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TypeScriptで引数がないメソッドをオーバーライドしてオーバーロードする方法

Last updated at Posted at 2018-04-19

#やりたいこと
親クラスで定義した引数のないメソッドを引数を渡すことの出来るメソッドにオーバーライドしてオーバーロードしたい。
調べるのに結構時間がかかってしまったのでメモ。

#オーバーライド、オーバーロードとは?

  • オーバーライド
    親クラスで定義したメソッドを親クラスを継承した子クラスのメソッドで処理を変えて上書きできる。
override.ts
//親クラス
class Base {
    public method(): void {
       console.log("Hello World");
    }
}

//子クラス
class Child extends Base {
    public method(): void {
       //親クラスと同じ名前のメソッドの処理を上書きすることが出来る。
       console.log("GoodBye World");
    }
}
  • オーバーロード
    引数や返り値の違う同名のメソッドを定義できる
overload.ts

class ClassA {
    //オーバーロードする関数を宣言する
    public method(args1: string): void;
    public method(args1: number): void;

    //オーバーロードした関数の実装を書く
    public method(args1: any): void {
       if(typeof args1 === "string") {
           //引数にstring型を渡したときの処理を書く
       } else if (typeof args1 === "number") {
           //引数にnumber型を渡したときの処理を書く
       } else {
           //args1がstring型でもnumber型でもないときの処理
       }
    }
}

引数のないメソッドをオーバーライドしてオーバーロードする

引数の型が違うメソッドをオーバーライドしてオーバーロードする方法はこちらのページに書いてあったが、引数なしのメソッドをオーバーライドしてオーバーロードする方法がわからなかった。

最初はオーバーロード宣言をしてそのままオーバーライドして実装してみたがコンパイルエラーが出た。

そのままオーバーロード宣言をしてオーバーライドする
class Base {
	public method(): void{
		//処理
	}	
}

class Child extends Base{
	public method(args1: string, args2: number): void;
	public method(): void;//error: オーバーロドシグネチャは関数の実装に対応していません。
	
	public method(args1: string, args2: string): void{
		//処理
	}	
}

このサイトによると引数の数を変えてオーバーロードするときは実装するメソッドの引数をオプション引数に指定してあげる必要があるらしい。

実装するメソッドの引数をオプション引数にする
class Base {
	public method(): void{
		//処理
	}	
}

class Child extends Base{
	public method(args1: string, args2: number): void;
	public method(): void;
	
	public method(args1?: string, args2?: string): void{//オプション引数を指定
		//処理
	}	
}

#参考サイト

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?