RedShift RedShift - 3 months ago 67
Javascript Question

Intellij Idea - compiling Typescript to Javascript and keeping directory structure

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


How I want it to look like

This is my Typescript configuration:

Typescript configuration

Typescript installation

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

Typescript compilation error


  • 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

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.