TypeScript 配置路径别名（Alias）完整指南

作者：木棉

时间：2026-10-23

本文详细介绍在 TypeScript 项目中配置路径别名的完整步骤。通过安装 babel-plugin-module-resolver 依赖，在 .babelrc 中定义别名映射，并在 tsconfig.json 中配置 paths 和 baseUrl，实现代码引用的简化。同时说明了 Next.js 项目的兼容性及常见报错解决方法。

文章目录

TypeScript 配置路径别名完整指南

第一步：执行依赖安装


npm install --save-dev babel-plugin-module-resolver
# yarn add babel-plugin-module-resolver --dev

在项目根目录下创建.babelrc配置文件

依据实际项目需求参照下述内容进行配置调整


{
 "presets": ["next/babel"],
 "plugins": [
  [
   "module-resolver",
   {
    "alias": {
     "@/actions": "./actions",
     "@/components": "./components",
     "@/constants": "./constants",
     "@/pages": "./pages",
     "@/public": "./public",
     "@/reducers": "./reducers",
     "@/utils": "./utils"
    }
   }
  ]
 ]
}

编辑tsconfig.json配置文件


{
 "compilerOptions": {
  "baseUrl": "./",
  "paths": {
   "@components/*": ["./components/*"],
   "@pages/*": ["./pages/*"],
   "@public/*": ["./public/*"]
  }
 }
}

务必保留"baseUrl": "./"配置，若缺失将导致ts报错Option 'paths' cannot be used without specifying '--baseUrl' option.

next.js框架配置alias可参照上述流程

至此，关于typescript配置alias的详细步骤介绍完毕，如需了解更多typescript配置alias相关信息，请查阅本站历史文章或继续浏览后续内容，感谢支持！