読者です 読者をやめる 読者になる 読者になる

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

TypeScript始めました

TypeScript

ちょっと必要に迫られて、TypeScriptの勉強を始めました。


今までWeb系の技術はほとんどやったことなかったので、年末年始でちょろっと勉強してます。
まずは、お試しでVSで生成される雛形のプロジェクトを動かしてみました。

TypeScriptのプロジェクトを作ってみる

VSのウィザードで、TypeScriptのプロジェクトを作ってみます。
新しいプロジェクトのダイアログで、「TypeScriptを使用したHTMLアプリケーション」を選びます。
f:id:minami_SC:20150104221125p:plain:w400

プロジェクトの構造

まずはウィザードで生成されたコードを見てみます。
プロジェクトはこんな構成になってます。
f:id:minami_SC:20150104221203p:plain


TypeScriptのtsファイルだけでなく、htmlやcssのファイルも一緒のプロジェクトに含まれています。
TypeScriptはJavaScritpへとコンパイルされ、そのJavaScriptのコードはブラウザ上で動作するためですね。
そのため、コンパイル結果のJavaScritpを読み込んでいるhtmlのページもプロジェクトに含まれる形になってました。


実行結果

実行してみると、以下のような画面が表示され、時刻表示が更新され続けます。
f:id:minami_SC:20150104221219p:plain

雛形のコード

続いて、各ファイルの中身をのぞいてみます。

app.ts

TypeScriptのコードです。
一定間隔で、htmlのspan要素を更新し続ける処理を行うGreeterというクラスが定義されています。
そして、windowのonloadイベントで、Greeterクラスのインスタンスを作成して、startメソッドを呼び出して時刻表示の更新を開始します。

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

ここで見ておくのは、head要素。
app.cssとapp.jsを読み込みます。
app.tsではなく、TypeScriptのコンパイル結果となるapp.jsという名前のファイルを読み込んでいる点に注意。

<!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>
app.css

普通のcssなので、ここは省略

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

span {
    font-style: italic;
}

今までJavaScriptのコードがどうしても自分の中で馴染まない。。。と苦手意識を持ってましたが、これなら何とかやっていけそうな気がしてきました。
TypeScriptって、巷でよく言われている通り、C/C++C#Javaなどのような静的型付け言語を使ってた人には取っ付きやすそうな言語、という印象ですね。