要用 Babel 编译 TypeScript，核心是启用 @babel/preset-typescript 预设，它仅做语法转换（删类型注解、处理 interface/泛型等），不校验类型；类型检查须由 tsc 或 awesome-typescript-loader 协同完成。

要用 Babel 编译 TypeScript，核心是启用 @babel/preset-typescript 预设，并确保它在正确阶段介入——它只做语法转换（比如去掉类型注解、处理 interface、泛型等），不进行类型检查。类型校验仍需靠 TypeScript 编译器（tsc）或 loader 协同完成。

安装必要依赖

先安装 Babel 核心和 TS 预设：

• npm install --save-dev @babel/core @babel/cli @babel/preset-typescript
• 如果还需兼容旧环境（如 IE11 或低版本浏览器），顺带加：@babel/preset-env

配置 babel.config.json

在项目根目录创建 babel.config.json，内容如下：

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

注意：@babel/preset-typescript 默认会忽略 .d.ts 文件，并且不会处理类型错误——它只是“删类型”，不是“验类型”。所以建议搭配 tsc 进行类型检查，或使用 Webpack + awesome-typescript-loader 启用 useBabel: true 实现类型检查与 Babel 转换分离。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

立即学习“Java免费学习笔记（深入）”；

配合 Webpack 使用（推荐方式）

若用 Webpack 构建，更推荐用 awesome-typescript-loader（ATL）而非纯 Babel，因为它能同时跑类型检查和 Babel 转换：

• 安装：npm install --save-dev awesome-typescript-loader @babel/core @babel/preset-env
• Webpack rule 中启用 Babel：

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader',
  options: {
    useBabel: true,
    babelOptions: {
      presets: [['@babel/preset-env', { targets: 'last 2 versions, ie 11' }]]
    }
  }
}

这样 TypeScript 先被 ATL 编译为 JS，再交由 Babel 做目标环境适配（如箭头函数降级、async/await 转 Promise 等），分工清晰、构建更快。

注意事项与常见误区

以下几点容易出错，需特别留意：

• Babel 不读 tsconfig.json，所以 module、target、jsx 等配置对 Babel 无效——JSX 要额外加 @babel/preset-react，模块格式要靠 @babel/preset-env 的 modules 选项控制
• @babel/preset-typescript 默认不处理 import type 和 export type，但新版（v7.17+）已支持，无需额外插件
• 不要同时用 tsc --emitDeclarationOnly 和 Babel 编译同一份源码——容易重复输出或路径冲突；建议 Babel 只负责最终 JS 输出，声明文件（.d.ts）由 tsc 单独生成