How can I get the Typescript compiler to output the compiled js to a different directory?

Question

I'm fairly new to TypeScript, and right now I have .ts files in several places throughought my project structure:

app/
 |-scripts/
    |-app.ts
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  
    |-otherStuff/
       |-otherstuffA.ts

Right now, when my files are compiled, they are compiled to the same directory that the .ts fles are in:

app/
 |-scripts/
    |-app.ts
    |-app.js
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  |-classA.js
    |  |-classB.js
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  |-controllerA.js
    |  |-controllerB.js
    |  
    |-otherStuff/
       |-otherstuffA.ts
       |-otherStuffA.js

While I like the way that the .js files keep the same directory structure as the .ts files, I don't want to track the .js files in my VCS, so I'd like to keep all of my JavaScript files in a separate directory tree (that I can then add to .gitignore), like so:

app/
 |-scripts/
 |  |-app.ts
 |  |
 |  |-classes/
 |  |  |-classA.ts
 |  |  |-classB.ts
 |  |  
 |  |-controllers/
 |  |  |-controllerA.ts
 |  |  |-controllerB.ts
 |  |  
 |  |-otherStuff/
 |     |-otherstuffA.ts
 |
 |-js/
    |-app.js
    |
    |-classes/
    |  |-classA.js
    |  |-classB.js
    |
    |-controllers/
    |  |-controllerA.js
    |  |-controllerB.js
    |
    |-otherStuff/
       |-otherstuffA.js

Is there a setting or option somewhere that will tell the TypeScript compiler to do this? Also, I'm not sure if it's relevant, but I am using WebStorm.

Answer 1

Use the option --outDir on tsc (configured within the File Watcher in IntelliJ)

From the command line documentation

--outDir DIRECTORY Redirect output structure to the directory.

Edit

Since Typescript 1.5, this can also be set in the tsconfig.json file:

"compilerOptions": {
    "outDir": "DIRECTORY"
    ...