クラスの定義 [TypeScriptのClass]

印刷

内容は公式ページとだいたい同じなので、そちらも参照のこと。 http://www.typescriptlang.org/Handbook^[1]

ページ内コンテンツ

クラスの定義
継承
アクセス修飾子
- 引数のアクセス修飾子
アクセサー
スタティック変数

クラスの定義 ^[2] ^[3]

TypeScript^[4]ではプロトタイプベースではない、Javaなどと同様のクラス定義が使える。ただし、「this」は省略不可。コンストラクタはクラス名ではなく「constructor」。プロパティやメソッドの定義に「var」や「function」は不要。

class TestClass{
    prm1:number;
    
    constructor(arg:number){
        this.prm1 = arg;
    }
    showNumber():void{
        alert(this.prm1 + "です");
    }
    
}

var testClass:TestClass = new TestClass(2);

testClass.showNumber();//=>2です

継承 ^[5] ^[6]

extendsを使うと継承も可能。親クラスにはsuperでアクセス。子クラスのコンストラクタは処理が同じなら省略可能。

class TestClass{
    prm1:number;
    
    constructor(arg:number){
        this.prm1 = arg;
    }
    showNumber():void{
        alert(this.prm1 + "です");
    }
    
}

class TestExtended extends TestClass{
    
    showNumber(){
        this.prm1 ++;
        super.showNumber();
    }
}


var testExtended:TestExtended = new TestExtended(2);

testExtended.showNumber(); // => 3です

アクセス修飾子 ^[7] ^[8]

アクセス修飾子は「public」と「private」がある。省略したときはpublicが採用される。 publicはどこからでもアクセス可能で、privateはそのクラスの中からのみアクセス可能。privateを指定すると継承したクラスからもアクセスできない。たとえば上の例で

private prm1:number;

とすると、継承したクラスでprm1にアクセスしているため、エラーが発生する。

引数のアクセス修飾子 ^[9] ^[10]

アクセス修飾子をコンストラクタの引数で使うとクラスプロパティの初期化のシンタックスシュガーとなる。つまり

class TestClass{
   
   constructor(public prm1:number){ }
   
}

と

class TestClass{
   prm1:number;
   
   constructor(arg:number){
       this.prm1 = arg;
}

は同じである。ただしコンストラクタ以外の引数でアクセス修飾子は使えない。

アクセサー ^[11] ^[12]

getやsetといったアクセサーが使える。ただし、ECMAScript 5でないと対応していないため、コンパイル時に設定が必要。また対応していないブラウザでエラーが出るかも。

tsc -t ES5 yourfile.ts

文法は以下の通り。

class TestClass{
    private _prm1:number;
    
    get prm1():number{
        return this._prm1;
    }
    set prm1(p:number){
        this._prm1 = p;
    }
    
    
    showNumber():void{
        alert(this.prm1  + "です");
    }
    
}
var tc:TestClass = new TestClass();
tc.prm1 = 10;
tc.showNumber() // => 10です

スタティック変数 ^[13] ^[14]

インスタンスではなく、クラスに属するスタティック変数を定義することもできる。

class TestClass1{
    static prm:number = 1;
    
    
    showPrm(){
        alert(TestClass1.prm);
    }
}

TestClass1.prm = 100;

var tc:TestClass1 =new TestClass1();

tc.showPrm() // => 100

Last-modified: 2016-03-12 (土) 12:05:08 (JST) (2959d) by njf

Links list

(This host) = https://njf.jp

http://www.typescriptlang.org/Handbook
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AEClass#b96dc364
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AEClass&paraid=b96dc364
^{(This host)}/cms/modules/xpwiki/?TypeScript
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AEClass#i01186ac
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AEClass&paraid=i01186ac
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AEClass#e79aed65
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AEClass&paraid=e79aed65
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AEClass#y3ce730b
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AEClass&paraid=y3ce730b
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AEClass#haa297e3
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AEClass&paraid=haa297e3
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AEClass#b92a80f6
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AEClass&paraid=b92a80f6

TypeScriptのClass :: NJF Wiki

クラスの定義 [2] [3]

継承 [5] [6]

アクセス修飾子 [7] [8]

引数のアクセス修飾子 [9] [10]

アクセサー [11] [12]