TypeScript - How to save compiled files in a separate directory?

Question

I am new to TypeScript, and right now I have .ts files in several places, permeating 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 into the same directory as the .ts fles:

 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 .js files maintain the same directory structure as .ts files, I don’t want to keep track of the .js files in my VCS, so I would like to save all my JavaScript files in a separate directory tree (which then I can add to .gitignore), for example:

 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 parameter or parameter somewhere that tells the TypeScript compiler to do this? Also, I'm not sure if this is relevant, but I am using WebStorm.

Answer 1

Use the --outDir parameter for tsc (configured in the File Keeper in IntelliJ)

In 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" ... 

Answer 2

Or add "outDir": "build" to the tsconfig.json file

Answer 3

If you like to map the directory structure in the app / scripts folder in js, I would suggest using the following options for the file watcher:

 Arguments: --sourcemap --outDir $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$ $FileName$ Working Directory: $FileDir$ Output Paths To Refresh: $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js:$ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js.map 

Answer 4

I install package.json so that typing npm run start displays everything on build . The source files are stored in src . The source file is specified --outDir build .

 { "name": "myapp", "version": "0.0.1", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w --outDir build", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "license": "private", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.1", "typescript": "^1.7.3" } } 

You can exclude your build directory in tsconfig.json, although this is probably not necessary since there is only JS there:

 { "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "build" ] } 

Answer 5

Although these answers are correct, you should consider whether you just want to hide your .js files from your IDE.

In Visual Studio code, go to File > Preferences > Settings or your .vscode\settings.json file and type:

 "files.exclude": { "**/.git": true, "**/.DS_Store": true, "**/*.js" : { "when": "$(basename).ts" }, "**/*.js.map": { "when": "$(basename)" } } 

The above hides .js files where the corresponding .ts file exists.

Answer 6

Intellij Users, compile Typescript into multiple output directories

For Intellij users this can be useful. Here's how I got this working using the built-in Typescript compiler.

Environment Information

• Windows 7
• Typescript using NPM Version 1.7.3
• Intellij 14
• ES6
• Using RequireJS

Directory structure example

 BEFORE COMPILE ---------------------------------------- -> JS -> app -> config.js //this is not generated -> libs -> jquery.js //this is not generated -> plugins -> TS -> app -> main.ts -> libs -> jquery.d.ts -> plugins -> somePlugin.ts AFTER COMPILE ---------------------------------------- -> JS -> app -> config.js //this is not generated -> main.js -> libs -> jquery.js //this is not generated -> plugins somePlugin.ts -> TS -> app -> main.ts -> libs -> jquery.d.ts //this is where I kept my definition files -> plugins -> somePlugin.ts 

Intellij setup

• File → Settings → Typescript
• Node Interpreter: NodeJS Installation Path
• Compiler Version: usually located in C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• Command line options: -m amd -t ES6 -outDir E:\myapp\js
• Check only the main compilation file and point it to the input file. E:\myapp\ts\main.ts If this is not checked, all your files will try to output outDir to your path.

Answer 7

I am using Atom with the extension atom-typescript, and my tsconfig.json looks like this:

 { "compilerOptions": { "outDir":"js" } } 

Answer 8

As for Grunt, currently to save your Dev folder project structure in production and not get unexpected results after compiling the files, refer to the option:

 compilerOptions: { rootDir: 'devFolder' // ... } 

See the rootDir parameter in grunt-ts white papers.

I hope this helps someone if they get stuck and get a weird result in production.