TypeScript baseUrl 怎么用
在前端开发过程中，经常会遇到import路径写得乱七八糟的情况——比如从src/components导入一个组件，可能需要写'../../components/Button'，如果文件层级再深一点，路径里的../多到数不清，稍微改一下文件位置，路径就全错了。这时候TypeScript的baseUrl功能，就是帮我们解决这个麻烦的实用工具。
什么是baseUrl？简单说就是设置“根目录入口”
baseUrl是TypeScript配置文件tsconfig.json里的一个选项，作用是告诉编译器：“以后找模块的时候，就从这个根目录开始找，不用再写一堆../往上跳了”。打个比方，你平时去朋友家，每次都要从你家楼下出发，走三条街、转两个弯才能到；如果给你设一个“固定起点”在朋友家楼下，你直接从这个起点出发，不管自己家在哪，都能准确找到，baseUrl就是这个“固定起点”。
举个实际的例子：假设你的项目结构是这样的，src是代码根目录，里面有components、utils、pages三个文件夹，现在要从src/pages/Home.tsx导入src/components/Button.tsx，没有baseUrl的时候，路径要写'../components/Button'，两层../刚好对应pages到src的层级；如果把baseUrl设为'src'，那路径就直接写'components/Button'就行，编译器会自动从src开始找，不管Home.tsx在哪个子文件夹，路径都不用改。
怎么配置baseUrl？只需要改tsconfig.json
baseUrl的配置非常简单，只需要在项目的tsconfig.json文件里，添加一个"baseUrl"字段，值设为你的项目根目录就行。注意，这里的路径是相对于tsconfig.json所在的文件夹的，绝大多数前端项目里，tsconfig.json都在项目根目录，所以直接写"src"就可以。
举个正确的配置例子：
`json
{
"compilerOptions": {
"baseUrl": "src",
// 其他配置比如target、module这些不变
"target": "ES2020",
"module": "ESNext"
}
}
`
配置完之后，刚才的导入路径就可以简化了。但这里有个小误区要提醒：baseUrl只是给TypeScript看的，实际打包的时候（比如用Vite、Webpack）可能还要额外配置路径映射，不然打包的时候还是会找不到文件，不过这已经是额外的打包配置了，和TypeScript的baseUrl本身是两回事，不用混淆。
配合paths，更灵活的路径匹配
如果说baseUrl是“固定起点”，那paths就是“自定义别名”，两者经常搭配用，能解决更复杂的路径问题。比如你的项目里有个工具函数在src/utils/date/format.ts，用baseUrl的话要写'utils/date/format'，如果想给这个路径起个更短的别名，比如'@/date'，就可以在tsconfig里加上paths配置：
`json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"] // 这个配置就是把所有src下的文件，都映射成@/开头的路径
}
}
}
`
这时候导入的时候，就可以直接写import format from '@/utils/date/format'，不仅路径更短，而且不管文件怎么挪，只要别名不变，导入都不会错，多人协作的时候也不会因为有人路径写错而出错。
注意几个容易踩的小坑
第一，baseUrl的值不能乱设，必须是项目里实际存在的文件夹，比如你写"src"，那src文件夹必须真的在项目里，不然编译器会报错。第二，paths里的映射路径，要和baseUrl对应，比如刚才的"@/*": ["*"]，后面的"*"就对应baseUrl设的src，要是baseUrl设成了其他目录，这里也要跟着改。第三，用VS Code开发的话，配置完tsconfig.json要重启一下编辑器，不然有时候会识别不到新的路径，还是会标红报错。
总的来说，baseUrl就是给TypeScript的模块导入路径做了“标准化简化”，把容易出错的相对路径，换成了从固定根目录开始的绝对路径风格，搭配paths还能进一步自定义，不管是自己写代码还是团队协作，都能省很多找路径的麻烦，是每个用TypeScript的前端开发者都应该掌握的小技巧。