サバイバルTypeScript勉強備忘録2（環境構築とコンパイル）
目次
1. 概要
このシリーズでは、TypeScriptの入門教材としてサバイバルTypeScriptで学習し、個人的に重要だと思った箇所を備忘録として記事に記載しています。
今回の記事では、第三章 作って学ぶTypeScriptを題材に学んだ内容を記載します。
2. 開発環境の準備
2.1. Node.jsのインストール
私の環境では既にnodeをインストール済みなので省略します。 まだの方は以下などを参考にして下さい。
https://qiita.com/echolimitless/items/83f8658cf855de04b9ce
2.2. TypeScriptコンパイラのインストール
以下コマンドでインストールします。
npm install -g typescript
※ -gコマンドでグローバル環境にインストールしています。
以下コマンドでバージョン表示されればOK
tsc -v
2.2.1. トラブルシュート
PowerShellの実行ポリシーがRestricted状態だったので、怒られてしまった。（Vue環境構築以来2回目）
以下コマンドで現在のユーザの実行ポリシーをRemoteSignedに変更しました。
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
※ 詳しくは以下を参照
https://qiita.com/ponsuke0531/items/4629626a3e84bcd9398f
3. 簡単な関数を作ってみる
3.1. JavaScriptで型が無くて困る例
以下の例では、1回目のconsole.logでは正しく足し算が実行され、結果は1000となります。
しかし、2回目のconsole.logではincrement()内の+演算子が文字列結合として扱われ、結果は9991となってしまいます。
function increment(num){
return num + 1;
}
console.log(increment(999));
console.log(increment("999"));
3.2. TypeScriptを導入して型を追加する
上記のような問題を検知するために、TypeScriptを導入し、型注釈（type annotation）を追加します。
以下のように、numの右に: numberと記載します。
function increment(num: number){
return num + 1;
}
console.log(increment(999));
console.log(increment("999"));
※ ファイルの拡張子は予め.jsから.tsに変更しておくこと
VS Codeを使っている場合、この時点で2回目のconsole.logにおいて、型の問題を指摘してくれます。
また、tscコマンドでコンパイルしてみると同様に型の問題が指摘されます。
問題箇所を修正すれば無事コンパイルが通り、コンパイル後のファイルとして「ファイル名.js」が出力されます。
コンパイル前後のコードを比較してみると、型注釈が取り除かれています。
4. おわりに
今回の記事では、サバイバルTypeScriptの第三章 作って学ぶTypeScriptを題材に、環境構築とTypeScriptでのコンパイルまでを実行しました。
次回の記事では、引き続きTypeScriptでのApp実装を行ってみるつもりです。