6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-01-04

前回の記事

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

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

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?