前回の記事
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.jsonOptions:
...
というわけでヘルプが表示され、コンパイルは何もされませんでした。
tsconfig.jsonを用意してみる。
root/tsconfig.json
を作成(中身はとりあえず空で)して再チャレンジ。
error TS6053: File '/Users/nekonecode/work/lab/ts/tsconfig.json' not found.
挙動が変わりました。エラーになるんですね。
tsconfig.jsonを少しだけ編集
{}
空のオブジェクトを描いてみました。
さぁnpx tsc
だ、どうなる。
結果はエラーも表示されないし、コンパイルもされないでした。
これはちょっと予想外の結果。
コンパイルされてました。
単純に.ts
と同じ階層にコンパイルされたファイルが作られます。
雛形だけ描いたtsconfig.jsonにしてみる。
{
"compilerOptions": {
}
}
おそらく何も起こらないだろうと予想してやってみましたが
予想通り、エラーにもならず、コンパイルもされませんでした。
こちらも前述と同様、コンパイルされていた。
さて、何を書けばコンパイルされるのか
とりあえずコマンドで指定していた--outDir
を指定してみます。
{
"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オプションを指定してみる。
{
"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
{
"compilerOptions": {
"outDir": "./build"
},
"files": [
"./src/index.ts"
]
}
結果:
build
┣━ index.js
┗━ util.js
-
root/index.ts
はコンパイルされない -
index.ts
しか指定してないけど、index.ts
で参照してるutil.ts
もコンパイルされる。
filesを指定してみる その2
{
"compilerOptions": {
"outDir": "./build"
},
"files": [
"./src/util.ts"
]
}
結果:
build
┗━ util.js
-
util.ts
だけがコンパイルされた(これは他のファイルを参照してないからね)
includeを指定してみる
{
"compilerOptions": {
"outDir": "./build"
},
"include": [
"src/**/*"
]
}
結果:
build
┣━ index.js
┗━ util.js
とまぁ結果は同じだけどいろんな方法でコンパイル対象を限定できることがわかりました。
こんな感じでいろんなオプションを試していきたい。