はじめに
前回の記事ではクラスの定義方法について説明しました。
今回は、クラスを継承してサブクラスを作成する方法について説明します。
目次
クラスの継承
すでにあるクラスの機能を引き継いで、新しいクラスを作成することをクラスの継承と言います。継承元のクラスをスーパークラスと呼び、スーパークラスを継承して作成したクラスのことをサブクラスと呼びます。
サブクラスの定義書式を以下に示します。継承元のクラスは extends キーワードの後ろに記述します。
class サブクラス名 extends 継承元クラス名 {
// サブクラスの コンストラクタ, プロパティ, メソッドなどを定義
}
はじめに、クラス継承の確認をするために以下のクラス定義を作成します。
このクラスは「社員」を表しており、プロパティとして社員番号、氏名、年齢を持っています。
// 社員クラス
class employee {
public empno : string; // 社員番号
public fullname : string; // 氏名
public age : number; // 年齢
constructor() {
this.empno = "000";
this.fullname = "No name";
this.age = 20;
}
}
次に、以下のように factoryEmp という名前のサブクラスを作成します。このクラスは上記のクラスを継承しただけのものです。
class factoryEmp extends employee {
}
サブクラスのインスタンス化
続いて、サブクラスをインスタンス化してみましょう。
サブクラスのインスタンス化は、通常のインスタンス化と変わりありません。
先ほど定義したサブクラスのインスタンス化例を以下に示します。この例ではサブクラス factoryEmp をインスタンス化して emp という変数に格納しています。
let emp = new factoryEmp();
サブクラスを使ってみよう
それでは、サブクラスを使ってみましょう。「サブクラスに何も定義してないじゃないか」と思われるかもしれませんが、親クラスである employee を継承していますので、empno, fullname, age を使用することができます。
console.log(emp.empno); // 000 console.log(emp.fullname); // No name console.log(emp.age); // 20
サブクラスのメンバを定義する
メンバとは、プロパティやメソッドの総称です。
ここではサブクラスに workHour というプロパティを定義してみましょう。
class factoryEmp extends employee {
public workHour : number;
}
上記のように定義するとfactoryEmp クラスのインスタンスでは、empno, fullname, age に加えて workHour というプロパティを使用できるようになります。
コンストラクタの定義
サブクラスもスーパークラスと同様にコンストラクタを定義することができます。またサブクラスのコンストラクタを定義する場合は、スーパークラスのコンストラクタを明示的に呼び出す必要があります。スーパークラスのコンストラクタを使用する時は super を使用します。スーパークラスのコンストラクタが引数を持つ場合は super(引数) のようにして使用します。
以下にサブクラスにコンストラクタを定義する例を示します。
class factoryEmp extends employee {
public workHour : number;
constructor() {
super();
this.workHour = 8;
}
}
スーパークラスのメンバを使用するには？
サブクラスでは、スーパークラスで定義されているプロパティやメソッドを使用することができます。ただし、スーパークラスのプロパティやメソッドに、アクセス修飾子の public や protected が付いていることが条件です。
以下に例を示します。
この例では、サブクラスのコンストラクタ内で、スーパークラスのプロパティの初期化をしています。
class factoryEmp extends employee {
public workHour : number;
constructor() {
super();
// スーパークラスのプロパティの初期化
this.empno = "999";
this.fullname = "";
this.age = 0;
// サブクラスのプロパティの初期化
this.workHour = 8;
}
}
コンパイルされたコードをみてみよう
上記のスーパークラスとサブクラスをコンパイルすると、以下のような JavaScript に変換されます。
随分と面倒なコードが吐き出されています。このことからもわかる通り、TypeScript を使用すると見やすくてシンプルな記述でコーディングできることがわかりますね。
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
// 社員クラス
var employee = /** @class */ (function () {
function employee() {
this.empno = "000";
this.fullname = "No name";
this.age = 20;
}
employee.prototype.doWork = function () {
console.log("業務中です");
};
return employee;
}());
var factoryEmp = /** @class */ (function (_super) {
__extends(factoryEmp, _super);
function factoryEmp() {
var _this = _super.call(this) || this;
// スーパークラスのプロパティの初期化
_this.empno = "999";
_this.fullname = "";
_this.age = 0;
// サブクラスのプロパティの初期化
_this.workHour = 8;
return _this;
}
return factoryEmp;
}(employee));
コメント