近年フロントエンドの開発ではTypeScriptが用いいられることが多くなってきているようです。ちょうど案件で扱うことがあったので、勉強も兼ねて備忘録として残していきたいと思います。TypeScriptはaltJSと呼ばれるJavaScriptの拡張言語の一種で、JavaScriptをベースに様々な機能が扱えるようになっていて、拡張子は「.ts」になります。   TypeScriptで書かれたコードはブラウザで実行できないため、コンパイルしてJavaScriptに変換する必要があります。そこで今回はTypeScriptのコンパイル環境を作成するまでをまとめてみたいと思います。  

TypeScriptコンパイラのインストール

TypeScriptのコンパイルには専用のコンパイラを使用する形になります。npm経由でインストールできますので、下記コマンドでグローバルインストールしていきます。こうすることでプロジェクトのローカルフォルダに依存せずにどこでもコンパイルすることができます。

$ npm install -g typescript
........
+ typescript@3.8.3

  インストールが完了すると、tscコマンドが使えるようになります。バージョンを確認して問題なく使えることをチェックしておきます。

$ tsc -v
Version 3.8.3

  これでTypeScriptを使う準備ができました。早速エディタでTypeScriptファイルを作成しコンパイルを試してみたいと思います。サンプルで下記のような処理を書いてみました。 【example.ts】

export {}
let taxIn = (price: number, rate: number): number => {
 return price * rate;
};
console.log(taxIn(1000,1.1));

  TypeScriptの大きな特徴として静的型付けというのがあります。変数に対してデータ型をあらかじめ指定しておくことができます。ここでは関数の引数、そして関数の返り値に数値型のデータであることを指定しています。また、TypeScriptではモジュール化されていない場合にスコープがグローバルスコープとなるため変数名が重なってしまう問題があるため、exportでモジュール化させる必要があるようです。これで、下記のコマンドでTypeScriptをコンパイルしてみます。

$ tsc example.ts example.js

  エラーが出なければ、JavaScript形式のファイルが生成されます。実際に確認してみますと、コードないの記述方法も変わっているのが確認できます。 【example.js】

"use strict";
exports.__esModule = true;
var taxIn = function (price, rate) {
 return price * rate;
};
console.log(taxIn(1000, 1.1));

  きちんと処理が動くかも確認してみます。jsファイルはNode.js環境下でも動作するので、nodeコマンドでスクリプトを実行すると、作成した関数が動作しているのが確認できます。

$ node example.js
1100

   

TypeScriptコンパイラの設定ファイルを作成する

TypeScriptをコンパイルする際にはオプションを指定することができますが、コマンドを実行する度に入力するのは手間になります。そんな時にはTypeScriptの設定ファイルであるtsconfig.jsonを使うと便利です。設定ファイルは下記のコマンドで作成しますが、プロジェクトごとに設定が異なる可能性もあるので、ローカルにTypeScriptをインストールしてから、設定ファイルを作成しています。

$ npm install --save-dev typescript
$ npx tsc --init

  そうすると、プロジェクト内にtsconfig.jsonファイルが作成されます。実際に中身をみていくとJSON形式で様々なオブションを設定できるのが確認できます。 【tsconfig.json】

{
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "incremental": true, 
  "target": "ES5",
  "module": "commonjs", 
  "sourceMap": true, 
  "removeComments": true,
  "strict": true, 
  ..........
 }
}

  オプションについてはかなりの数があるので、詳しくは公式を参照していただくのが良いのですが、いくつか良く使われるオプションを下記にまとめてみました。

include	コンパイルする対象のファイルやフォルダを一括で指定
exclude	コンパイル対象外のファイルやフォルダを一括で指定
compilerOptions / target	ソースファイルで変更があったものだけを差分でコンパイルする
compilerOptions / target	コンパイルされたJavascriptの仕様を指定
compilerOptions / module	コンパイル時に使用するモジュール形式を指定
compilerOptions / sourceMap	ソースマッピングファイルを出力する
compilerOptions / removeComments	コンパイル後にコメントが削除される
compilerOptions / noUnusedLocals	ローカル変数で未使用のものがある場合にエラーを出力する
compilerOptions / noUnusedParameters	パラメーターで未使用のものがある場合にエラーを出力する
compilerOptions / forceConsistentCasingInFileNames	ファイル名で大文字と小文字の違いがあった場合にエラーを出力する

  設定ファイルにこれらのオプションを指定すると、そのオプションに合わせた形でコンパイルできるようになります。その際には「--build」オプションで、設定ファイルを指定する形で実行します。

$ tsc --build tsconfig.json

  また「--watch」オプションではファイルの変更を監視できるようになり、コンパイルが自動で出来るようになります。

$ tsc --watch

  これ以外にもコンパイラのコマンドでは様々なオプションが用意されています。コマンドオプションの一覧は「--help」で確認することができます。

$ tsc --help

 

---

  今回はTypeScriptの導入からコンパイル、設定ファイルの作成方法などについてまとめてみました。そのほかTypeScriptにはいろんな機能や特徴などがありますが、色々と勉強してまた別記事にまとめてみたいと思います。   （参考にさせて頂いたサイト） TypeScriptチュートリアル① -環境構築編- ブロック スコープの変数 'var' を再宣言することはできません。