TypeScript - 如何将编译的文件保存在单独的目录中？

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

使用--outDirtsc上的选项(在IntelliJ中的文件观察器中配置)

从命令行文档

--outDir DIRECTORY Redirect output structure to the directory.

编辑

从Typescript 1.5开始,这也可以在tsconfig.json文件中设置:

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

Answer 2

或者,添加"outDir": "build"到tsconfig.json文件

Answer 3

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

在Visual Studio Code中，转到File > Preferences > Settings或.vscode\settings.json文件，然后输入：

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

上面隐藏了存在相应.ts文件的.js文件。