2015.02.28

TypeScriptをやるための環境をつくる

最近、筋肉痛が運動後２日後に来る佐藤です。

年齢には勝てないんでしょうか・・・・（泣）

さて、お勉強として、話題になってるTypeScriptをやってみようということで

環境構築してみました。

TypeScriptとは・・・という説明はググればいっぱい出てきますので、おいておきます。

前提

私はCentOS6を使用していつも開発しているので、こちらにインストールしていきます。

構築

まず、Node.jsとnpmパッケージをインストールします。

yumでインストールするには、EPELリポジトリにrpmパッケージがありましたので

このリポジトリを追加します

rpm -ivh http://ftp-srv2.kddilabs.jp/Linux/distributions/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm

Node.jsとnpmインストール

yum -y --enablerepo=epel install npm nodejs

inheritsのインストール

npm install -g inherits

TypeScriptのインストール

npm install -g typescript

TypeScriptのインストールが完了するとコンパイラのコマンドが実行できます。

tsc --help

これでとりあえず、試せる環境が整いました。
早速、TypeScriptのサイトのチュートリアル（http://www.typescriptlang.org/Tutorial）をやってみます。
いきなりページ後ろの方にあるgreeterのES6のclassの書き方をしてみます。

greeter.tsを作成 (TypeScriptだから拡張子tsですね。）

class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}
interface Person {
    firstname: string;
    lastname: string;
}
function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

それで、このファイルをコンパイルしてみます！

tsc greeter.ts

 

すると、同階層にgreeter.jsが生成されました！
中身は以下のようになりました。

var Student = (function () {
    function Student(firstname, middleinitial, lastname) {
        this.firstname = firstname;
        this.middleinitial = middleinitial;
        this.lastname = lastname;
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
    return Student;
})();
function greeter(person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

おおっ！JavaScriptがきれいに作られてますね。
では、このJSが動くかHTMLに記述してみましょう。

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

ブラウザでこのHTMLを確認すると

ts

表示されました！！

最後に

とりあえず、インストール⇒コンパイル⇒表示までは出来ました。
実際は、エディタにシンタックスいれたり、補完いれたりでしょうか。
次は、実際にサイトで使った例を出せればと思います。