我如何获得Typescript编译器将已编译的js输出到其他目录？

Question

我对TypeScript还是相当陌生，现在我在整个项目结构中的多个位置都有.ts文件：

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

现在，当编译我的文件时，它们被编译到.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

虽然我喜欢.js文件与.ts文件保持相同的目录结构的方式，但我不想在VCS中跟踪.js文件，所以我想保留所有JavaScript文件在单独的目录树中（然后可以将其添加到.gitignore中），如下所示：

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

某处是否有设置或选项会告诉TypeScript编译器执行此操作？另外，我不确定是否相关，但是我正在使用WebStorm。

Answer 1

使用tsc上的选项--outDir（在IntelliJ的File Watcher中配置）

从命令行文档

--outDir DIRECTORY Redirect output structure to the directory.

编辑

自打字稿1.5起，也可以在tsconfig.json文件中设置：

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

Answer 2

或者，将"outDir": "build"添加到tsconfig.json文件中>

Answer 3

尽管这些答案是正确的，但您应该考虑是否实际上只是想从IDE中隐藏.js文件] >>。

Answer 4

如果您想在js中映射app / scripts文件夹的目录结构，建议对文件监视程序使用以下设置：

Answer 5

我这样安装package.json，以便键入npm run start会将所有内容输出到build。源文件保存在src中。外文件由--outDir build指定。

Answer 6

Intellij用户，将Typescript编译到多个输出目录中

Answer 7

我正在使用具有原子类型脚本扩展名的Atom和我的tsconfig.json看起来像这样：

Answer 8

关于Grunt，当前将dev文件夹项目结构保存在生产环境中，并且在文件编译后不会出现意外结果，请参考以下选项：