前言
TypeScript 是一种由微软开发的 JavaScript 的超集，它添加了静态类型检查和其他语言特性，可以帮助开发者编写更加健壮和可维护的代码。然而，由于 TypeScript 仅在最新的浏览器和 Node.js 版本中被原生支持，因此在旧版浏览器和 Node.js 中使用 TypeScript 语法就需要进行转换。这时候，Babel 就是一个很好的选择。
Babel 是一个 JavaScript 编译器，它可以将最新的 JavaScript 语法转换为旧版浏览器和 Node.js 支持的语法。除了转换 JavaScript 语法，Babel 还支持转换 TypeScript 语法。本文将详细介绍如何使用 Babel 编译 TypeScript 语法。
安装 Babel
首先，我们需要安装 Babel。可以通过 npm 进行安装：
npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-typescript
这里我们安装了 Babel 的核心模块 @babel/core，以及两个预设模块 @babel/preset-env 和 @babel/preset-typescript。@babel/preset-env 可以将最新的 JavaScript 语法转换为旧版浏览器和 Node.js 支持的语法，@babel/preset-typescript 可以将 TypeScript 语法转换为 JavaScript 语法。
配置 Babel
安装完成后，我们需要在项目根目录下创建一个 .babelrc 文件，来配置 Babel 的转换规则。在该文件中，我们可以指定需要转换的语法以及转换规则。在本篇文章中，我们将使用 @babel/preset-env 和 @babel/preset-typescript 两个预设模块。
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
]
}编译 TypeScript
安装和配置完 Babel 后，我们就可以开始编译 TypeScript 代码了。可以使用 Babel 的 CLI 工具来编译 TypeScript 代码。在 package.json 文件中添加以下命令：
{
"scripts": {
"build": "babel src --out-dir dist --extensions .ts"
}
}在上面的命令中，我们使用 babel 命令来编译 src 目录下的 TypeScript 代码，将编译后的代码输出到 dist 目录中，并指定输入文件的扩展名为 .ts。
示例代码
下面是一个简单的 TypeScript 代码示例：
-- -------------------- ---- -------
----- ------ -
------- ----- -------
----------------- ------- -
--------- - -----
-
------ ---------- -
------------------- ---------------
-
-
----- - - --- --------------
-------------使用 Babel 编译后的 JavaScript 代码如下：
-- -------------------- ---- -------
---- --------
--- ------ - -------- -- -
-------- ------------ -
--------- - -----
-
--- ------ - -----------------
--------------- - -------- ---------- -
------------------- - - -----------
--
------ -------
----
--- - - --- --------------
-------------总结
本文介绍了如何使用 Babel 编译 TypeScript 语法，并提供了详细的配置和示例代码。使用 Babel 编译 TypeScript 可以让我们在旧版浏览器和 Node.js 中使用 TypeScript 语法，从而提高代码的可维护性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3e91b2b3ccec22fc556b2