¿Cómo puedo hacer que el compilador de TypeScript genere los js compilados en un directorio diferente?

Soy bastante nuevo en TypeScript, y ahora mismo tengo archivos .ts en varios lugares a través de la estructura de mi proyecto:

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

En este momento, cuando se compilan mis archivos, se compilan en el mismo directorio en el que están los archivos .ts:

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

Si bien me gusta la forma en que los archivos .js mantienen la misma estructura de directorio que los archivos .ts, no quiero rastrear los archivos .js en mi VCS, así que me gustaría mantener todos mis archivos JavaScript en un árbol de directorio separado (que luego puedo agregar a .gitignore), así:

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

¿Existe una configuración u opción en algún lugar que le diga al compilador de TypeScript que haga esto? Además, no estoy seguro de si es relevante, pero estoy usando WebStorm.

Use la opción --outDiren tsc (configurada dentro de File Watcher en IntelliJ)

De la documentación de la línea de comandos

--outDir DIRECTORY Redirect output structure to the directory.

Editar

Desde TypeScript 1.5, esto también se puede configurar en el tsconfig.jsonarchivo:

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

O agregue "outDir": "build"al archivo tsconfig.json

Aunque estas respuestas son correctas, debe considerar si realmente solo desea ocultar sus archivos .js de su IDE .

En Visual Studio Code, vaya a File > Preferences > Settingso su .vscode\settings.jsonarchivo e ingrese:

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

Lo anterior oculta los archivos .js donde existe un archivo .ts correspondiente.

Si desea mapear la estructura del directorio de la carpeta app / scripts en js, le sugiero que use la siguiente configuración para su observador de archivos:

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

Usuarios de Intellij, compile TypeScript en múltiples directorios de salida

Para los usuarios de Intellij, esto puede resultar útil. Así fue como logré que esto funcionara usando el compilador de TypeScript integrado.

Información medioambiental

• Windows 7
• Mecanografiado usando NPM versión 1.7.3
• Intellij 14
• ES6
• Usando RequireJS

Ejemplo de estructura de directorio

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

Configuración de Intellij

• Archivo -> Configuración -> Mecanografiado
• Intérprete de nodo: su ruta de instalación de NodeJS
• Versión del compilador: normalmente se encuentra en C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• Opciones de línea de comando: -m amd -t ES6 -outDir E:\myapp\js
• Compruebe compilar solo el archivo principal y apúntelo a su archivo de entrada. E:\myapp\ts\main.tsSi esto no está marcado, todos sus archivos intentarán salir a su ruta outDir.

Configuré package.json así para que al escribir npm run starttodo salga a build. Los archivos de origen se guardan en formato src. El archivo de salida está especificado por --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"
  }
}

Puede excluir su directorio de compilación en tsconfig.json, aunque probablemente no sea necesario, ya que solo hay JS allí:

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

Estoy usando Atom con la extensión atom-typescript y mi tsconfig.json se ve así:

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

Con respecto a Grunt, actualmente para guardar la estructura del proyecto de la carpeta de desarrollo en producción y no obtener un resultado inesperado después de que se hayan compilado los archivos, consulte la opción:

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

Vea la opción rootDir en los documentos oficiales de grunt-ts.

Espero que ayude a alguien si se atasca y obtiene un resultado extraño en la producción.