使用 Babel 转化 TypeScript 文件

TypeScript 是一种由 Microsoft 开发的静态类型语言。与 JavaScript 不同，TypeScript 可以在编译期间检查代码错误并提供更好的类型支持。但是，在运行时，浏览器无法直接识别 TypeScript 代码。因此我们需要使用工具将 TypeScript 代码转换成 JavaScript 代码。其中，Babel 是广泛使用的这类工具之一。

什么是 Babel？

Babel 是一个 JavaScript 编译器工具，可以将 ECMAScript 2015+ (ES6+) 代码转换为向后兼容的 JavaScript 代码。它也支持转换其他语言的代码，例如 TypeScript 和 Flow。

如何使用 Babel 转换 TypeScript 文件

要使用 Babel 转换 TypeScript 文件，我们需要先安装必要的工具和插件。首先，我们需要安装 TypeScript、Babel 和相关的 Babel 插件。可以使用以下命令进行安装：

npm install --save-dev typescript @babel/core @babel/cli @babel/preset-env @babel/preset-typescript 

然后我们创建一个 .babelrc 文件来配置 Babel，该文件应该位于项目根目录下:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

上述配置中，@babel/preset-env 是用来将新语法转换为老语法的预设；@babel/preset-typescript 则是用来将 TypeScript 转换为 JavaScript 的预设。

接着，我们在项目中创建一个 TypeScript 文件，例如 example.ts:

let person: {
  name: string;
  age: number;
} = {
  name: 'Alice',
  age: 30
};

console.log(`My name is ${person.name}. I am ${person.age} years old.`);

然后，我们可以用以下命令来将 TypeScript 文件转换成 JavaScript 文件：

npx babel example.ts --out-file example.js

运行上述命令后，Babel 将会把 example.ts 转换成 JavaScript，并将结果输出到 example.js 文件中：

var person = {
  name: 'Alice',
  age: 30
};
console.log("My name is ".concat(person.name, ". I am ").concat(person.age, " years old."));

这样，我们就成功地使用了 Babel 将 TypeScript 文件转换成了 JavaScript 文件。

总结

本文介绍了使用 Babel 将 TypeScript 转换为 JavaScript 的方法。通过阅读本文，您了解了什么是 Babel，以及如何配置和使用它。希望这篇文章对您有所帮助！

示例代码

• package.json：

{
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-typescript": "^7.13.0",
    "typescript": "^4.2.4"
  }
}

• .babelrc：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

• example.ts：

let person: {
  name: string;
  age: number;
} = {
  name: 'Alice',
  age: 30
};

console.log(`My name is ${person.name}. I am ${person.age} years old.`);

• 转换后的 example.js 文件：

var person = {
  name: 'Alice',
  age: 30
};
console.log("My name is ".concat(person.name, ". I am ").concat(person.age, " years old."));

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