在 Visual Studios Code 2015 中自动构建 TypeScript 项目

Posted 2023-03-13

【中文标题】在 Visual Studios Code 2015 中自动构建 TypeScript 项目

【英文标题】：Auto-Build TypeScript Project in Visual Studios Code 2015

【发布时间】：2015-08-16 20:07:00

【问题描述】：

我刚开始使用 Type Script，并且正在使用新的 Visual Studios Code IDE。我目前面临一个问题，我既可以使用 Visual Studios 类型脚本插件，也可以使用 node.js 运行 javascript 文件。但是，保存 ts 文件时，它不会自动构建 js 文件。所以我卸载了插件，并根据这个视频安装了打字稿：

https://egghead.io/lessons/typescript-typescript-up-and-running-in-seconds

现在我可以使用 --watch 选项构建一个 ts 文件，但是当我继续进行需要它的更复杂的项目时，我将如何完成自动构建多个 .ts 文件？

这也是使用 Visual Studios Code 作为我的 IDE 编写 TypeScript 的最佳方式吗？目前我不是这个设置的超级粉丝，因为我必须打开一个终端来观看单个 ts 文件（这可能意味着需要一堆窗口来观看每个文件，并且还需要打开一个终端来运行程序.

【参考方案1】：

我不确定您使用的是Visual Studio Code 还是Visual Studio 2013。我假设它是 VS Code（如果不是，请考虑切换。VS Code 真的很棒！）。

现在我将引用 another answer 的内容。

您可以使用构建命令来做到这一点：

使用watch = true 创建一个简单的tsconfig.json（这将指示编译器查看所有已编译的文件）：

    "compilerOptions": 
        "target": "ES5",
        "out": "js/script.js",
        "watch": true
    

注意files数组被省略，默认会编译所有子目录下的所有*.ts文件。

配置你的任务（Ctrl+Shift+P -> Configure Task Runner）：

    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "silent",
    "isShellCommand": true,
    "problemMatcher": "$tsc"

现在按Ctrl+Shift+B 构建项目。您将在输出窗口 (Ctrl+Shift+O) 中看到编译器输出。

查看我的一个项目以了解更多信息： tsconfig.json, .settings/tasks.json.

【讨论】：

所以没有办法自动完成？

在您构建一次 (Ctrl+Shift+B) 后，它会在保存时自动监视并重新编译所有文件。您可以随时Terminate running task 或关闭项目以停止编译器。

我收到以下错误：tsc.js(25345, 17) JavaScript 运行时错误：对象不支持属性或方法'watchFile'

可能您使用的是 Visual Studio Tools 中的 TypeScript 编译器，而不是 NPM 编译器（仅适用于 Windows）。检查您的编译器：where tsc。如果使用的不在AppData\Roaming\npm 文件夹中（可能在Program Files 下），则应将其删除并从NPM 安装：npm install -g typescript。

在 @zlumer 的基础上构建，您还需要从系统 PATH 环境变量中删除 Program Files (x86)\Microsoft SDKs\TypeScript 路径，因此它使用来自 npm 的路径。您可以查看 Powershell 中使用的是哪一个：get-command tsc