【初心者向け】TypeScriptの実装プロセス/tsconfig.jsonの設定例

TypeScriptの使い方をまとめました。
インストール～コンパイル実行、設定ファイルのメモです。

TypeScriptのメリット

• 型の指定が可能
• 古いブラウザでも動作できるようにコンパイル
• JavaScriptには無い機能（インターフェース/ジェネリクスなど）
• コンパイラの設定が可能

開発環境サンプル

• エディター......Visual Studio Code
• 拡張機能（必須ではない）
  • ESLint
  • Prettier

TypeScriptのインストール

node.js

npm install -g typescript

コンパイルの実行

ウォッチモード（プロジェクト全体）

プロジェクト全体を監視して、ファイルが変更されたら自動的にコンパイルを行います。

tsc --init
tsc --watch
または
tsc --init
tsc -w

--init
での初期化とは
「配下のファイルをすべてTypeScriptによって管理する」
ということを意味します。
tscconfig.jsonが作成されるので、コンパイルの厳密さや対象のファイルなど細かな設定が可能です。

ウォッチモード（特定のファイル）

指定したファイルが変更されたら自動的にコンパイルを行います。

tsc script-name.ts --watch
または
tsc script-name.ts -w

適宜コンパイルを行う

毎回コマンドを入力するのは面倒なので、別のやり方が良いと思います。

tsc script-name.ts

tsconfig.jsonの設定例

exclude：指定したファイルをコンパイル対象から除外する

tsconfig.json

{
  "compilerOptions": {
    ～中略～
  },
  "exclude": ["node_modules", "exclude-file.ts", ...]
}

ファイル名にはワイルドカードを指定できます。
またexcludeを設定する場合は、"node_modules"の指定を含ませることが必要です（defaultでの指定は不要）。
→node_modules内のファイルがコンパイルされるのを防ぐため

include：指定したファイルのみコンパイル対象とする

tsconfig.json

{
  "compilerOptions": {
    ～中略～
  },
  "include": ["include-file.ts", ...]
}

ファイル名にはワイルドカードを指定できます。
またexcludeを設定する場合は、"node_modules"の指定を含ませることが必要です（defaultでの指定は不要）。
→node_modules内のファイルがコンパイルされるのを防ぐため

rootDir：TypeScriptファイルの場所を指定する

tsconfig.json

"rootDir": "./src",

上記includeでも似たようなことは可能。
しかしrootDirによりルートフォルダを明示すると、root外にTypeScriptファイルがある場合にエラーが出る（意図しないフォルダ構成になることを回避できる）。

outDir：JavaScriptファイルの出力先を指定する

tsconfig.json

"outDir": "./dist",

removeComments：コメントを削除してコンパイル

tsconfig.json

"removeComments": trur,