【TypeScript】super()の使い方理解する。(親Classのメソッドを使用、値を渡す)

2017年3/20日に追記
【TypeScript】__extendsが何をやっているか
こちらで説明しています。

superの使い方。理解が不足していたので改めてミニマムで動く奴を作ってみました。

super キーワード

• 親クラスのコンストラクタを呼ぶ際に使う。
• 子クラスから親クラスの「public」なメソッドにアクセスすることができる。

親のメソッドを使用する

こちらは子クラスから親クラスのメソッドを呼んでいます
実際のコード

ts

module A{
export interface IfaceA {
	name: string;
}
export interface IfaceB{
	name:string;
	num:number;
}

export class Kenji implements IfaceB{
	constructor(public name?:string, public num?:number){
	}
	get(){
		return 'eeee';
	}
	}
export class Kenji2 extends Kenji{
	constructor(public name?:string,public num?:number){
		super();//ここで呼び出す
	}
	get2(){
		return super.get()//superへのアクセス
	}
}
}
var ll = new A.Kenji('fafa',6)
var lk = new A.Kenji2()
alert(ll.get())//eeee
alert(lk.get2())//eeee

compile後のJS

js

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var A;
(function (A) {
    var Kenji = (function () {
        function Kenji(name, num) {
            this.name = name;
            this.num = num;
        }
        Kenji.prototype.get = function () {
            return 'eeee';
        };
        return Kenji;
    })();
    A.Kenji = Kenji;
    var Kenji2 = (function (_super) {
        __extends(Kenji2, _super);
        function Kenji2(name, num) {
            _super.call(this);
            this.name = name;
            this.num = num;
        }
        Kenji2.prototype.get2 = function () {
            return _super.prototype.get.call(this);
        };
        return Kenji2;
    })(Kenji);
    A.Kenji2 = Kenji2;
})(A || (A = {}));
var ll = new A.Kenji('fafa', 6);
var lk = new A.Kenji2();
alert(ll.get());
alert(lk.get2());

ちょっと書き方で「あれなんだっけな」と思ったのは
子クラスのsuperをどこで使うかでした。
上記の通りconstructore内ですね。

子クラスのインスタンスメソッド(get2)内で呼び出しています。

親に必要な値をsuperを使って渡す

下記のようにあるプロパティとあるメソッドに分けたClassをそれぞれ継承してきて子供がsuperで必要な値を渡すこともできる。

下記実際のコード

ts

class Person {
	constructor(public name:string){
	}
}
class PersonFunc extends Person{
	get(){
		alert(this.name + 'ちゃん!');//親のnameを参照
		//returnするものを定義
	}
}

class MoritaGetMajide extends PersonFunc{
	constructor(){
		//コンストラクタに引数は不要、ただ必要な値を親にわたす
		super('けんじ')//これ必要
	}
}
var fafa = new MoritaGetMajide();
fafa.get()//けんじちゃん

js

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var Person = (function () {
    function Person(name) {
        this.name = name;
    }
    return Person;
})();
var PersonFunc = (function (_super) {
    __extends(PersonFunc, _super);
    function PersonFunc() {
        _super.apply(this, arguments);
    }
    PersonFunc.prototype.get = function () {
        alert(this.name + 'ちゃん!'); //親のnameを参照
        //returnするものを定義
    };
    return PersonFunc;
})(Person);
var MoritaGetMajide = (function (_super) {
    __extends(MoritaGetMajide, _super);
    function MoritaGetMajide() {
        //コンストラクタに引数は不要、ただ必要な値を親にわたす
        _super.call(this, 'けんじ'); //これ必要
    }
    return MoritaGetMajide;
})(PersonFunc);
var fafa = new MoritaGetMajide();
fafa.get(); //けんじちゃん

いかがでしたか？
お腹すきましたか？？

参照書籍
TypeScriptリファレンス Ver.1.0対応
大規模開発でも小規模開発でも使える TypeScript実践入門