👋

tsconfig.jsonファイルの学習メモ 1

2022/05/19に公開約2,700字

概要

現在のプロジェクトでtypeScriptを導入しており、tsconfig.jsonファイルをいじる機会があるので、せめて基本的なところくらいは抑えておこうと思い以下の記事での学習メモとして本記事にまとめることにした。

※この記事は情報発信の一環というよりは、完全に自分のための学習メモなので参考記事の文章をそのまま引用したりする箇所が多数あるかと思いますが、袋叩きにせず暖かい目で見守ってくれると嬉しいです。。。🙏

今回の参考記事: tsconfig.jsonの全オプションを理解する

また、上記の参考記事のほうではさまざまなオプションが紹介されているが、今回の学習メモでは自分のPJで実際に使用しているオプションのみに限定する。

第一階層

compilerOptions

tsconfig.json
{
	"compilerOptions": {}
}

こんな感じで書くやつ。
コンパイルする際のオプションをこのオブジェクトハッシュ内に記載していく感じ。

files

tsconfig.json
"files": [
  "core.ts",
  "sys.ts",
  "types.ts",
]

これは、コンパイルするファイルを直接指定する。
このオプションでは、ワイルドカードを使った複数のファイルの一致ができないで注意。
また、拡張子を省略することもできるが、省略した場合は.tsファイルが優先して対象になる。

include

コンパイルする対象のファイルを記述する。
ワイルドカードを使った複数のファイルの一致ができる。
例: *, ?, **/

tsconfig.json
"include": [
	"src/**/*"
]

上記のサンプルコードの場合は、srcディレクトリ配下のファイル全てがコンパイルの対象となる。
※多重にネストしてても関係ない。

また上記のサンプルコードのように拡張子を指定しない(*のみ)場合、もしくは拡張子にアスタリスクを使う(hoge.*)場合は、デフォルトで下記の拡張子が対象になる。

  • .ts
  • .tsx
  • .d.ts

※ただし、compilerOptions.allowJsオプションの値がtrueだった場合は、追加で下記の拡張子も含まれる。

  • .js
  • .jsx

filesオプションもincludeオプションも指定しない場合、tsconfig.jsonファイルが置かれているディレクトリ配下の全てのtypeScriptファイル(拡張子が.ts.d.ts.tsxであるファイル)のうち、exclude に含まれていないファイルが、基本的にコンパイルの対象になる。

exclude

上記のincludeで指定したファイルから特別に除外するファイルを記述する。
includeと同様にワイルドカードが使える。

このexcludeで一つ注意したいのが、excludeのオプションに指定したからと言ってコンパイルされないわけではないということ。(要するに、コンパイルされる可能性があるということ)

というのも、このオプションはあくまでincludeしたファイル群の中から特定のファイルを除外するだけなので、例えば、excludehoge.tsを指定しても、includeに指定したpiyo.tshoge.tsをimportしていればtscはhoge.tsを読み込みコンパイルする。

excludeオプションを指定しない場合は、デフォルトで以下の値を含む。

  • node_modules
  • bower_components
  • jspm_packages
  • outDirオプションで指定しているディレクトリ配下のファイル。

※逆にいうと、tsconfig.jsonexcludeオプションが指定されている場合は、outDirの中身も対象になってしまうので注意。

compilerOoptionsの階層

target

tdconfig.json
"target": "es5"

これはどのバージョンのJsとして、コンパイル後に出力するかを決定する。
デフォルトのES3であれば、コンパイルの結果として出力されるjsコードはES3に準拠したコードということになる。

どちらかというとjsへのコンパイルというより、Babel的な側面が大きい。

lib

tsconfig.json
"lib": ["dom", "es2019"]

これは、コンパイルする際に使用する組み込みのライブラリを指定する。
基本的には、targetオプションで指定しているjsのバージョンに含まれるものは暗黙的に指定される。
ただし、targetオプションで指定したバージョンのjsに含まれていないものは、明示的に指定する必要がある。

module

tsconfig.json
module: "esnext"

出力するjsモジュールの仕組みとして何を使用するかを指定する。

【番外編】 意外と知らなかったtargetオプションとmoduleオプションとの違い

参考記事情報: tsconfig.jsonのmoduleとtargetには何を設定すればいいのか - TypeScript

まずは結論とまとめ

  • module: どのモジュールパターンで、コンパイル後の出力を行うかを指定する。
    → モジュールパターンというのはcommonjsなのかumdなのかなど、、、
    • Node.jsでの利用想定ならcommonjs
    • ブラウザ側での利用ならumd
  • target: どの環境向けにトランスパイルするかを指定する。
    • 利用環境が想定できないならes3es5にするのが無難
    • 下位互換性のあるコードへの変換をBabelで行うならesnext

Discussion

ログインするとコメントできます