TSC keeps creating subfolders in the 'outDir'

Question

Hi there!

I am working on a small project with TypeScript which requires me to have two different tsconfig.json files which both inherit from my tsconfig.base.json file.

I ran into the problem of the compiler creating subfolders in my declared outDir which kinda drives me insane.

Here is my tsconfig.base.json file:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "resolveJsonModule": true,
      "lib": ["es6", "dom"],
      "esModuleInterop": true,
    },
    "exclude": [
      "node_modules"
    ]
}

and this is what the derived tsconfig.src.json looks like:

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "rootDirs": ["./src/ts", "."],
        "outDir": "./src/js/"
    },
    "exclude": [
        "page/**/*.ts",
        "tsconfig.page.json"
    ],
    "include": [
        "src/**/*.ts",
        "service_account.json"
    ],
}

My current project structure looks like this:

.
+-- node_modules/
+-- src/
|    +-- js/ (this is where my typescript files should be compiled to)
|    +-- ts/ (this is where all my ts files are located)
+-- tsconfig.base.json
+-- tsconfig.src.json
+-- service_account.json

Now if I run my build:backend script ("build:backend": "tsc -p ./tsconfig.source.json") the compiler creates two subfolders which makes my project structure look like this:

.
+-- node_modules/
+-- src/
|    +-- js/ (this is where my typescript files should be compiled to)
|        +-- src/
|            +-- ts/ (here are all compiled js files now)
|    +-- ts/ (this is where all my ts files are located)
+-- tsconfig.base.json
+-- tsconfig.src.json
+-- service_account.json

Does anybody have an idea what causes this problem?

I am thankful for every kind of help! Thanks in advance guys!

Answer 1

You need to consolidate all inputs into a single folder and all outputs into a folder that is not included in the inputs folder.

Example fix

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "rootDir": "/src/ts",
        "outDir": "./src/js"
    },
    "exclude": [
        "page/**/*.ts",
        "tsconfig.page.json"
    ]
}

And move service_account.json into src/ts as well.