前端工程化（四）：TypeScript、Babel 与浏览器兼容

使用 TypeScript 不等于运行时类型安全

TypeScript 的类型主要服务于开发和编译阶段。它可以帮助编辑器提示错误、帮助编译器检查类型关系，但类型信息通常会在输出 JavaScript 时被擦除。浏览器最终执行的是 JavaScript，并不会因为源码曾经写过一个接口类型，就在运行时自动验证数据。

例如接口声明返回：

type User = {
  name: string;
  age: number;
};

这只能约束编译器如何理解代码，不能保证后端真的返回了 name 和 age，也不能阻止服务端把 age 返回成字符串。外部接口、用户输入和本地存储数据仍需要 Zod 等运行时校验工具。

TypeScript 和 Babel 的职责不同

TypeScript 主要负责类型检查、类型推导和类型擦除。Babel 主要负责 JavaScript、JSX 等语法转换，把较新的语法转换成目标环境更容易解析的形式。

两者不能互相替代。Babel 默认不会像 TypeScript 那样完成完整的类型检查；TypeScript 编译器也不等于自动提供所有浏览器 Polyfill。在 Next.js 等框架中，框架会把类型检查和实际构建转换组织成不同阶段，项目需要分别理解和验证它们。

target 控制语法输出，不负责所有运行时 API

my-world/tsconfig.json 中有：

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "esnext",
    "noEmit": true
  }
}

target: ES2017 主要决定输出 JavaScript 的语法目标。例如源码使用可选链时，构建链可能将其转换成更旧的条件判断；源码使用较新的类或异步语法时，也可能根据目标进行降级。

但 target 不负责补齐浏览器缺失的运行时 API。它不能保证目标浏览器一定存在 Promise、fetch 或某些 Array.prototype 方法。语法能被转换，并不代表运行时能力已经存在。

noEmit: true 说明什么

noEmit: true 表示 TypeScript 只进行类型分析，不直接输出 JavaScript 文件。my-world 的最终语法转换、代码分割和构建产物由 Next.js 构建链路负责。

因此，项目中的 tsc 更像类型检查器，而不是最终打包器。面试中可以这样回答：TypeScript 负责在编译阶段发现类型问题，Next.js 或其底层编译链负责把源码转换并输出浏览器可加载的产物。

语法转换和 Polyfill 是两件事

假设源码使用可选链：

const city = user.profile?.address?.city;

如果目标环境不支持可选链，构建工具可以把它转换成一组条件判断。这是语法转换，因为代码表达方式被改写了。

如果目标浏览器不支持 Promise，问题就不同了。Polyfill 需要提供一个兼容实现，并注册相应的运行时 API，让业务代码仍然可以调用 Promise。core-js 等库可以提供这类实现。

所以，语法转换发生在构建阶段，Polyfill 解决的是运行时能力缺失。async/await 可能需要语法降级，但降级后的代码仍可能依赖 Promise，这正是两类兼容措施需要分别考虑的原因。

Browserslist 不能被 target 取代

target: ES2017 是一个语法输出目标，不是一份具体浏览器清单。不同浏览器对语法和运行时 API 的支持并不完全一致，项目还需要结合 Browserslist、框架默认策略、模块格式、Polyfill 和实际运行时 API 来判断支持范围。

本次对 my-world 的观察中，package.json 没有显式声明 Browserslist，也没有发现主动配置 core-js。锁文件中出现的 Polyfill 相关包属于传递依赖，不能直接证明项目已经建立了明确的浏览器兼容策略。

这意味着当前项目可以确认 TypeScript 的 target，但不能只凭这个字段写出完整的浏览器支持矩阵。要得到可对外承诺的兼容范围，还需要补充目标浏览器声明和实际构建验证。

如何验证一段语法从源码到产物的变化

验证可选链或 async/await 时，至少要区分三个证据层次：

1. 在源码中确认确实使用了目标语法。
2. 在 .next/static/chunks 等构建产物中搜索或查看转换后的代码，确认语法是否被降级。
3. 结合目标浏览器或兼容性测试，确认转换后的代码依赖哪些运行时 API，以及这些 API 是否由浏览器或 Polyfill 提供。

不要只因为 tsconfig.json 写了 target，就断言所有浏览器都能运行；也不要只看到构建成功，就断言外部接口数据具备运行时类型安全。