第12回 クラスの利用：TypeScriptで学ぶJavaScript入門（3/6 ページ）

プログラミング初心者向けのTypeScript入門連載。最終回はいよいよクラスの利用。クラスの基本や重要な考え方を詳しく解説する。TypeScriptでプログラミングへの理解を一歩深めよう。連載完結。

[羽山博，著]

クラスのメンバーとしてメソッドを定義する

　これまでのCatクラスでは「猫とは体長と体重のあるもの」という定義になっている。しかし、実際の猫は、鳴く、食べる、寝るといった行動を取る。そういった、クラスの働きはメソッドと呼ばれる。とはいえ、別に新しい書き方が必要とされるわけではなく、単に関数を書けば、それがメソッドとなる。

　では、Catクラスに「鳴く（meow）」メソッドと「食べる（eat）」メソッドを追加してみよう。

class Cat {
  length: number;
  weight: number;
  meow(): string {  // （1）
    return "にゃーん";
  }
  eat() {  // （2）
    this.length += 0.1;
    this.weight += 0.1;
  }
}

var myCat = new Cat();
myCat.length = 30.5;
myCat.weight = 2.5;
myCat.eat(); // （3）
alert("私の猫は" + myCat.meow() + "と鳴き、\n体長は" + myCat.length + "cm、体重は" + myCat.weight + "kgです");  // （4）
window.close();

Catクラスにmeowメソッドとeatメソッドを追加する（TypeScript）

　（1）がmeowメソッドの定義、（2）がeatメソッドの定義である。通常の関数の定義とほぼ同じだが、最初の「function」は書かなくていい。

　meowメソッドは単に「にゃーん」という文字列を返すだけだが、eatメソッドでは、体長（lengthプロパティ）と体重（weightプロパティ）を0.1ずつ増やしている。eatメソッドの中で個々のインスタンスが持つ変数（プロパティ）を使っているが、その場合には「this.」を変数名の前に付ける必要があることに注意しよう。

　（3）ではeatメソッドを呼び出しているので、ここで体長と体重が増える。（4）でmeowメソッドを呼び出して鳴き声を取得し、体長と体重とともに表示している。実行結果を見て確認してみよう。

図5　クラスにメソッドを追加し、実行してみる
猫が「にゃーん」と鳴き、「食べる」という動作をするので、体長と体重が増える。

メソッドのオーバーロード

　メソッドはオーバーロードできる。書き方は第11回の「関数に関するいくつかのトピック」で説明した通り。つまり、同じ名前で異なる引数を持つ関数を宣言し、いずれの場合にも対応できるように実装すればよい。ここでは、meowメソッドに引数を指定しなかった場合には「にゃーん」と鳴き、引数を指定した場合には、その引数を鳴き声とする。

class Cat {
  length: number;
  weight: number;
  meow(): string;  // （1）
  meow(s: string): string;  // （2）
  meow(s?: any): string{  // （3）
    if (typeof (s) == "string") {
      return s;
    } else {
      return "にゃーん";
    }
  }
  eat() {
    this.length += 0.1;
    this.weight += 0.1;
  }
}

var myCat = new Cat();
myCat.length = 30.5;
myCat.weight = 2.5;
myCat.eat();
alert("私の猫は" + myCat.meow("みゃお") + "と鳴き、\n体長は" + myCat.length + "cm、体重は" + myCat.weight + "kgです");  // （4）
window.close();

Catクラスのmeowメソッドをオーバーロードする（TypeScript）

　（1）と（2）は関数の宣言で、（3）がいずれの宣言にも対応した関数の実装である。（4）では、"みゃお"という実引数を指定してmeowメソッドを呼び出しているので、（2）の宣言に対応する関数と見なされる。実行例は以下の通り。

図6　meowメソッドをオーバーロードしたプログラムの実行結果
引数を指定してmeowメソッドを呼び出した場合の結果。