Visual Studio2017でTypeScript
2017/06/07
テンプレート選択
![tstemp.png](/pub/pgmemo/image/typescript/.thumbnail/tstemp.png.jpg)
このあたりに専用のテンプレートがあったはずなのに見つからず。
VS2017インストール時の選択漏れかもしれませんが、JavaScriptを利用するテンプレートなら何でもいいので、一番揃っているMVCを選択。
![tsgreeter010.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter010.png.jpg)
![tsgreeter020.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter020.png.jpg)
チュートリアルにサーバーとの連携部分は無いので、Web APIにチェックは入れず。
appフォルダ作成
チュートリアルにはありませんが、tsを入れるフォルダを作成。フォルダ名はappだと一番上に来て探しやすいので好きです。
![tsgreeter030.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter030.png.jpg)
appフォルダにgreeter.tsファイルを追加
![tsgreeter040.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter040.png.jpg)
appフォルダを右クリック→追加→新しい項目と選択。
![tsgreeter050.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter050.png.jpg)
「TypeScript ファイル」のテンプレートを選択。
テンプレートの中身は空です。
greeter.tsにコードを追加
![tsgreeter060.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter060.png.jpg)
追加して保存すると、普段より時間がかかります。
それもそのはず、保存と同時にjsに変換されるようです。
「全てのファイルを表示」すると2つのファイルが出来上がっています。
Viewから出来上がったjsにリンク
HomeControllerのIndexを使いました。不要部分をざくっと消してjsで置き換えるためのh1タグとjsへのリンクを追加。
![tsgreeter062.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter062.png.jpg)
greeter.tsを修正
修正後保存を忘れずに。![tsgreeter064.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter064.png.jpg)
実行
![tsgreeter070.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter070.png.jpg)
発行
![tsgreeter080.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter080.png.jpg)
プロジェクトを右クリックだと「公開」になってる…
![tsgreeter090.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter090.png.jpg)
発行先フォルダのapp内。なぜかgreeter.js.mapまで発行されていますが、要らないような?
違う型を入れると怒られます
![tsgreeter100.png](/pub/pgmemo/image/typescript/.thumbnail/tsgreeter100.png.jpg)
感想
環境の構築は全く不要、コンパイルも自動でしてくれる、で非常に敷居が低かったです。型のチェックもありがたいですが、慣れた感じ(定義が後ろにあってC#よりはVBっぽい気もしますが、VBより違和感無い)の書き方でJavaScriptが書けるというのがありがたみ大きい気がします。クロージャとかプロトタイプとか苦手なんで…。