TypeScript 如何打包

日常写前端代码时，很多人都遇到过这样的麻烦：写了几十行带“类型标注”的代码，放到浏览器里就报错，因为浏览器根本不认识那些冒号、尖括号。这时候，TypeScript（简称TS）的打包就派上用场了——它能把你写的“带类型的代码”，变成浏览器能看懂的普通JS，还能帮你检查代码里的小错误，相当于给代码做了一次“翻译+体检”。

---

先搞懂：TS打包到底在做什么？

很多新手以为“TS打包”就是把代码拼到一起，其实是两步工作。举个生活化的例子：你用手机写了一篇带拼音标注的作文（这就是TS代码，类型标注像拼音，帮你理清变量的身份），老师看不懂带拼音的版本，你需要做两件事：第一，把拼音去掉（这是“转译”，TS转成JS）；第二，把分散的作文段落整理成一篇完整的文章（这是“模块合并”，把多个小文件拼成一个）。

TS的打包核心，就是转译+模块处理，而且自带“拼写检查”——如果你把作文里的“猫”写成了“描”，打包时会直接提醒你，不用等老师改作业。

---

第一步：先搭好TS的“基础舞台”

要打包TS，不能直接写代码就跑，得先准备一个简单的项目环境，就像搭积木得先铺好底板。只需要3步，新手5分钟就能搞定：

• 先装Node.js（就像装积木的收纳盒，管理所有工具），直接去官网下载对应版本就行；
• 新建一个文件夹，在里面开命令行，输入npm init -y生成一个配置文件（相当于给你的作文本写好“作者、标题”等基础信息）；
• 安装TS工具，命令行输npm install typescript --save-dev，再初始化TS配置文件——输入npx tsc --init，会自动生成一个tsconfig.json，这里面是TS的“翻译规则”，比如要转成哪种JS版本、要不要保留注释等，默认配置对新手已经够用。

---

第二步：两种常见打包方式，选简单的就行

新手不用纠结复杂的工具，目前最常用的两种打包方式，一种适合小项目，一种适合稍大的项目，各有优势：

原生TS打包：适合100行以内的小代码

如果只是写个简单的工具脚本，比如自动整理待办清单，用原生TS就能搞定，不用装额外工具。

比如你新建一个todo.ts文件，写了几行带类型的代码：

`typescript

// 定义待办事项的类型

const todoList: string[] = ["买牛奶", "交电费"];

console.log(todoList);

`

只要在命令行输npx tsc todo.ts，就会自动生成一个todo.js，打开看就会发现，原来的类型标注（: string[]）被删掉了，变成了普通JS——这就是转译完成，直接把这个JS文件放到浏览器或Node里就能跑，连打包工具都不用。

用Vite打包：适合组件多的前端项目

如果是做网页，要用到多个组件文件（比如header.ts、content.ts），原生打包会把它们散成多个JS，浏览器加载会变慢，这时候就需要用打包工具合并，Vite是现在最适合新手的选择，比旧工具Webpack简单太多。

还是用刚才的待办清单举例，只要在项目里装Vite（npm install vite --save-dev），再在package.json里加一行脚本："dev": "vite"，然后新建一个index.html，把TS文件的引用写进去，输npm run dev，Vite会自动帮你把所有TS文件合并、转译，还能实时预览修改效果，改一行代码就自动刷新，不用手动打包。

---

打包后还要注意这2个小细节

打包不是一劳永逸，有两个新手常踩的坑要避开：

一是别漏看TS的报错提示，打包时如果终端弹出“类型不匹配”的红字，比如你把数字放到了string[]类型的数组里，一定要先改代码再打包，不然就算打包成JS，跑起来也会出错；

二是生产环境要压缩代码，开发时用Vite或原生打包就行，但上线前可以在Vite配置里加build选项，自动把打包后的JS压缩成几行，减小文件大小，让网页加载更快。

其实TS打包的本质，就是把“方便人写的代码”变成“方便机器跑的代码”，新手不用追求复杂配置，先从原生TS或Vite入手，就能搞定大部分日常场景，等项目大了再慢慢调整配置就好。