如何在 OS X 上使用 Visual Studio Code 自动编译 TypeScript 文件?
TypeScript 是一种流行的编程语言，广泛应用于 Web 开发行业。它是一种开源、强类型、面向对象的编程语言，是 JavaScript 的超集。TypeScript 与 JavaScript 非常相似，但它有一些额外的特性，使其更加强大和高效。TypeScript 最大的优点之一是它可以编译成 JavaScript，从而可以在任何浏览器或服务器上运行。
在本文中，我们将讨论如何在 OS X 上使用 Visual Studio Code 自动编译 TypeScript 文件。Visual Studio Code 是一款流行的代码编辑器，被全球众多开发人员使用。它轻量级、快速，并具有许多使编码更轻松、更高效的功能。
分步指南
在开始之前，请确保您已在系统上安装了最新版本的 Visual Studio Code 和 TypeScript。
您可以从其官方网站 (https://code.visualstudio.com/) 下载 Visual Studio Code。
Visual Studio Code (VS Code) 包含 TypeScript 语言支持，但不包含 TypeScript 编译器 tsc。您可以全局安装 TypeScript 编译器，也可以在工作区中安装，以将 TypeScript 源代码转换为 JavaScript。您可以运行以下任意命令将 tsc 安装到您的系统中。
如果您使用 npm，请运行此命令。
npm install -g typescript
或者，如果您使用 yarn，请运行此命令。
yarn global add typescript
或者，如果您使用 pnpm
pnpm install -g typescript
或者，您可以通过从上述命令中删除 global 或 -g 选项，将其仅安装到您的工作区(项目)中。
在我们首先，请运行以下命令，确保您已在系统上正确安装了 TypeScript -
tsc -v
只要您得到类似这样的结果，就可以开始您的旅程了 -
现在您的系统已设置完毕，让我们开始学习如何在 OS X 上使用 Visual Studio Code 编译 TypeScript 文件。
请务必记住，VS Code 的 TypeScript 语言服务与您安装的 TypeScript 编译器是相互独立的。打开 TypeScript 文件时，您可以在状态栏中看到 VS Code 的 TypeScript 版本。
步骤 1:创建 TypeScript 项目
第一步是创建一个 TypeScript 项目。打开 Visual Studio Code 并为项目创建一个名为 typescript-demo 的新目录。项目名称对于本教程来说无关紧要。
接下来，在 Visual Studio Code 中按 Cmd + Shift + P 打开终端，并在命令面板中输入"Terminal: Create New Integrated Terminal"。您也可以通过按 Ctrl + Shift + ` 创建一个新终端。
现在，在终端中导航到项目文件夹，并使用以下命令创建一个新的 TypeScript 文件 -
touch index.ts
步骤 2:创建 Tsconfig.json 文件
下一步是创建 tsconfig.json 文件。此文件会告诉 TypeScript 编译器如何编译您的 TypeScript 文件。使用以下命令在项目目录中创建一个新文件 -
touch tsconfig.json
接下来，打开 tsconfig.json 文件并添加以下代码 -
{
"compilerOptions": {
"target": "es5",
"out": "js/script.js",
"watch": true
}
}
此处，"target"选项指定了编译后的 JavaScript 的 ECMAScript 版本。"out"选项指定了编译后的 JavaScript 代码的位置。"watch": true 选项指示编译器监视所有编译后的文件 -
请注意，files 数组被省略。因此，默认情况下，所有子目录中的所有 *.ts 文件都将被编译。您可以提供任何其他参数或更改 target/out，只需确保 watch 设置为 true。
您还可以在此文件中设置许多其他选项，例如 module、esModuleInterop、forceConsistentCasingInFileNames、strict、skipLibCheck，这些选项可以让您作为 TypeScript 开发人员的工作更轻松，您可以参考此文档 (https://www.typescriptlang.org/tsconfig)。
您也可以使用以下命令创建默认的 tsconfig.json:
tsc --init
这将创建一个包含默认参数值的 tsconfig.json 文件。它看起来会像这样 -
步骤 3:配置 Visual Studio Code 以编译 TypeScript 文件
按 Ctrl+Shift+B 在 VS Code 中打开任务列表，然后选择 tsc: watch - tsconfig.json。
您将看到一个终端窗口打开，如下所示
现在好消息是您已经完成了!现在，您可以更改 index.ts 文件，并在每次保存时实时查看其转换为 JavaScript 代码的效果。
示例
按 Cmd + \ 将 VS Code 编辑器屏幕一分为二，然后将以下代码复制粘贴到您的 index.ts 文件中。现在，使用 Cmd + s 保存文件。
console.log("Live compilation of TypeScript files")
function add(x: number, y: number): number {
return x+y
}
console.log(add(4, 5))
您可以在 tsconfig.json 文件中指定的位置找到已编译的 JS 文件。
输出
您可以通过运行以下命令来运行已编译的 JS 源代码:
node index.js
结论
总而言之，在 OSX 上使用 Visual Studio Code 自动编译 TypeScript 文件可以显著改善您的开发工作流程。按照本文概述的步骤，您可以轻松设置 Visual Studio Code 自动编译您的 TypeScript 文件，让您专注于编写代码，而无需担心手动编译。随着 TypeScript 的普及，优化您的开发流程至关重要，而自动编译代码正是实现这一目标的绝佳方法。
