Javascript 如何在Mac OS X上从新的Visual Studio代码中编译TypeScript文件

微软刚刚发布了适用于MacOSX平台的新Visual Studio代码。它支持TypeScript，因为人们可以获得TypeScript代码的自动完成和错误报告

---

我的问题：我们如何从VisualStudio代码中编译一个TypeScript文件（以生成相应的JavaScript文件）？我已经按照建议创建了一个默认的tsconfig.json文件，只使用{}，并尝试调用shift+command+B，但这不会生成更新的JavaScript文件。

您需要设置一个任务来完成此操作

如果我在使用不同的操作系统时，走错了捷径，我会提前道歉。对于任何使用Windows的人来说，它将是

CTRL

——我认为OSX版本只是意味着使用

CMD

如果按CTRL+

SHIFT

+

p

，应该会出现一个操作菜单，允许您搜索所有命令

键入

Configure Task Runner

。如果您还没有，这将在设置文件夹中为您创建一个tasks.json文件。否则，它将打开现有的tasks.json文件

您可以取消对内置的TypeScript任务的注释-它如下所示（我的主文件是app.ts，此文件中的默认文件是HelloWorld.ts）：

然后，您可以使用

CTRL

+

SHIFT

+

B

按需执行此任务

如果定义了多个任务，您可以使用

CTRL

+

E

并键入

task

（注意“task”后面的空格），它将为您提供所有任务的列表，供您选择

你的手不需要离开键盘去做这些

最后。。。如果仍然没有得到任何信息，请检查窗口底部的此图标，因为可能存在编译器错误。。。（下面的图标显示了一个错误-请在编辑器中单击以了解详细信息）

---

我找到了一个在Mac电脑上运行的解决方案。在args行中，我输入了要编译的TypeScript文件的完整路径名。然后，使用CMD+SHIFT+B启动构建成功地运行了tsc编译器，并成功地生成了相应的JavaScript文件。

您需要一个tsconfig.json文件来定义TypeScript编译器的所有选项，需要一个tasks.json文件来设置编译器选项

tsconfig.json

tasks.json。。。请参阅带有${file}的“args”行以编译打开的文件

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["${file}"],

    // Use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

---

更多信息：

我在tsc transpiler（因为它将源代码从一种格式编译成另一种格式）没有生成“.js”文件时遇到了同样的问题

解决方法：

尝试在Windows命令提示符（cmd.exe-以管理员身份运行）中执行以下命令：

tsc测试.ts

请确保文件夹路径正确，否则请提供“.ts”文件的绝对路径

希望它能在与“.ts”文件相同的文件夹中生成“.js”文件

既然生成了“.js”文件，为了避免每次进行更改时都执行上述命令，您可以在tsc中执行自动Transfilation watch命令

要对“.ts”文件执行自动透明，请尝试运行以下命令：

tsc test.ts --watch

现在，如果您返回到“.ts”文件并进行更改并点击Save，它将执行自动透明并立即更新“.js”文件。请记住保持命令提示符运行

我还没有探究tsc transpiler不使用Visual Studio Code的Ctrl+Shift+Bkeypress的原因，但我的最佳猜测是我的Visual Studio Code安装所使用的tsc版本或定义的环境路径变量或npm安装了不同的tsc版本。。原因可能是多方面的

输出：

---

但是对于那些想快速完成任务的人，我希望这个解决方案能有所帮助。

你只是在解决方案资源管理器中看不到它，或者根本看不到它？你可以在这里查看我的答案。我有一个tasks.json文件，如Steve Fenton的帖子中所述（除了我用TypeScript文件的名称代替app.ts）。当我通过CMD+SHIFT+B启动它时，我看到这条垂直线旋转，表示某些活动正在进行，但没有生成与我最近的TypeScript代码相对应的新JavaScript文件输出。@RichardFuhr你能和我共享你的文件吗？这样我就可以看看是否可以重新创建问题。我主要需要你的tsconfig.json和tasks.json文件。

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["${file}"],

    // Use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

tsc test.ts --watch