如何在 Babel 中使用 TypeScript？

在前端开发中，TypeScript 的使用越来越普遍。它为 JavaScript 带来了强类型、接口、枚举等特性，使得代码更加健壮、易维护。而 Babel 则是一个广泛使用的 JavaScript 编译器，它能够将新的 JavaScript 语法转换为旧的语法，从而使得我们可以在现有的浏览器和环境中使用最新的语言特性。那么，如何在 Babel 中使用 TypeScript 呢？

安装

首先，我们需要安装一些必要的包：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime

• @babel/core：Babel 的核心代码库。
• @babel/preset-env：根据目标浏览器或环境，自动将代码转换为最佳的兼容性代码。
• @babel/preset-typescript：支持将 TypeScript 转换为 JavaScript。
• @babel/plugin-transform-runtime：在转换时引入 @babel/runtime，以避免重复引入代码。
• @babel/runtime：Babel 运行时的辅助函数。

配置

接下来，我们需要配置 .babelrc 文件：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

其中，presets 表示预设，plugins 表示插件。在这里，我们使用了 @babel/preset-env 和 @babel/preset-typescript 两个预设，以及 @babel/plugin-transform-runtime 插件。

示例代码

现在，我们可以写一些 TypeScript 代码，并使用 Babel 进行转换。例如，我们可以定义一个接口 User：

interface User {
  id: number;
  name: string;
  age: number;
}

然后，我们可以使用这个接口来定义一个函数：

function getUserInfo(user: User): string {
  return `ID: ${user.id}, Name: ${user.name}, Age: ${user.age}`;
}

最后，我们可以使用这个函数并输出结果：

const user = { id: 1, name: 'John', age: 30 };
console.log(getUserInfo(user));

这段代码可以被 Babel 转换为以下 JavaScript 代码：

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getUserInfo = getUserInfo;

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return (0, _assertThisInitialized2.default)(self); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); };

function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }

function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }

var User = /*#__PURE__*/function () {
  function User() {
    (0, _classCallCheck2.default)(this, User);
  }

  (0, _createClass2.default)(User, [{
    key: "id",
    get: function get() {
      throw new Error("Method not implemented.");
    }
  }, {
    key: "name",
    get: function get() {
      throw new Error("Method not implemented.");
    }
  }, {
    key: "age",
    get: function get() {
      throw new Error("Method not implemented.");
    }
  }]);
  return User;
}();

exports.User = User;

var getUserInfo = function getUserInfo(user) {
  return "ID: " + user.id + ", Name: " + user.name + ", Age: " + user.age;
};

exports.getUserInfo = getUserInfo;
var user = {
  id: 1,
  name: 'John',
  age: 30
};
console.log(getUserInfo(user));

总结

通过上述步骤，我们可以在 Babel 中使用 TypeScript，并将 TypeScript 代码转换为 JavaScript 代码。这样，我们就可以在旧的浏览器和环境中使用 TypeScript 的特性。同时，这也为我们提供了更多的选择，使得我们不必在项目中使用 TypeScript 编译器，而是可以使用 Babel 来进行转换。

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