「TypeScript」extends、superでクラスの継承を実装するサンプル

2022年1月22日

環境
Windows10 64bit
TypeScript 4.4.4

書式

class 親クラス名 {
変数名:データの型;
constructor(変数名: string…) {
this.変数名 = 変数名;
}
関数名() {
処理コード
}
}
class 子クラス extends 親クラス{
constructor(変数名: データの型…) {
super(親クラスの変数…);
this.変数名 = 変数名;
}
}

使用例

//親クラスEmployeeの定義
class Employee {
      //メンバー変数の定義
    name: string;
    age: number;
      
      //親クラスのコンストラクタの定義
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
      //メソッドshowNameの定義
    showName() {
        console.log('名前:' + this.name)
    }
      //メソッドshowAgeの定義
    showAge() {
        console.log('年齢: '+this.age)
    }
}
//extendsで親クラスを継承
class Person extends Employee {
    dept: string;
      
      //子クラスのコンストラクタ
    constructor(name: string, age: number, dept: string) {
            //親クラスのnam、age変数を継承
        super(name, age);
            //自クラスのメンバー変数dept
        this.dept = dept;
    }
   //メソッドshowDeptの定義
    showDept() {
        console.log('部署: '+this.dept)
    }
}
//子クラスのインスタンス生成
const cft = new Person('山田　太郎', 23, '事業推進部');
console.log("親クラスのメソッドを呼び出す")
cft.showName();    
cft.showAge();   
console.log("自身クラスのメソッドを呼び出す")  
cft.showDept();

実行結果
C:\typescript>tsc
C:\typescript>ts-node arkgame.js
親クラスのメソッドを呼び出す
名前:山田　太郎
年齢: 23
自身クラスのメソッドを呼び出す
部署: 事業推進部