TypeScript module 怎么设置

大家在做前端项目的时候，可能都遇到过文件之间引用混乱的问题——比如引用了一个不存在的文件，或者明明写了路径却报错。这时候TypeScript的模块设置就能帮上大忙，它就像一个“文件导航员”，能精准定位你要找的文件，还能帮你避开很多不必要的麻烦。今天就用大家熟悉的例子，把这个设置讲明白。

先搞懂：什么是TypeScript模块

简单来说，模块就是你写的单个文件，比如一个存按钮组件的button.tsx，或者处理表单的form.ts。你可以在index.ts里用import Button from './button'来引用这个文件，这两个文件之间就是通过“模块设置”来沟通的。

举个生活化的例子：模块就像你手机里的APP，每个APP负责一个功能——微信用来聊天，地图用来导航。而TypeScript的模块设置，就是你手机里的“应用权限”，它决定了哪些APP（模块）能互相访问，以及怎么找到它们的位置。如果权限设错了，你会收不到微信消息；如果模块设置错了，你就会找不到要引用的文件。

最基础的设置：先改`tsconfig.json`

要设置模块，首先得打开项目里的tsconfig.json文件——这是TypeScript的“配置说明书”，所有核心设置都在里面。最关键的两个选项是module和moduleResolution，就像模块设置的“导航模式”和“找路方式”。

先讲module：它决定了TypeScript最终把代码转成哪种浏览器能识别的格式，就像你决定把手机APP导出成安装包还是网页版。如果是普通的网页项目，选ESNext就很合适，它是最新的网页模块格式，以后更新也能用；如果是老项目，可能需要选CommonJS，这是Node.js常用的格式，就像导出成适合老系统用的安装包。

再讲moduleResolution：这是最容易搞混的部分，它决定了TypeScript怎么找你要引用的文件。这里推荐用bundler，现在大部分项目用的Vite、Webpack这些打包工具都支持这个选项，就像用导航APP找路，能自动识别你是本地文件还是第三方库，不用自己写复杂的路径。

举个实际的小例子：如果你的项目里有src/utils/date.ts这个工具文件，在src/components/list.ts里写import { formatDate } from '@/utils/date'，这时候就需要配合另一个设置baseUrl——把它设成"baseUrl": "./src"，这样@/就代表src文件夹，TypeScript就能准确找到utils/date.ts，不会报错“找不到模块”。

避坑小技巧：别踩这两个常见错误

很多人刚设置的时候会踩两个小坑，这里用例子给大家讲清楚。

第一个坑：module和moduleResolution不匹配。比如你选了module: "CommonJS"，却用moduleResolution: "bundler"，就像你本来要走老的公路，却用了导航的高速模式，肯定会出错。解决办法很简单，用Vite的话，直接把两个都设成"module": "ESNext", "moduleResolution": "bundler"就好，大部分情况都能兼容。

第二个坑：路径写错。比如你写了import { formatDate } from '../utils/date'，但utils文件夹的实际位置不是上一级，就像你把“地址”写错成“隔壁小区”，肯定找不到人。这时候用baseUrl加@的写法，就不用再写复杂的../，路径清晰又不容易错。

最后说一句，TypeScript的模块设置不用搞太复杂，先把tsconfig.json里的module和moduleResolution设对，再配合baseUrl简化路径，日常开发就够用了。等以后遇到更复杂的场景，再慢慢调整其他选项就好。