Como posso fazer com que o compilador Typescript produza os js compilados em um diretório diferente?

Sou bastante novo no TypeScript e agora tenho arquivos .ts em vários lugares em toda a estrutura do meu projeto:

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

Agora, quando meus arquivos são compilados, eles são compilados no mesmo diretório em que os arquivos .ts estão:

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

Embora eu goste da maneira como os arquivos .js mantêm a mesma estrutura de diretório dos arquivos .ts, não quero rastrear os arquivos .js em meu VCS, então gostaria de manter todos os meus arquivos JavaScript em um árvore de diretórios separada (que posso adicionar a .gitignore), assim:

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 uma configuração ou opção em algum lugar que dirá ao compilador TypeScript para fazer isso? Além disso, não tenho certeza se é relevante, mas estou usando o WebStorm.

Use a opção --outDir tsc (configurada no File Watcher no IntelliJ)

Da documentação da linha de comando

--outDir DIRECTORY Redirect output structure to the directory.

Editar

Desde Typescript 1.5, isso também pode ser definido no tsconfig.jsonarquivo:

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

Ou adicione "outDir": "build"ao arquivo tsconfig.json

Embora essas respostas estejam corretas, você deve considerar se realmente deseja apenas ocultar seus arquivos .js de seu IDE .

No Visual Studio Code, vá para File > Preferences > Settingsou seu .vscode\settings.jsonarquivo e digite:

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

O código acima oculta os arquivos .js onde existe um arquivo .ts correspondente.

Se você gosta de mapear a estrutura de diretório da pasta app / scripts em js, sugiro usar as seguintes configurações para o inspetor de arquivos:

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

Usuários do Intellij, compilem o Typescript para vários diretórios de saída

Para usuários do Intellij, isso pode ser útil. Foi assim que fiz isso funcionar usando o compilador Typecript integrado.

Informação do ambiente

• Windows 7
• Texto datilografado usando NPM versão 1.7.3
• Intellij 14
• ES6
• Usando RequireJS

Exemplo de estrutura de diretório

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

Configuração Intellij

• Arquivo -> Configurações -> Texto tipográfico
• Intérprete de nó: seu caminho de instalação do NodeJS
• Versão do compilador: normalmente localizada em C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• Opções de linha de comando: -m amd -t ES6 -outDir E:\myapp\js
• Verifique apenas o arquivo principal de compilação e aponte-o para o arquivo de entrada. E:\myapp\ts\main.tsSe não estiver marcada, todos os seus arquivos tentarão a saída para o caminho outDir.

Eu configuro o package.json assim para que digitar npm run starttudo para build. Os arquivos de origem são mantidos em src. O arquivo de saída é 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"
  }
}

Você pode excluir seu diretório de construção em tsconfig.json, embora provavelmente não seja necessário, já que há apenas JS lá:

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

Estou usando o Atom com a extensão atom-typescript e meu tsconfig.json se parece com isto:

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

Com relação ao Grunt, atualmente, para salvar a estrutura do projeto da pasta dev em produção e não obter um resultado inesperado após a compilação dos arquivos, consulte a opção:

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

Veja o rootDir opção nos documentos oficiais do grunt-ts.

Espero que ajude alguém se travar e conseguir um resultado estranho na produção.