要用 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 转换分离。
配合 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 单独生成
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
