使用 @babel/preset-typescript 仅擦除 TypeScript 类型语法、不走 TS 编译器，速度快且配置轻；需安装 Babel 相关依赖，Webpack 中用 babel-loader 替代 ts-loader，无需 typescript 运行时或 tsconfig.json 参与构建。
直接用 @babel/preset-typescript 剥离类型、转译为 JS，核心是“不走 TS 编译器，只做语法擦除”，速度快、配置轻、适合开发阶段快速构建。
安装必要依赖
只需 Babel 生态，不需要 typescript 运行时（除非你还要做类型检查）：
npm install -D @babel/core @babel/preset-typescript babel-loader- 如果项目用 Webpack，确保已装
webpack和webpack-cli -
不用装
ts-loader、awesome-typescript-loader或typescript（除非 VS Code 需要语法高亮/跳转——那仅作编辑器支持，不参与构建）
配置 babel.config.js
推荐用 babel.config.js（全局生效，比 .babelrc 更稳定）：
module.exports = {
presets: [
'@babel/preset-env', // 转译 ES 新语法（如可选链、top-level await）
'@babel/preset-typescript' // 关键：只移除类型注解、interface、type alias 等，不做类型校验
],
plugins: [
'@babel/plugin-transform-runtime' // 复用 helper，减小包体积
]
};
注意：@babel/preset-typescript 默认不处理 import type / export type —— 这些会被保留。如需自动剔除，加插件：
立即学习“Java免费学习笔记（深入）”；
-
npm install -D @babel/plugin-syntax-import-attributes（Babel 7.24+ 内置支持import type自动忽略） - 或升级到 Babel 7.25+，它已原生跳过类型导入语句
Webpack 中启用 TS 处理
在 webpack.config.js 的 module.rules 里替换掉 ts-loader：
module: {
rules: [
{
test: /\.tsx?$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js'] // 让 import './foo' 自动匹配 .ts 文件
}
无需 tsconfig.json 参与构建流程 —— Babel 完全不读它。但建议保留该文件，供编辑器和 ESLint 使用。
关键行为说明
这个方案实际干了三件事：
- 把
const a: string = 'x'→const a = 'x'（擦除所有类型标注） - 把
interface Foo { x: number }、type Bar = string全部删除（不生成任何 JS 对应物） - 把
class A implements B中的implements关键字去掉，只保留 class 主体
它不做类型检查，也不报错。类型安全靠编辑器（VS Code）、tsc --noEmit 或 eslint-plugin-react + @typescript-eslint 在 pre-commit 或 CI 阶段兜底。
