はじめに
その７でようやく「Hello world!」をやります。
ブラウザへ「Hello world!」を出力するだけのサンプルです。
TypeScriptから生成されるJavaScriptとの差を確認してみましょう。
前提
- Visual Studio Codeがインストール済み
- Node.js/npmがインストール済み
- gitからSampleをダウンロードして任意のディレクトリに解凍済み
- View In Browserがインストール済み(Market Placeより)
- OSはWindows7/10を想定
サンプル greeter
Hello worldの文字列をブラウザ出力するサンプル。
greeter : 挨拶
ファイル構成
| パス | ファイル名 | 説明 |
|---|---|---|
| . | greeter.html | Hello world出力のhtml |
| . | greeter.js | greeter.tsのコンパイルにて作成されたJavaScriptファイル |
| . | greeter.js.map | greeter.tsのコンパイルにて作成されたmapファイル |
| . | greeter.ts | Hello woldを出力するTypeScriptファイル |
| . | README.md | このサンプルの説明と使用方法 |
| . | tconfig.json | TypeScriptのコンパイルコンフィグファイル |
クラス図・フローチャート
実行
cd ./greeter
tsc --sourcemap greeter.ts
greeter.htmlをエディターで表示Ctrl+F1
結果
ポイント
greeter.ts
① Greeterクラス
constructorはクラスが実体化（オブジェクト作成）した時に自動で処理されます。
string型のパブリックな引数を受け取ります。
次にパブリックなgreet関数を定義します。
この関数では、constructorで受け取った引数をブラウザ出力文字列に編集して戻り値としています。
② greeterオブジェクトの作成
Greeterクラスに"Hello world!"を引数としてgreeterオブジェクトを作成します。
③ documentオブジェクトへ出力設定
documentoオブジェクトのメンバーbodyのプロパティinnerHTMLへgreeterオブジェクトのgreet関数の戻り値を設定します。
greeter.js
① Greeterクラス
/** @class **/でclassを定義します。greet関数をGreeter.prototypeとして定義します。
②③ Greeterクラス/greeterオブジェクトの作成
TypeScriptと同じコーディングになります。
TypeScriptのclassのコーディングはJavaScriptより明らかにシンプルです。
ノート
TypeScript入門のサンプル。
コーディングの注意点として、セミコロン(;)に気をつけましょう。
TypeScriptのclass定義の最後はセミコロン。
TypeScriptのclass定義内のメンバーの最後にセミコロン不要。
まとめ
この業界（IT?)のお約束の初めての出力はいつのまにかHello world!になっています。
次世代の新しい言語を作られる方は、もっとパッションのある気の利いた文言をぜひ出力して欲しいです。
以上、おそまつ