TypeScript始めました
ちょっと必要に迫られて、TypeScriptの勉強を始めました。
今までWeb系の技術はほとんどやったことなかったので、年末年始でちょろっと勉強してます。
まずは、お試しでVSで生成される雛形のプロジェクトを動かしてみました。
TypeScriptのプロジェクトを作ってみる
VSのウィザードで、TypeScriptのプロジェクトを作ってみます。
新しいプロジェクトのダイアログで、「TypeScriptを使用したHTMLアプリケーション」を選びます。
プロジェクトの構造
まずはウィザードで生成されたコードを見てみます。
プロジェクトはこんな構成になってます。
TypeScriptのtsファイルだけでなく、htmlやcssのファイルも一緒のプロジェクトに含まれています。
TypeScriptはJavaScritpへとコンパイルされ、そのJavaScriptのコードはブラウザ上で動作するためですね。
そのため、コンパイル結果のJavaScritpを読み込んでいるhtmlのページもプロジェクトに含まれる形になってました。
実行結果
実行してみると、以下のような画面が表示され、時刻表示が更新され続けます。
雛形のコード
続いて、各ファイルの中身をのぞいてみます。
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>
