TypeScript paths 别名怎么配置
在写项目代码时，你是不是经常碰到这种情况？比如某个组件要引用另一个文件夹里的工具函数，得写一串长长的路径：import { formatTime } from '../../../utils/date'，要是层级多了，不仅容易写错，改个文件位置就得把路径全重写一遍，特别麻烦。TypeScript 里有个好用的小工具能解决这个问题，它就是 paths 别名，能把长长的路径换成简短好记的名字，今天就来把这个实用的配置方法讲清楚。
先搞懂：paths 别名到底是什么？
简单说，paths 别名就是给项目里经常用的文件夹起个“小名”，比如把 src/utils/ 直接叫 @utils，把 src/components/ 叫 @comp。以后写引用时，直接用 import { formatTime } from '@utils/date' 就行，不仅短，还不用怕层级错，找起来也清晰，就像给朋友起外号，叫起来方便还不会混。
第一步：先找到关键配置文件
TypeScript 的 paths 配置，不是随便写在代码里的，得放在项目根目录的 tsconfig.json 里——这是 TypeScript 项目的核心配置文件，就像房子的“装修说明书”，所有和 TypeScript 相关的规则都写在这。如果你的项目里还没有这个文件，先初始化一个，打开终端输入 tsc --init 就行，会自动生成基础的 tsconfig.json。
第二步：写 paths 的核心配置
打开 tsconfig.json，找到 compilerOptions 这个大选项（所有编译规则都在它里面），在它下面加 paths 字段就行。举个最常用的例子：
`json
{
"compilerOptions": {
// 其他原有配置（比如 target、module 这些不用动）
"baseUrl": ".",
"paths": {
"@utils/*": ["src/utils/*"],
"@comp/*": ["src/components/*"]
}
}
}
`
这里要注意两个关键：第一个是 baseUrl，它是 paths 找文件夹的“起点”，一般设成当前项目根目录（写 "."），别改；第二个是 paths 里的写法，左边是你要起的别名，右边是真实的文件夹路径，后面的 /* 别漏，意思是“别名后面跟什么，就对应真实路径后面跟什么”，比如 @utils/date 就对应 src/utils/date。
第三步：实际用一下，避坑小技巧
配置完是不是直接就能用？不一定，有些老项目用 webpack 或 vite 打包，还得补个小配置，不然打包时找不到别名，会报错。举两个最常见的工具例子：
- 要是用 Vite 打包，得在项目根目录的
vite.config.ts里加：
`typescript
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@utils': path.resolve(__dirname, 'src/utils'),
'@comp': path.resolve(__dirname, 'src/components')
}
}
})
`
- 要是用 Webpack，就在
webpack.config.js里加：
`javascript
const path = require('path')
module.exports = {
resolve: {
alias: {
'@utils': path.resolve(__dirname, 'src/utils'),
'@comp': path.resolve(__dirname, 'src/components')
}
}
}
`
还有个小坑别踩：别名别起得太笼统，比如别把所有文件都叫 @，不然引用时分不清是哪个文件夹，就失去别名的意义了；另外，改了 paths 配置后，记得重启一下开发服务器（比如 npm run dev 停了再开），不然配置不会生效。
学会这个配置，再也不用对着 ../../../ 数层级，项目代码看着整齐，找文件也快，对多人协作的项目来说，还能统一所有人的引用写法，不会有人写长路径有人写短路径，特别实用。