TypeScript 如何用 babel 编译
你可能已经用过JavaScript做开发，但如果是做中大型项目，肯定听过TypeScript（以下简称TS）——它给JS加了“类型检查”，能帮你少踩不少代码错误的坑。不过TS的代码浏览器或老版Node.js认不了，得转成普通JS，这时候babel就能派上用场。很多人搞不清TS怎么和babel搭起来，其实步骤很简单，跟着走就能搞定。
---
先搞懂：TS和babel为啥要配合？
TS是“带类型的JS”，但它的类型只在开发时有用，运行时会被删掉；而babel是代码转换器，能把新版JS、TS转成所有环境都能跑的旧版JS。如果不用babel，直接用TS自带的tsc编译器，也能转JS，但babel能做的事更多——比如按需转译、兼容不同浏览器，还能配合其他工具做打包、兼容处理。
举个生活化的例子：你用手写了一封带“隐形标注”（就是TS的类型）的信，tsc是直接把隐形标注撕掉的拆信工具，而babel是先把这封信改成对方能看懂的简化版，还能根据收件人（不同运行环境）调整内容，比tsc灵活。
---
第一步：装对工具，别漏项
要让babel处理TS，得装三个核心包，都是npm里的小工具，直接在项目终端敲命令就行：
@babel/core：babel的核心引擎，所有转换都靠它；@babel/cli：能让你在命令行直接运行babel命令；@babel/preset-typescript：专门处理TS的插件，负责把TS的类型代码转成普通JS。
打开项目的终端，切换到项目文件夹，敲：
`bash
npm install --save-dev @babel/core @babel/cli @babel/preset-typescript
`
这里要加--save-dev，因为这些工具只是开发时用的，上线后不需要。
---
第二步：配个简单的配置文件
babel需要知道“该怎么转”，得建一个小配置文件，名叫.babelrc，放在项目根目录（和src、node_modules这些文件夹平级）。这个文件就是个JSON格式的“转换说明书”，内容不用复杂：
`json
{
"presets": ["@babel/preset-typescript"]
}
`
就这一行就行——意思是“用@babel/preset-typescript这个预设规则，处理所有TS文件”。
如果你的项目还要转新版JS（比如ES6的箭头函数），可以再加个@babel/preset-env，这样babel会自动适配你需要兼容的环境，比如要兼容Chrome 58以上，就把配置改成：
`json
{
"presets": [
["@babel/preset-env", { "targets": { "chrome": "58" } }],
"@babel/preset-typescript"
]
}
`
不用怕复杂，这就像给说明书加了“要让收件人Chrome 58能看懂”的备注。
---
第三步：跑起来，看看效果
准备个测试用的TS文件，比如在项目里建个src/index.ts，写点带类型的代码：
`typescript
const sayHi = (name: string) => {
return 你好，${name}！;
};
console.log(sayHi("小明"));
`
现在用babel把它转成JS，命令很简单：
`bash
npx babel src --out-dir dist
`
src是你放TS文件的文件夹，--out-dir dist是说转好的JS放在dist文件夹里。
转好后打开dist/index.js，你会看到原来的类型name: string没了，变成了普通JS代码：
`javascript
const sayHi = (name) => {
return 你好，${name}！;
};
console.log(sayHi("小明"));
`
完美！这就是babel处理TS的结果——删掉了类型，转成了能运行的JS。
---
常见小坑避一避
- 别漏了
@babel/preset-typescript：如果没装这个预设，babel会报错，说“看不懂TS的类型代码”，就像你给别人看带标注的信，没说要去掉标注，对方以为是乱码。 - 别搞混tsconfig和babelrc：tsconfig是给TS编译器用的，babelrc是给babel用的，两者各管各的，不用互相抄配置。
- 文件名后缀要对：TS文件是
.ts或.tsx，babel会自动识别后缀，不用额外改配置。
这样一套下来，你就搞定了TS用babel编译的基本操作——既保留了TS的类型检查优势，又能用babel的灵活适配能力，不管是做小项目还是大型项目，都够用。