Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

つい先日 Microsft が「TypeScript」という新たな JavaScript 系言語を発表しました. Dart, CoffeeScript, JSX 同様 JavaScript に変換して実行することができます.

導入が簡単だったのでさっそく使ってみました.

screenshot

Table of contents

TypeScript とは

TypeScript とは, 大規模なアプリケーション開発のための言語です. JavaScript のスーパーセットで JavaScript に変換して実行することができます.

どんな環境でも使えるオープンソースです.

原文はこちら

TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

Link

主な機能はこちら

  • 静的型付け(オプション)
  • クラス宣言
  • モジュール・サポート
  • Visual Studio プラグイン

up

TypeScript をインストールしよう

TypeScript は Node.js 用のモジュールを提供しており これを使うことで簡単にコンパイルすることができます.

下記のコマンドを実行するだけでインストール完了です.

npm install -g typescript

npm を使ってグローバルインストールしています.

up

実際に動かしてみよう

私のサイトではお馴染み Vector2 実装です. Dart の時も JSX の時も作ったやつです.

拡張子は .ts です.

vector.ts というファイルを作って下記のコードを入力します.

/*
 * vector.ts
 */


class Vector2 {
    x: number;
    y: number;
    
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    
    set(x: number, y: number) {
        this.x = x;
        this.y = y;
        return this;
    }
    
    length() {
        return Math.sqrt(this.x*this.x + this.y*this.y);
    }
    
    normalize() {
        var len = this.length();
        this.x /= len;
        this.y /= len;
        return this;
    }
    
    toString() {
        return "(" + this.x + "," + this.y + ")";
    }
    
    log() {
        console.log( this.toString() );
    }
}


window.onload = function() {
    var v = new Vector2(3, 4);
    
    // v
    console.log("v: " + v.toString());
    // length test
    console.log("length: " + v.length());
    // normalize test
    v.normalize();
    console.log("v: " + v.toString() + ", " + "length: " + v.length());
};

▲vector.ts

そして, 下記のコマンドを実行します.

tsc vector.ts

すると vector.ts と同じディレクトリに vector.js というファイルが出力されます.

ちなみに変換結果はこれです.

var Vector2 = (function () {
    function Vector2(x, y) {
        this.x = x;
        this.y = y;
    }
    Vector2.prototype.set = function (x, y) {
        this.x = x;
        this.y = y;
        return this;
    };
    Vector2.prototype.length = function () {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    };
    Vector2.prototype.normalize = function () {
        var len = this.length();
        this.x /= len;
        this.y /= len;
        return this;
    };
    Vector2.prototype.toString = function () {
        return "(" + this.x + "," + this.y + ")";
    };
    Vector2.prototype.log = function () {
        console.log(this.toString());
    };
    return Vector2;
})();
window.onload = function () {
    var v = new Vector2(3, 4);
    console.log("v: " + v.toString());
    console.log("length: " + v.length());
    v.normalize();
    console.log("v: " + v.toString() + ", " + "length: " + v.length());
};

▲vector.js

これを普通の js 同様 html ファイルの script タグで読みこめば同じように 実行できます.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vector | TypeScript Test</title>
        <script src="../ts/vector.js"></script>
    </head>
    <body>
        <h1>Vector | TypeScript Test</h1>
    </body>
</html>

実行結果はこちら. Console に出力してます.

v: (3,4) vector.js
length: 5 vector.js
v: (0.6,0.8), length

ちなみにサンプルは GitHub にアップしてます.

GitHub

up

まとめ

一応公式サイトのサンプルはひと通り目を通しました. 位置づけとしては JavaScript と CoffeeScript の間といったところでしょうか？

Dart 寄りですが, JS のコード貼っつけても動くのは Good! 正当進化を目指しているのかも.

ECMA の委員会で作成しているらしいのでガンガン新しい仕様を取り入れて進化していってくれると嬉しいですね.

個人的には CoffeeScript 推しなので, まだ使うにはどうかなぁ～って感じです.

これきっかけで Node.js も普及してくれると嬉しいな♪ もうちょい触ったらまた改めてレビュー書きます!!

なんか Windows8 アプリは TypeScript で作ってくださいねぇ 的な流れになりそう.

up

Reference

参考にさせて頂いたサイトです.

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT