MENU

【TypeScript】tsconfig.jsonによるコンパイラオプションの設定を解説!

tsconfig.jsonといったファイルは、TypeScriptを使用するプロジェクトにおいての設定ファイルになります。

開発環境構築時に設定ファイルは必要不可欠ですが、デフォルトのまま理解を疎かにしてしまうと危険です。

本記事では、tsconfig.jsonについて解説していきます。

目次

tsconfig.jsonとは?

tsconfig.jsonといったファイルは、TypeScriptを使用するプロジェクトにおいての設定ファイルになります。

TypeScriptが関与するプロジェクトは、このtscofig.jsonファイルを用意するのが一般的です。

TypeScriptの環境構築では、1にpackage.jsonで2にtsconfig.jsonと言っても過言ではありません。

TypeScriptコンパイラは、自動的にtsconfig.jsonを読み込み、コンパイル時に設定を使用する形になります。

ちなみに仮に大規模なプロジェクトの場合、複数のtsconfig.jsonを用意し使い分ける可能性もあります。

その際にファイル名は重要で、別名を利用する場合は以下のコマンドで参照先を変更することもできます。

tsc -p something.json

上記のようにsomething.jsonといった設定がある場合、参照先がtsconfig.jsonから変更されます。

isolatedModules

余談ですが、isolatedModulesはトランスパイラ向けのオプションです。

TypeScriptからJavaScriptへトランスパイルする際、複数ファイルが関係することがあります。

例えば、babelのようなトランスパイラーは各ファイルを処理するため一部コードが正しく解釈されないケースがあります。

具体的なコードを示すと、enumやnamespaceといった機能を使用すると実行時に問題が発生するケースがあります。

そのため、isolatedModulesは実行時の問題を回避するために正しく解釈できないコードの警告を行います。

tsconfig.jsonの自動生成

TypeScriptコンパイラ(tsc)は、tsconfig.jsonを生成する機能を備えています。

新規のTypeScriptプロジェクトを開始する際は、この機能を用いてtsconfig.jsonを作成するとよいです。

基本的に以下のコマンドを実行することで自動生成します。

自動生成の流れ(コマンド)
  • npm initでpackage.jsonを生成
  • npm install -D typescriptでコンパイラをモジュールへインストール
  • npx –initでtsconfig.jsonを生成
  • 生成されたtsconfig.jsonを必要に応じて編集

ファイルパス周りの設定を押さえる

「どのファイルをコンパイルするか」といった情報もtsconfig.jsonに含めることができます。

ファイルパスに関するオプションはTypeScriptの環境構築で頻繁に利用されるので理解して損はないです。

ファイルパスに関する主なオプション
  • includeオプション
  • excludeオプション

includeオプションは、コンパイルの起点となるファイル群を指定するものであるといえます。

また、excludeオプションは指定したファイルのコンパイルを制限するために利用します。(あくまで起点含めないという意味)

型チェックの制限に関わるオプション

TypeScriptのコンパイラオプションについて理解しておくべきことは、チェックの制限に関sるオプションです。

なぜなら、型チェックの挙動はパターンによってコンパイラオプションから制御だからです。

TypeScriptnのコンパイラオプションで最も重要なのは、strictオプションです。

strictオプションを有効にすると、以下のオプションが全て有効になります。

strict系の主なオプション
  • noImplicAny
  • noImplicThis
  • alwaysStrict
  • strictBindCallApply
  • strictNullChecks
  • strictFunctionTypes
  • strictPropertyInitialization
  • useUnknownInCatchVariables

TypeScriptによるプログラミングでは、strictコンパイラオプションを有効にすることを強く推奨されています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次