Visual StudioでTypeScript
Visual StudioでTypeScriptを使ってみます。
環境はVisual Studio 2015です。
TypeScriptのプロジェクト作成
ファイル->新規作成->プロジェクトでプロジェクト作成ダイアログを開きます。
テンプレートからTypeScriptを使用したHTMLアプリケーションを選択します。
構成
このテンプレートには画面とTypeScriptファイルとcssのみが含まれています。
app.tsでは時間を画面に表示する処理が書かれているようです。
app.ts
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(); };
画面ではトランスパイルしたjsファイルをソースに指定します。
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>
ビルド
ソリューションをビルドしてみます。
ビルドするとtsがjsにトランスパイルされます。
app.js
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(); }; //# sourceMappingURL=app.js.map
実行
ソリューションを実行すると下記画面が表示されます。
TypeScriptのビルド設定
ソリューションを右クリックし、プロパティを表示します。
左側にあるTypeScriptビルドを選択すると設定が表示されます。
まとめ
Visual StudioでビルドするとTypeScriptファイルはJavaScriptファイルにトランスパイルされます。
画面で読み込む際にはトランスパイルされた.jsファイルを参照しましょう。