TypeScript 是一种由 Microsoft 开发的静态类型检查器，它可以在编写 JavaScript 代码的同时提供类型检查的功能。在现代的前端开发中，使用 TypeScript 已经成为了一种趋势。但是 TypeScript 代码需要被转换成 JavaScript 后才能在浏览器中运行，而大多数浏览器目前仅支持 ES5 版本的 JavaScript。因此，我们需要使用 Babel 将 TypeScript 代码转换成 ES5。
安装依赖
首先，我们需要在项目中安装以下依赖：
- "@babel/core": Babel 编译器核心
- "@babel/preset-env": Babel 的预设，用于将 ES6+ 的语法转换为 ES5
- "@babel/preset-typescript": Babel 的预设，用于将 TypeScript 转换为 JavaScript
可以使用以下命令进行安装：
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript
配置 Babel
我们需要在项目中创建一个名为 .babelrc 的文件，并在其中配置 Babel 的预设和插件。以下是一个示例配置：
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
]
}上面的配置表示使用 @babel/preset-env 将 ES6+ 的语法转换为 ES5，同时使用 @babel/preset-typescript 将 TypeScript 转换为 JavaScript。
使用 Babel
在实际使用中，我们可以使用 Babel CLI 命令行工具来将 TypeScript 文件转换成 ES5 JavaScript。以下是一个示例命令：
npx babel src --out-dir lib --extensions ".ts"
上面的命令表示将 src 目录下所有的 .ts 文件转换成 ES5 JavaScript，并输出到 lib 目录下。
使用示例
我们可以通过以下示例来进一步了解使用 Babel 将 TypeScript 转换成 ES5：
TypeScript 代码
-- -------------------- ---- -------
----- ------ -
------------------- ----- ------- --
------ ------- -
---------------- -- ---- -- ----------------
-
-
----- ------ - --- --------------
---------------Babel 转换后的 ES5 代码
-- -------------------- ---- -------
---- --------
--- --------------- - ----- -- --------------------- -- -------- ----- -
------ ---- -- --------------- - --- - - ---------- --- --
--
--- ------ - --- ------ -- --------- -- -
-------- ------------ -
--------- - -----
-
---------------------- - -------- -- -
---------------- -- ---- -- - - --------- - -----
--
------ -------
-----
--- ------ - --- --------------
---------------结论
使用 Babel 将 TypeScript 转换成 ES5 可以使得我们的 TypeScript 代码在目前不支持 TypeScript 的浏览器中运行。同时，使用 Babel 还可以将 ES6+ 的语法转换为 ES5。在实际项目中，我们可以结合 Webpack 使用 Babel 来编译 TypeScript 代码，并使得项目运行起来更加稳定和兼容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fb55fe884a3e30f300456