红宝书第三十三讲：新手也能懂的转译工具指南：Babel vs TypeScript

---

红宝书第三十三讲：新手也能懂的转译工具指南：Babel vs TypeScript

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、转译（Transpilation）是什么？

将新语法写的代码（如ES2020）翻译成旧版本语法（如ES5），让所有浏览器都能正常执行 ¹。核心价值：

1. 兼容性：比如用最新语法开发，但让老浏览器也能运行
2. 增强功能：例如TypeScript添加静态类型检查

flowchart LR
    现代代码ES2021 --> 转译工具 --> 兼容代码ES5
    TypeScript代码 --> 转译工具 --> 标准JavaScript代码

---

二、Babel：JavaScript版本转换器

专注于将新版JS（如ES6）转为旧版（如ES5），支持插件拓展 ²。

典型使用场景：写React项目时：

1. ES6箭头函数 → 转为普通函数
2. JSX语法 → 转为React.createElement调用

配置示例（.babelrc文件）：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

安装及使用：

# 安装核心包和React预设
npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react

# 转译src目录代码到lib目录
npx babel src --out-dir lib

---

三、TypeScript：带类型检查的超集

提供静态类型系统，代码更健壮，需转译为纯JS运行 ³。

核心特性对比：

// JavaScript写法
function sum(a, b) {
    return a + b;
}

// TypeScript改写（添加类型注解）
function sum(a: number, b: number): number {
    return a + b;
} 

→ 编译时会检查参数类型是否合法（比如传入字符串会报错）³

快速使用步骤：

# 初始化项目
npm install -g typescript
tsc --init  # 生成tsconfig.json

# 编写文件（hello.ts）
const message: string = 'Hello TS';
console.log(message);

# 转译为JS
tsc hello.ts  # 生成hello.js

---

四、横向对比：如何选择？

工具	核心功能	场景
Babel	语法降级兼容，扩展新语法	旧项目升级，React/Vue项目构建
TypeScript	类型约束 + 语法降级	大型项目开发，多人协作减少错误

---

五、实战演示：两个工具协作

现代项目通常同时使用：\
TS处理类型 → Babel处理语法转换

配置方案：

// package.json
{
  "scripts": {
    "build": "tsc && babel src --out-dir dist"
  }
}

工作流示意：

TypeScript代码(.ts) → 生成现代JS → Babel转译为旧版JS

---

目录：总目录
上篇文章：红宝书第三十二讲：零基础学会模块打包器：Webpack、Parcel、Rollup

---

脚注

---

1. 《JavaScript高级程序设计（第5版）》解释转译是保持代码在旧浏览器可运行的技术 ↩
2. 《JavaScript高级程序设计（第5版）》描述Babel支持新语法转译和插件系统 ↩
3. 《JavaScript高级程序设计（第5版）》指出TypeScript通过编译增强代码稳定性 ↩