どうも、ぽっぽです。
Documentation · TypeScriptのハンドブックを読んでいるだけだと楽しくないし実際に書いてみたいと思いませんか。手を動かして書くと読むだけより新しい発見があります。
TypeScriptを動作させる一番簡単な方法はTypeScript Playgroundを使うことです。
でも、やっぱりローカル環境を構築してみたいものです。調べたり動作を確認したソースをローカル環境に保存しておく事ができるので便利です。
Gulpを使った環境設定
チュートリアルにあるGulp · TypeScriptを試してみます。
GitHub – hatpoppo/first-typescript: TypeScriptを勉強するために、チュートリアルを読んでWatchfyまで実装して動作を確認したソースを保存しました。ここまでの設定で動作を確認するだけなら問題ないと思いました。以降は実際に本番環境へリリースするために必要なタスクになります。
チュートリアルに記載されているとおりなので、もしチュートリアルとおりやっても動かないということがあれば、利用してみてください。
チュートリアルで実施した作業は必要なモジュールをインストールします。
npm install --save-dev typescript gulp@4.0.0 gulp-typescript
npm install --save-dev browserify tsify vinyl-source-stream
npm install --save-dev watchify fancy-logそして、gulpの動作を記述するgulpfile.jsとTypeScriptの設定ファイルtsconfig.jsonを記述することです。
Gulpとは
gulp.js – The streaming build systemはタスクを自動化するツールです。タスクとは今回の場合TypeScriptからJavaScriptに変換する作業などです。このチュートリアルを試すと、ソースを保存すると自動で変換まで行ってくれるようになります。
TypeScriptの使い方
そもそもTypeScriptはJavaScriptに変換したJavaScriptを使います。TypeScript in 5 minutes · TypeScriptを実践するとわかることですが、任意のTypeScriptファイルをJavaScriptに変換するには次の手順を実行してJavaScriptに変換し、そのJavaScriptを実行することになります。
tsc greeter.ts出力としてgreeter.jsが出力されます。出力されたJavaScriptファイルを実行して動作を確認します。
この手間を自動で行えるようになります。
いろいろなツールを利用する
変換するタスクだけでなく、ブラウザに表示するまで自動的に行います。そのためには別のツールBrowserifyを利用します。
またwatchモードにするとソースを更新するたびにBrowserifyがリコンパイルを実行してくれます。
実行結果を確認するには、dist/index.htmlをブラウザにドラッグ・アンド・ドロップして確認します。次回のソース更新時にはブラウザはF5キーなどでブラウザの内容を再読み込みの手間は残ります。
エディタにVSCodeを利用しているなら、Live Serverという拡張機能をインストールしてdist/index.htmlに対して起動すれば、ブラウザの再読み込みまで自動にしてくれて便利です。
以上で自らが書いたソースを保存する作業を行うと、 ソースで記載した出力結果がブラウザに表示されるようになります。
