在前端开发中，使用 TypeScript 可以为我们的项目带来更好的可维护性和代码可读性，但是有些浏览器不支持 TypeScript。这时，我们可以使用 Babel 工具将 TypeScript 代码转换为普通的 JavaScript 代码。本篇文章将介绍如何使用 Babel 转换 TypeScript 代码的正确姿势。
安装依赖
首先，我们需要在项目中安装以下两个依赖：
@babel/core：Babel 的核心包，提供了基本的转换器和插件管理。@babel/preset-typescript：将 TypeScript 转换为 JavaScript 所需的 Babel 插件集合。
我们可以使用以下命令进行安装：
--- ------- ---------- ----------- ------------------------
配置 Babel
接下来，我们需要在项目根目录下创建一个 .babelrc 文件，并将以下代码添加到文件中：
-
---------- -
--------------------------
-
-这将告诉 Babel 使用 @babel/preset-typescript 插件将 TypeScript 代码转换为 JavaScript。
配置 TypeScript
我们还需要为 TypeScript 文件添加配置，告诉 TypeScript 编译器将代码转换为 ES5 或 ES6 代码。我们可以在 tsconfig.json 文件中添加以下配置：
-
------------------ -
--------- ----- -- - -----
-
-这将告诉 TypeScript 编译器将代码编译为 ES5 或 ES6 代码。
示例代码
我们来看一个示例代码，演示如何将 TypeScript 代码转换为 JavaScript：
-- ------------
----- ------ -
------------------- ----- ------- ------- ---- ------- --
---------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
-
----- ---- - --- -------------- ----
----------------执行以下命令，将 TypeScript 代码转换为 JavaScript 代码：
--- ----- --- --------- ----
转换后的 JavaScript 代码如下：
-- -------------
--- ------ - --- ------ -- --------- -- -
-------- ------------ ---- -
--------- - -----
-------- - ----
-
------------------------- - -------- -- -
------------------- -- ---- -- - - --------- - - --- - -- - - -------- - - ----- -------
--
------ -------
-----
--- ---- - --- -------------- ----
----------------结论
以上就是使用 Babel 转换 TypeScript 代码的正确姿势。通过讲解以上的步骤和示例，希望对开发者们有所指导。在实践中，还需要结合具体的项目需求和实际场景来使用 Babel 和 TypeScript。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67302b13eedcc8a97c913e56