使用 Babel 将 TypeScript 转换成 ES6+-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，TypeScript 作为一种静态类型语言，已成为越来越多开发者的首选。然而很多浏览器并不支持 TypeScript，所以为了让 TypeScript 代码在浏览器中运行，需要将其转换成 ES6+ 代码。在本文中，我们将介绍如何使用 Babel 将 TypeScript 转换成 ES6+。

Babel 简介

Babel 是一个 JavaScript 编译器，能够将 ECMAScript 2015+ 代码转换成向后兼容的 JavaScript 代码。Babel 可以根据配置文件的设置，将代码转换成特定版本的 JavaScript 代码，使得旧版浏览器也能顺利运行。

Babel 的优点在于它支持一系列插件，可以很方便地定制转换规则。这使得 Babel 成为目前最受欢迎的 JavaScript 编译器。

Babel 官网

在 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 类

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}!`;
  }
}

let greeter = new Greeter('world');
console.log(greeter.greet());

Babel 转换后的 ES6+ 代码

"use strict";

/**
 * Using Babel to transpile TypeScript to ES6+.
 */

class Greeter {
  constructor(message) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}!`;
  }

}

let greeter = new Greeter('world');
console.log(greeter.greet());

总结

使用 Babel 将 TypeScript 转换成 ES6+ 是让 TypeScript 源代码在浏览器中运行的必要步骤。Babel 的配置灵活性和定制性使得它成为当今最受欢迎的 JavaScript 编译器之一。通过阅读本文，您可以了解到如何使用 Babel 来转换 TypeScript 代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65acea0eadd4f0e0ff67b88f