簡単に書けるのはいいけれど、型が緩くてあぶなっかしいのがJavaScriptの玉にキズ。
そんなJavaScriptに静的型付けを導入し、併せてJavaScriptの次世代仕様を先行して取り入れたのがTypeScript。
最近ではAngular2の開発で使われたりと徐々に存在感を増している。
今回は、TypeScriptをVisual Studio Codeでトランスパイルする方法と、実プロジェクトで必要になるだろう設定を解説する。
Contents
Visual Studio Codeのインストール
まずはVisual Studio Codeをインストールする。
Microsoftが用意しているVisual Studio Codeの公式サイトからダウンロードできるから、後は難なくインストールできるはず。
TypeScriptのインストール
お次はTypeScriptのインストール。
npmで入れることになるから、まだnpmを入れていない場合は過去にTOACHで解説したインストール方法を参考にしておくれ。
さて、TypeScriptをインストールするため、ターミナルを立ちあげて次のコマンドをいれる。
|
1 |
npm install -g typescript |
TypeScriptのプロジェクト設定
任意の場所に今回のサンプルプロジェクト用のディレクトリーを作ったら、Visual Studio Codeから開く。（Visual Studio Codeのメニューから、File > Open > …）
TypeScriptプロジェクトはtsconfig.jsonなる設定ファイルが必要だ。プロジェクトを開けたら、左サイドのツリーからtsconfig.jsonを作ろう。
tsconfig.jsonに設定を書いていくわけだけれど、ここでVisual Studio Codeのインテリセンスの威力を味わえる。ファイルに波括弧”{}”を書き、その中に”c”と打つと、候補の設定を提案してくれる。
この”compileOptions”という設定項目を選ぶと、自動的に設定欄を作ってくれる。う〜んイイね。
今回のプロジェクトの設定内容は次のとおりになる。
|
1 2 3 4 5 6 7 |
{ "compilerOptions": { "target": "ES5", "module": "amd", "sourceMap": true } } |
Write TypeScript
いよいよTypeScriptのコードを書いていく。
プロジェクトに”HelloWorld.ts”というファイルを追加し、1クラス書いてみる。
このファイルにStartupというクラスを作る。
|
1 2 3 4 5 6 |
class Startup { public static main(): number { console.log('Hello World!'); return 0; } } |
ちなみに、” main() : number {} “まで書いた段階で、numberに赤い波線が引かれたのがわかっただろうか？これは、数値を返さないといけないにも関わらず何も返していないからで、こんなところもVisual Studio Codeの良いところ。
タスク設定
無事にStartupクラスを書けたら、今度はタスク設定をしていく。今回は、ビルド時にTypeScriptコードをJavaScriptへトランスパイルする設定を行う。
Shift+Command+Pでコマンドパレットを呼び出し、”config”と入力すると、”Configure Task Runner”と表示が出るからこれを選択すると、タスク設定用のファイル”tasks.json”が自動で作成される。
このファイルを覗いてみると、tscコマンドと、先ほど作成したHelloWorld.tsが指定されていることがわかる。
ts2js トランスパイル
後はTypeScriptをJavaScriptへ変換（トランスパイル）するだけ。
Shift+Command+Bを押すと、何も問題が無ければHelloWorld.jsが作成される。
プロジェクトによっては生成されたJavaScriptを１つのディレクトリにまとめておき、Browserifyなんかで１つのJSファイルにまとめたいかもしれないが、もちろんtasks.jsonで生成先も指定できる。それには、tscコマンドにオプションを足せばいい。
今回は、プロジェクトルートにjsディレクトリを置き、この中にトランスパイル後のJSファイルをまとめることにした。
ご覧のとおり、argsに対して、”–outDir”と”js”を設定すれば、後は先程と同じにビルドを走らせればHelloWorld.jsがjsディレクトリー以下に作成される。
あるいは、TypeScriptコードに変更があったときに自動でトランスパイルしてほしいこともあるだろう。そんなときはtscに対して”-w”を指定すればOK。like this…
argsに”-w”を記述して保存し、一度ビルドを走らせると、後は自動でトランスパイルしてくれるから便利。
TypeScriptの最新仕様に追いついた良書がないので今回はJavaScriptの新仕様であるECMAScript6(ES6)を動かして学べる参考書をご紹介。
![[最新版] Noto Sans JapaneseをWebフォントとして使う方法](https://clickan.click/wp-content/uploads/2016/01/metro-blur.formatted-1-340x226.jpg)
