クラスの型にまつわるあれこれ（2）〜クラスの継承とクラス間の型の関係について〜：TypeScriptのTypeあれこれシリーズ（6）

altJS、すなわちJavaScriptの代わりとなる言語の筆頭である「TypeScript」。TypeScriptという言語名が示す通り、JavaScriptに「Type」、つまり型の概念を持ち込んだものです。本連載では、このTypeScriptの型に関して、さまざまな方向から紹介していきます。前回は、オブジェクトのひな型となるクラスに関して、基本的な内容を紹介しました。今回はその続きとして、クラスの継承やクラスをnewしたオブジェクトそのものの型について紹介します。

[齊藤新三（著）／山田 祥寛（監修），WINGSプロジェクト]

連載：TypeScriptのTypeあれこれシリーズ

継承

　クラスを手軽に拡張する方法として、継承があります。この継承はJavaScriptにもある構文です。その構文を確認しながら、TypeScript独自の内容を紹介していきます。

継承とは

　継承とは、あるクラスのメンバをそっくり引き継ぎ、そのクラスを拡張したクラスを作成できる仕組みです。具体例を見ていきましょう。例えば、リスト1のようなクラスCalcBaseがあるとします。

class CalcBase {
	private _baseNum = 0;  // (1)
	constructor(baseNum: number) {  // (2)
		this._baseNum = baseNum;
	}
	get baseNum(): number {  // (3)
		return this._baseNum;
	}
}

リスト1

　このクラスを踏まえて、リスト2のクラスを作成したとします。

class CalcAdd extends CalcBase {
	getAddedNum(addNum: number): number {
		return this.baseNum + addNum;  // (1)
	}
}

リスト2

　クラス宣言に注目してください。リスト1のように「class クラス名」という構文ではなく、これに続けて「extends」キーワードが記述されています。このextendsが継承を表します。このextendsの次に記述されたクラスを「親クラス」といい、それに対してこれから作成するクラスを、「子クラス」といいます。構文としては次のようになります。

［構文1］継承
class クラス名 extends 親クラス

継承では親クラスのメンバが含まれる

　この子クラスでは、親クラスのメンバをそっくりそのまま含んだ状態となります（図1）。

図1　子クラスには親クラスのメンバが全て含まれている

　CalcAddクラスには、メンバとしてgetAddedNum()メソッドしかありませんが、CalcBaseを継承しているため、親クラスであるCalcBaseのメンバである_baseNum、constructor()、baseNumゲッターが含まれた状態となります。そのためCalcAdd内では、リスト2の（1）のように、this.baseNumでbaseNumゲッターが利用できます。

　また、このCalcAddクラスをnewしようとすると、リスト3の（1）のように引数を渡す必要があります。

const calcAdd = new CalcAdd(5);  // (1)
const ans = calcAdd.getAddedNum(3);  // (2)

リスト3

　これは、CalcAddクラスにはコンストラクタが記述されていなくても、その親クラスであるCalcBaseのコンストラクタには、リスト1の（2）のように、引数が設定されているからです。もしこの引数を渡さなければ、図2のエラーとなります。

図2　親クラスのコンストラクタに引数が設定されているため引数は必要

　なお、newしたCalcAddクラスのメソッドgetAddedNum()を利用する場合は、リスト3の（2）のようなコードとなります。これに関しては、特に問題ないでしょう。

子クラスから利用できるメンバにつけるprotected