TypeScriptでクラスを扱った後、さらにコードを短くしてみる。

TypeSctiptとは

TypeScriptとはマイクロソフト製のjavascript用トランスコンパイラー言語です。
TypeScriptをコンパイルすることによってjavascriptが生成されます。
パラダイムとしては静的型付け、クラスペースのオブジェクト指向型言語です。javascriptの文法にこのようなパラダイムを加えた言語です。

クラスを作ってみる

main.ts

class Person {
    private name: string;
    private age: number;
    private job: string;
    constructor(name: string, age: number, job: string) {
        this.name = name;
        this.age = age;
        this.job = job;
    }
    public getName(): string {
        return this.name;
    }
    public getAge(): number {
        return this.age;
    }
    public getJob(): string {
        return this.job;
    }
    public setJob(job: string): void {
        this.job = job;
    }
}

とりあえず他のクラスベースの静的型付け言語風(Java風)に書いてみるとこんな感じです。

まずインスタンス変数について説明します。

main.ts

private name: string;
//アクセス修飾子 変数名: 型という形式 

TypeScriptで使えるアクセス修飾子はprivateおよびpublicです。何も指定しないとpublicになるようです。
使えるプリミティブ型はnumber,string,booleanの３つです。また、何でも入るany型も存在します。

コンストラクターは以下の用に記述します。

main.ts

constructor() {
}
//constractor(引数名: 型){
//}

次はメソッドについて説明します。

main.ts

public getName(): string {
    return this.name;
}
//アクセス修飾子 メソッド名(引数名: 型): 返却値型 {
//     内容 
//}

メソッド内などでインスタンス変数を使うときはthisが必須となります。記述しないとエラーになります。

作ったクラスを使ってみる

まずはオブジェクトを生成してみます。

main.ts

var person: Person = new Person("太郎", 25, "大工");
// var インスタンス変数名: 型　= new クラス名(引数);

変数を宣言するときはおなじみのvarを使います。new演算によってオブジェトを生成して代入します。

main.ts

person.getName();//太郎
person.setJob("政治家");

メソッド呼び出しはかなり普通です。

記述を短くしてみる

main.ts

class Person {
    constructor(private name: string, private age: number, private job: string) {
    }
    getName(): string {
        return this.name;
    }
    getAge(): number {
        return this.age;
    }
    getJob(): string {
        return this.job;
    }
    setJob(job: string) {
        this.job = job;
    }
}

色々削って短くなりましたが機能的には同じ記述です。

まずコンストラクターから

main.ts

constructor(private name: string, private age: number, private job: string) {
}
//constractor(private 引数名: 型){
//}

このように引数の前にprivateをつけることによってコンストラクターのPOJOっぽい部分を消すことが出来ます。
具体的にはコンストラクター内の代入が消えてインスタンス変数も消えました。

メソッドの前のアクセス修飾子は前述したようになかった場合publicとなるので省略できます。

main.ts

setJob(job: string) {
   this.job = job;
}

返却値がvoidの場合は省略が可能です。

アクセサを使ってみる

アクセサを使用するためにはECMAScript 5の機能を使用するため以下のようにオプションを指定する必要があります。

$ tsc --target es5 ファイル名

main.ts

get name(): string{
   return this.name;
}
set job(job: string) {
   this.job = job;
}

のようにget,setをつけることが出来ます。

main.ts

person.name //太郎
person.job = "大工"

のようにアクセスできます。

しかし以前のコードにこれを付け加えるとエラーがおきます。クラス内部でメソッド名と変数名の２つで同じ名前の物があるためです。どちらかの名前を変える必要があります。引数名を変更するのは少し気が引けますがこんな感じです。

main.ts

constructor(private _name: string, private _age: number, private _job: string) {
}

メソッド名を変更するならこんな感じ

main.ts

get _name(): string{
   return this.name;
}
set _job(job: string) {
   this.job = job;
}

どちらがいいのでしょうかねー・・・

生成されるjavascript

いろいろあって最終的に

main.ts

class Person {
    constructor(private _name: string, private _age: number, private _job: string) {
    }
    get name(): string {
        return this._name;
    }
    get age(): number {
        return this._age;
    }
    get job(): string {
        return this._job;
    }
    set job(job: string) {
        this._job = job;
    }
}
var person: Person = new Person("太郎", 22, "大工");
person.job = "政治家";
console.log(person.name);//太郎

のようなTypeScriptになりました。

これをコンパイルすると

main.js

var Person = (function () {
    function Person(_name, _age, _job) {
        this._name = _name;
        this._age = _age;
        this._job = _job;
    }
    Object.defineProperty(Person.prototype, "name", {
        get: function () {
            return this._name;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Person.prototype, "age", {
        get: function () {
            return this._age;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Person.prototype, "job", {
        get: function () {
            return this._job;
        },
        set: function (job) {
            this._job = job;
        },
        enumerable: true,
        configurable: true
    });
    return Person;
})();
var person = new Person("太郎", 22, "大工");
person.job = "政治家";
console.log(person.job);

のような比較的きれいなjavascriptが生成されます。

まとめ

生成されたjavascriptに対してTypeScriptで記述する量はかなり短いと思います。生成されるjavascriptも他のaltjsに比べてきれいと言われています。もしjavascriptアレルギーの方がいましたら是非挑戦してみてください。