はじめに

MicrosoftがJavaScriptに業を煮やして作ったのがTypeScript、Classを定義できC#やJavaみたいに型を指定できるところがJavaScriptとの違い、JavaScriptからの脱却あるのみ、もちろん他にも手段はあるが、tscコマンドを叩くと~.tsファイルから~.jsファイルができるというおいしいところを選択せずして何をかいわんやです。Microsoftが提供しているサンプルをひとつずつ試してみた備忘録を投稿していきます。

前提

サンプル amd

ブラウザへ現在の日付と時刻を出力するサンプル。

ファイル構成

ファイル名 説明
app.css スタイルシート
app.js app.tsのコンパイルにて作成されたJavaScript
app.js.map app.tsのコンパイルにて作成されたmapファイル
app.ts greeterを実行するTypeScript
default.html ブラウザ出力用のhtml
greeter.js greeter.tsのコンパイルにて作成されたJavaScript
greeter.js.map greeter.tsのコンパイルにて作成されたmapファイル
greeter.ts ブラウザへ日付と時刻を出力するTypeScript
README.md このサンプルの説明と使用方法
tsconfig.json TypeScriptのコンパイルコンフィグファイル

クラス図とフローチャート

TS_002.jpg
TS_003.jpg

実行

cd ./amd
tsc --sourcemap --module amd app.ts
start default.html

結果

TS_001.jpg

ポイント

default.htmlにコーディングされている13行目のrequire.jsにこのサンプルのapp.jsを引数として渡して、実行させています。
amdについてはここ

default.html抜粋
 <!--
        require.js will use the value of the 'data-main' attribute in the following
        script tag to load 'app.js' after require.js itself loads.
    -->
<script data-main="app" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>

ノート

TypeScrpitのクラスの基本構造をメモしておきます。
constructorはクラスのインスタンスを作成すると呼び出されプロパティの初期化を行います。
TS_004.jpg

ts-->js変換

肝心のtscコマンドでどのような変換をしているのか、前ソースgreeter.tsと後ソースgreeter.jsを比較してみます。
TypeScriptのシンプルさは抜群です。C#を連想するコーディングは魅力的です。
TS_005.jpg
※左greeter.ts、右greeter.js

まとめ

TypeScriptて何と聞かれたら、伝説のプログラマ「アンダース・ヘルスバーグ」が開発したJavaScriptのスーパーセットでかつトランスコンパイラだよと答えましょう。

以上、おそまつ

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.