在现代的前端开发中，TypeScript 作为一种静态类型语言，已成为越来越多开发者的首选。然而很多浏览器并不支持 TypeScript，所以为了让 TypeScript 代码在浏览器中运行，需要将其转换成 ES6+ 代码。在本文中，我们将介绍如何使用 Babel 将 TypeScript 转换成 ES6+。
Babel 简介
Babel 是一个 JavaScript 编译器，能够将 ECMAScript 2015+ 代码转换成向后兼容的 JavaScript 代码。Babel 可以根据配置文件的设置，将代码转换成特定版本的 JavaScript 代码，使得旧版浏览器也能顺利运行。
Babel 的优点在于它支持一系列插件，可以很方便地定制转换规则。这使得 Babel 成为目前最受欢迎的 JavaScript 编译器。
在 TypeScript 应用中使用 Babel
下面是几个步骤，来说明在 TypeScript 应用中引入 Babel：
步骤 1：安装工具
在开始之前，需要使用 Node.js 包管理器（如 npm 或 yarn）安装 Babel 和相关插件。
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @babel/polyfill
@babel/core是 Babel 的核心模块，提供了基本的功能。@babel/preset-env是 Babel 的预设模块，能够根据目标浏览器版本自动转换代码。@babel/preset-typescript是 Babel 的额外插件模块，用于识别 TypeScript 代码。@babel/polyfill是 Babel 的垫片模块，可使代码在老浏览器中运行。
步骤 2：创建配置文件
Babel 配置文件 .babelrc 需要放在项目根目录下。在其中，我们需要添加以下配置项：
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}这些预设用于告诉 Babel 如何将代码转换成 ES6+。
步骤 3：添加构建脚本
在 package.json 文件中添加脚本命令：
"scripts": {
"build": "babel src -d dist"
}src是 TypeScript 源代码目录。dist是转换后的代码目录。
执行 npm run build 命令，Babel 将转换 TypeScript 代码并放到 dist 目录中。
示例代码
下面是一个示例代码的 TypeScript 类和 Babel 转换后的 ES6+ 代码。
TypeScript 类
-- -------------------- ---- -------
----- ------- -
--------- -------
-------------------- ------- -
------------- - --------
-
------- -
------ ------- -------------------
-
-
--- ------- - --- -----------------
-----------------------------Babel 转换后的 ES6+ 代码
-- -------------------- ---- -------
---- --------
---
- ----- ----- -- --------- ---------- -- -----
--
----- ------- -
-------------------- -
------------- - --------
-
------- -
------ ------- -------------------
-
-
--- ------- - --- -----------------
-----------------------------总结
使用 Babel 将 TypeScript 转换成 ES6+ 是让 TypeScript 源代码在浏览器中运行的必要步骤。Babel 的配置灵活性和定制性使得它成为当今最受欢迎的 JavaScript 编译器之一。通过阅读本文，您可以了解到如何使用 Babel 来转换 TypeScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65acea0eadd4f0e0ff67b88f