$ ryokkkke.com/TypeScript/tsconfig.json

outDir

概要

https://www.typescriptlang.org/tsconfig#outDir

{
  "outDir": "./dist"
}

コンパイル結果をどこに吐き出すかを指定します。

何も指定しない場合、コンパイルされた JS コードは元の TS ファイルと同じディレクトリに作成されます。
このオプションを指定した場合、TS ファイルのディレクトリ構成をそのままに保ちつつ、指定したディレクトリに JS ファイルを作成します。

詳細

// コンパイル前
.
├── index.ts
├── package-lock.json
├── package.json
├── src
│   ├── hoge.ts
│   └── piyo
│       ├── foo
│       │   └── foo.ts
│       └── piyo.ts
└── tsconfig.json

上記のようなディレクトリ構成だった場合、何も指定しない場合は

// 未指定のコンパイル後
.
├── index.js
├── index.ts
├── package-lock.json
├── package.json
├── src
│   ├── hoge.js
│   ├── hoge.ts
│   └── piyo
│       ├── foo
│       │   ├── foo.js
│       │   └── foo.ts
│       ├── piyo.js
│       └── piyo.ts
└── tsconfig.json

こうなります。
元の TS ファイルと同じ場所にコンパイル後の JS ファイルができています。

"outDir": "./dist"を指定すると

// .distを指定してのコンパイル後
.
├── dist
│   ├── index.js
│   └── src
│       ├── hoge.js
│       └── piyo
│           ├── foo
│           │   └── foo.js
│           └── piyo.js
├── index.ts
├── package-lock.json
├── package.json
├── src
│   ├── hoge.ts
│   └── piyo
│       ├── foo
│       │   └── foo.ts
│       └── piyo.ts
└── tsconfig.json

こうなります。

ディレクトリ構成を保ちつつ指定したdistディレクトリに JS ファイルが作成されています。


関連オプション:rootDir