Edited at

TypeScriptのtsconfig.jsonをあれこれしてみた その2


前回の記事

TypeScriptのtsconfig.jsonをあれこれしてみた その1


tsconfig.jsonを触る前に

このように、tscになんのオプションも指定しないで実行するとどうなるのか実験

npx tsc


Version 3.2.2

Syntax: tsc [options] [file...]

Examples: tsc hello.ts

tsc --outFile file.js file.ts

tsc @args.txt

tsc --build tsconfig.json

Options:

...


というわけでヘルプが表示され、コンパイルは何もされませんでした。


tsconfig.jsonを用意してみる。

root/tsconfig.jsonを作成(中身はとりあえず空で)して再チャレンジ。


error TS6053: File '/Users/nekonecode/work/lab/ts/tsconfig.json' not found.


挙動が変わりました。エラーになるんですね。


tsconfig.jsonを少しだけ編集


tsconfig.json

{}


空のオブジェクトを描いてみました。

さぁnpx tscだ、どうなる。

結果はエラーも表示されないし、コンパイルもされないでした。

これはちょっと予想外の結果。

コンパイルされてました。

単純に.tsと同じ階層にコンパイルされたファイルが作られます。


雛形だけ描いたtsconfig.jsonにしてみる。


tsconfig.json

{

"compilerOptions": {

}
}


おそらく何も起こらないだろうと予想してやってみましたが

予想通り、エラーにもならず、コンパイルもされませんでした。

こちらも前述と同様、コンパイルされていた。


さて、何を書けばコンパイルされるのか

とりあえずコマンドで指定していた--outDirを指定してみます。


tsconfig.json

{

"compilerOptions": {
"outDir": "./build"
}
}

これを描いてnpx tscをしたらコンパイルが実行されました。

npx ./src/index/ts --outDir ./buildとしていた時と同じ結果になりました。


--outDir


Redirect output structure to the directory.


翻訳すると「出力構造をディレクトリにリダイレクトします」

意味がわからんけど、まぁ普通にコンパイルした結果を入れるディレクトリを指定するオプション。

これをしてすればコンパイルはされるようです。


どのファイルがコンパイルの対象になるのか?

今回はsrcの中にあるtsが全てコンパイルされていた。

root

┣━ build
┃ ┣━ index.js
┃ ┗━ util.js
┗━ src
┣━ index.ts
┗━ util.ts

じゃぁこうしたらどうなるのか(root/index.tsを準備)

root

┣━ index.ts
┗━ src
┣━ index.ts
┗━ util.ts

buildの中身はこうなりました

build

┣━ index.js
┗━ src
┣━ index.js
┗━ util.js

root配下にある全ての.tsがコンパイル対象になっているみたいですね。


--rootDirオプションを指定してみる。


tsconfig.json

{

"compilerOptions": {
"rootDir": "./src",
"outDir": "./build"
}
}

これでnpx tscをやってみた結果は:


error TS6059: File '/Users/nekonecode/work/lab/ts/index.ts' is not under 'rootDir' '/Users/nekonecode/work/lab/ts/src'. 'rootDir' is expected to contain all source files.


rootDirで指定したフォルダに全てのソースコードを入れなさいと怒っておられます。

ただ地味にコンパイルはされていました。(エラーは出るけどコンパイルはされるという半端な結果に)


他の設定も試してみる

とりあえず.tsはこんな感じで存在しているとして

root

┣━ index.ts
┗━ src
┣━ index.ts
┗━ util.ts


filesを指定してみる その1


tsconfig.json

{

"compilerOptions": {
"outDir": "./build"
},
"files": [
"./src/index.ts"
]
}

結果:

build

┣━ index.js
┗━ util.js



  • root/index.tsはコンパイルされない


  • index.tsしか指定してないけど、index.tsで参照してるutil.tsもコンパイルされる。


filesを指定してみる その2


tsconfig.json

{

"compilerOptions": {
"outDir": "./build"
},
"files": [
"./src/util.ts"
]
}

結果:

build

┗━ util.js



  • util.tsだけがコンパイルされた(これは他のファイルを参照してないからね)


includeを指定してみる


tsconfig.json

{

"compilerOptions": {
"outDir": "./build"
},
"include": [
"src/**/*"
]
}

結果:

build

┣━ index.js
┗━ util.js

とまぁ結果は同じだけどいろんな方法でコンパイル対象を限定できることがわかりました。

こんな感じでいろんなオプションを試していきたい。