TypeScript 如何用 vite 编译
日常写前端代码时，大家大概率都遇过“刚写完的代码本地跑得好好的，上线却报错”的情况——比如变量类型不匹配、方法名拼错，这些小问题往往藏得很深，调试起来特别费时间。
这种时候，很多人会选择用 TypeScript（以下简称 TS）来帮自己“把好类型关”，但不少人刚接触这个工具时，最头疼的就是“怎么把 TS 代码转成浏览器能看懂的普通 JS”，毕竟要是编译步骤错了，再好用的 TS 也发挥不了作用。而 vite 作为现在最火的前端构建工具，刚好能完美解决这个问题，接下来就一步步讲清楚，怎么用 vite 编译 TS。
第一步：先搭好 vite 的基础项目
要编译 TS，首先得有个 vite 项目打底，不用自己从零搭建，直接用官方的脚手架就能快速搞定。打开电脑的命令行（Windows 用 cmd 或 PowerShell，Mac 用终端），输入下面这行命令：
`
npm create vite@latest my-ts-demo -- --template vanilla-ts
`
这行命令的意思是，用 npm 调用 vite 最新版，创建一个叫 my-ts-demo 的文件夹，项目模板选“原生 JS+TS”。输完后跟着提示走，先进入项目文件夹，再安装依赖，最后启动本地开发服务器：
`
cd my-ts-demo
npm install
npm run dev
`
等服务跑起来，打开浏览器输入提示的地址（一般是 http://localhost:5173），就能看到 vite 帮你搭好的初始页面——这时候你已经有了一个能跑的 TS 项目，接下来就可以开始体验 vite 编译 TS 的效果了。
第二步：用 TS 写一段简单代码试试
刚创建的项目里，已经有默认的 TS 文件了，在 src 文件夹里能找到 main.ts，你可以把里面的内容改成一段带类型的简单逻辑，比如：
`typescript
// 定义一个函数，参数要求是数字，返回值也是数字
function addNumbers(a: number, b: number): number {
return a + b;
}
// 调用函数，输出结果
console.log(addNumbers(2, 3));
`
这段代码里，我们给函数参数 a 和 b 都标了 number 类型，意思是只能传数字进去，要是传字符串，比如 addNumbers("2", 3)，vite 会在启动时就直接报错，不用等到代码跑起来才发现问题——这就是 TS 的类型检查作用。
第三步：看看 vite 是怎么编译 TS 的
现在你可以试试改个错，比如把 addNumbers(2,3) 改成 addNumbers("2",3)，保存后刷新页面，你会看到命令行直接弹出红色的错误提示，告诉你“字符串不能赋值给数字类型的参数”，这就是 vite 内置的 TS 检查在工作。
那 vite 到底把 TS 代码编译成了什么？其实你不用手动找编译后的文件，直接看浏览器控制台就行。打开浏览器的开发者工具（按 F12 或右键选“检查”），切换到“Console”标签，你会看到 addNumbers 函数的实际运行代码是：
`javascript
function addNumbers(a, b) {
return a + b;
}
console.log(addNumbers(2, 3));
`
你会发现，原来的 TS 类型标注（: number）全消失了，这就是 vite 帮你做的编译——它把带类型的 TS，转成了浏览器能直接看懂的普通 JS，而且还帮你做了类型检查，从源头减少了代码错误。
第四步：如果要编译成生产环境的代码呢？
平时开发用本地服务就行，要是要把项目部署到线上，就得生成压缩好的生产版代码。这时候直接在命令行输入：
`
npm run build
`
这个命令会让 vite 自动完成 TS 编译、压缩、混淆等一系列操作，编译后的文件会放在项目根目录的 dist 文件夹里。你可以打开 dist 里的 JS 文件看看，原来的代码会被压缩成一行，变量名也会变成 a 这样的短字符，这样既减小了文件体积，又能防止别人轻易看懂你的源码，完美适配线上部署的需求。
最后补一个常见小问题
刚接触 TS + vite 的人，有时候会遇到“明明写了 TS，却没类型检查”，大概率是项目根目录里缺了 tsconfig.json 文件——这个文件是 TS 的配置文件，vite 会自动生成，要是不小心删了，重新运行 npm create vite 命令就能恢复，它会帮 vite 明确“怎么处理 TS 代码、支持哪种版本的 JS”，是整个编译流程的核心配置。
其实 vite 做 TS 编译根本不用你自己写复杂的配置，它内置了对 TS 的原生支持，只要跟着步骤搭好项目，写好带类型的 TS 代码，剩下的编译、检查、打包全交给 vite 就行，哪怕是新手也能快速上手，既能享受到 TS 的类型安全，又不用纠结复杂的构建配置。