シンプルなTypeScriptアプリケーションを作成する - TypeScript
非常に単純なTypeScriptアプリケーションを作成して、TypeScriptの動作を確認します。
手順
プロジェクトの作成、TypeScriptファイルの追加
Visual Studioを起動し、ASP.NETのプロジェクトを作成します。
[ソリューション エクスプローラ]のプロジェクトのノードをクリックして選択し右クリックします。ポップアップメニューが表示されますので、[追加]メニューの[新しい項目]をクリックします。
[新しい項目の追加]ダイアログが表示されます。
左側のツリービューの[Web]のノードの[スクリプト]の子ノードをクリックして選択します。下図の画面が表示されます。右側にTypeScriptファイルの項目が表示されることが確認できます。
右側のリストから[TypeScript ファイル]をクリックして選択します。ダイアログ右下の[追加]ボタンをクリックしてTypeScript ファイルを追加します。
"file1.ts"の名称でTypeScriptファイルが追加されました。
TypeScriptファイルへの実装
作成したfile1.tsに下記のコードを記述します。
console.log('Hello TypeScript World.');
続いてTypeScriptを呼び出すHTMLファイルを記述します。先ほどと同様の手順で、プロジェクトにHTMLファイルを追加します。追加したHTMLファイルに下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="file1.js"></script>
</head>
<body>
</body>
</html>
解説
TypeScriptファイルのコードは、コンソールに "Hello TypeScript World." の文字列を出力するコードです。
console.log('Hello TypeScript World.');
HTMLファイルは下記のscriptタグでTypeScriptのファイルを読み込みます。TypeScriptファイル(tsファイル)はコンパイルされJavaScriptのファイルになるため、scriptタグで読み込むのはtsファイルがコンパイルされたJavaScriptのファイルを指定します。tsファイルの拡張子をjsにしたファイル名を指定します。
<script type="text/javascript" src="file1.js"></script>
実行結果
プロジェクトを実行します。SimpleDemo1.html をWebブラウザで表示します。ページには何も表示されませんがデバッグツールでコンソールの出力を確認すると、"Hello TypeScript World."の文字列が出力できていることが確認できます。
tsファイルがコンパイルされた結果のJavascriptファイルも同じディレクトリに配置されています。
プログラム例
画面に文字列を表示するプログラムを作成します。
プロジェクトに file2.ts の名称でTypeScriptのファイルを追加します。また、TypeScriptを呼び出す SimpleDemo2.html の名称のHTMLファイルを追加します。
下記のコードを記述します。
コード
function TextOut() {
var elem: HTMLElement = document.getElementById("output");
elem.innerHTML = "ようこそ TypeScriptの世界へ。";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="file2.js"></script>
</head>
<body onload="TextOut();">
<h1>テストページ</h1>
<div id="output"></div>
</body>
</html>
解説
HTMLElement型の変数elemを宣言します。document.getElementById()メソッドを呼び出し、elem変数に"output"のIDを持つ要素を代入します。
var elem: HTMLElement = document.getElementById("output");
取得した要素のinnerHTMLのプロパティに"ようこそ TypeScriptの世界へ。"を設定します。この処理でoutputのIDタグを持つ要素の位置に"ようこそ TypeScriptの世界へ。"の文字列を表示します。
elem.innerHTML = "ようこそ TypeScriptの世界へ。";
実行結果
上記のプロジェクトを実行し、WebブラウザでSimpleDemo2.htmlファイルを表示します。
下図の画面が表示されます。"output"のIDを設定したdivタグ内に「ようこそ TypeScriptの世界へ。」のメッセージが表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2018-03-13
作成日: 2018-03-13
