TypeScriptで始めるJavascript再入門(1)

javascript

Javaなどのクラスベースオブジェクト指向言語を知っている人が最新のJavascriptを知る場合、Typescriptを使うのが良い方法です。

TypeScript - JavaScript that scales.は、マイクロソフトが開発しているaltJSの一つです。 TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっています。

使い方

Typescriptは、.tsという拡張子を持つファイルに記述し、tscというコマンドでjavascriptにコンパイルします。コンパイルオプションは、tsconfig.jsonファイルに記述します。

$ cat age.ts
let age: number = 10;
console.log(age + ‘歳です。’);

$ cat ./tsconfig,json
{
    "buildOnSave": true,
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "module": "commonjs",
        "charset": "utf8"
    }
}

$ tsc -p ./tsconfig,json

$ cat age.js
let age = 10;
console.log(age + '歳です。');

静的型付け

Typescriptは、静的型付け可能な言語のため、次のコードはコンパイルエラーになります。javascriptの暗黙型変換によるバグを未然に防ぐことができます。

let age: number = 10;
age += '1';
$ tsc -p ./tsconfig,json
error TS2322: Type 'string' is not assignable to type 'number'.

クラス

クラスは、javascriptのバージョンに応じてコンパイルしてくれます。javascriptのバージョンごとの記述方法を調べる方法としてTypescriptを使うのも良さそうです。

class car {
    speed:number;
    private _ownerName:string;

    accelarator(accelarateSpeed:number)
    {
        this.speed += accelarateSpeed;
    }

    public get ownerName():string {
        return this._ownerName;
    }
    public set ownerName(name:string) {
        this._ownerName = name;
    }
}

このクラスをes5準拠でコンパイルすると以下のjavascriptファイル(car.js)が生成されます。

var car = /** @class */ (function () {
    function car() {
    }
    car.prototype.accelarator = function (accelarateSpeed) {
        this.speed += accelarateSpeed;
    };
    Object.defineProperty(car.prototype, "ownerName", {
        get: function () {
            return this._ownerName;
        },
        set: function (name) {
            this._ownerName = name;
        },
        enumerable: true,
        configurable: true
    });
    return car;
}());

es2015(es6)準拠でコンパイルすると以下のjavascriptファイル(car.js)が生成されます。

class car {
    accelarator(accelarateSpeed) {
        this.speed += accelarateSpeed;
    }
    get ownerName() {
        return this._ownerName;
    }
    set ownerName(name) {
        this._ownerName = name;
    }
}

インタフェース

microsoft独自仕様としてTypescriptはinterfaceを使うことができる。コンパイル時に必須メソッドチェックなどを行ってくれます。

interface vehicle
{
    speed:number;
    accelarator(accelarateSpeed:number);
}
class car implements vehicle {
    speed:number;
    private _ownerName:string;

    accelarator(accelarateSpeed:number)
    {
        this.speed += accelarateSpeed;
    }

    public get ownerName():string {
        return this._ownerName;
    }
    public set ownerName(name:string) {
        this._ownerName = name;
    }
}
class motorcycle implements vehicle {
    speed:number;

    accelarator(accelarateSpeed:number)
    {
        this.speed += accelarateSpeed;
    }
}

リンク