2016年12月01日

初めてのTypeScript (1) - 新規プロジェクトを作成してみる

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

ほんのすこし時間ができたので、久しぶりにブログ更新です。

12/4 追記
TypeScript Advent Calendar 2016があるのをこの記事をアップ後に知りました。
1日目が空いていたので、勝手ながら、TypeScript Advent Calendar 2016 の1日目の記事として登録させていただきました。

-----

TypeScript2.0が正式に公開されたとのことで、TypeScriptに興味が沸いてきたので、ちょこっと勉強してみました。 JavaScriptは初心者に毛が生えたレベル。TypeScriptはほとんど知識ゼロなので、もし、おかしな事書いていたら、指摘していただけるとありがたいです。

準備

Get TypeScript のページの "Visual Studio 2015" のリンクをクリックし、言語で Japanese を選択し、「TypeScript for Visual Studio 2015 - 日本語」をインストールします。

ちなみに、Visual Studio 2015 は、Update3 を適用している必要があるようです。

プロジェクトの作成

Visual Studio 2015を使い、新規プロジェクトの作成で、TypeScriptのプロジェクトを作成してみます。 プロジェクトの種類は、「TypeScriptを使用したHTMLアプリケーション」です。

作成されたプロジェクトには、app.ts というファイルが作成されています。これが、TypeScriptのソースファイルですね。

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

あわせて、index.htmlファイルも作成されています。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

scriptタグで、app.tsから変換されたJavaScriptのファイル app.js を読み込んでいます。 それ以外は、特筆すべき点はない、htmlファイルです。

読み込んでいるスタイルシートapp.cssは、こんな感じ。

body {
    font-family: 'Segoe UI', sans-serif;
}

span {
    font-style: italic;
}

app.tsを読んでみる

app.tsのコードを読んでみます。このコードで特徴的なのは、classを定義していること。それと、=> 使っていること。arrow式/arrow関数って言うらしいです。

C#プログラマには、とてもわかりやすいですね。JavaScriptをあまり知らなくても、何をやっているかがわかります。elementspantimerTokenは、フィールド、start(), stop() がメソッドですね。

C#と違って、変数宣言は、

HTMLElement element;  

ではなくて、

element: HTMLElement;  

なんですね。Pascalみたいです。

それと、コンストラクタは、クラス名ではなく、constructor キーワードを使うんですね。 C#のコードを見ていると、どれがコンストラクタなのか、パッと見にはわからないので、この書き方の方がスマートのように感じます。

早速、F5キーを押して動かしてみます。

おお、無事に動きました。って、何もコードいじってないので当たり前ですね。

ということは、Visual Studioが自動で、JavaScriptに変換してくれているんですね。

TypeScriptは、メンバーの可視性のデフォルトは、public みたいです。ここはC#と大きく異なるところですね。

ちょっと変更

そういえば、privateって使えるのかな? フィールドは、classの外から見る必要はないので、privateにしてみます。

private element: HTMLElement;
private span: HTMLElement;
private timerToken: number;

ビルドも通りました。

Visual Studio のエディタで、greeter. とタイプした時に表示される候補一覧の中には、もう、privateにしたメソッドは出てきません。

さらに、startメソッドの中の、this.timerTokenthis. を取り去ってみました。そしたら、ビルドエラー! C#と違って、this. は省略できないみたいです。

変換後のJavaScriptファイル

最後に、変換された jsファイルを載せておきます。このjs ファイルは、プロジェクトには追加されませんが、tsファイルと同一フォルダにありました。

var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }
    Greeter.prototype.start = function () {
        var _this = this;
        this.timerToken = setInterval(function () { return _this.span.innerHTML = new Date().toUTCString(); }, 500);
    };
    Greeter.prototype.stop = function () {
        clearTimeout(this.timerToken);
    };
    return Greeter;
}());
window.onload = function () {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

なるほど、startなどのメソッドは、prototypeに登録してくれているんですね。継承については特別なコードを書く必要はないということですかね。

JavaScript書く時にいつも混乱するthisですが、TypeScriptのthis とJavaScriptのthisは、違うってのも、このコード読むと分かりますね。

ちょっと驚いたのは、elementtimerTokenというフィールド定義が、JavaScriptのコードからは、なくなってしまっていること。

このあたりがJavaScriptらしさなのかな? C#プログラマの僕にはちょっと気持ち悪いです。

JavaScript と比べると、TypeScriptは行数が多めですが、見た目のごちゃごちゃ感が無くて、かえってすっきりしている気がします。ラムダ式(TypeScriptではアロー式)も使えるし、C#プログラマーにもわかりやすいです。



 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52479357