Intellij Idea - compiling Typescript to Javascript and keeping directory structure

Question

I'm trying to get Intellij Idea to keep the directory structure when compiling Typescript to Javascript. My directory structure is as follows:

root
- ts
  - SomeClass1.ts
  - SomeFolder
    - AwesomeClass2.ts
- tsc

I want the resulting compiled files to be:

root
- tsc
  - SomeClass1.js
  - SomeFolder
    - AwesomeClass2.js

This is my Typescript configuration:

However when trying to compile, I'm getting this error in the console:

• If I set "Use output path" to "tsc", it works, but the directory structure is gone and that leads to RequireJS to not find the files anymore.
• If I set "Use output path" to "tsc\$FileDirRelativeToSourcepath$", I get the "cannot read the property 'replace' of undefined".
• If I disable "Use output path" and use "--outDir" with "Command line options", the files do compile into the right directory, but IntelliJ no longer recompiles files automatically if they've been changed.

UPDATE, solution by Nitzan Tomer:

Create tsconfig.json in the root directory:

{
  "compilerOptions": {
    "module": "amd",
    "target": "es5",
    "outDir": "tsc",
    "rootDir": "ts",
    "sourceMap": true,
    "declaration": true
  },
  "exclude": [
    "tsc"
  ]
}

and enable "use tsconfig.json" in IntelliJ.

Answer 1

If you use tsconfig.json you can specify the rootDir and outDir, if you do that then it will keep the directory structure of the rootDir in the compiled version inside the outDir.

In your case:

{
    "compilerOptions": {
        "outDir": "tsc",
        "rootDir": "ts",
        "sourceMap": true,
        "declaration": true
    }
}

Place this file as tsconfig.json in your root directory and in intellij/webstorm Enable Typescript Compiler and then Use tsconfig.json.