TS中使用引用路径别名报错

最新推荐文章于 2025-01-21 18:27:02 发布

将心_max

最新推荐文章于 2025-01-21 18:27:02 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript typescript 路径别名文章标签： typescript

本文链接：https://blog.youkuaiyun.com/mountain_zq/article/details/119361135

JavaScript 同时被 3 个专栏收录

34 篇文章

订阅专栏

typescript

4 篇文章

订阅专栏

路径别名

2 篇文章

订阅专栏

在TypeScript项目中，当使用路径别名时遇到找不到模块或声明的错误，通常是因为未在tsconfig.json中正确配置。解决方法是在与src同级的tsconfig.json文件中，添加相应的compilerOptions配置，以确保与webpack中的路径别名设置一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在TS中引用路径别名提示找不到模块或者相应的声明

1.ts中使用路径别名报错
在这里插入图片描述
在react中通常路径别名都是在webpack的webpack.config.js文件中配置的，但是在引入了ts之后，webpack中的路径别名引用失效了
此时我们需要在跟src文件同级目录的tsconfig.json文件中添加配置：

注意要在compilerOptions中添加（webpack中的路径也需要配置）

"compilerOptions": {
    "target": "es6" /**指定ECMAScript目标版本**/,
    "module": "commonjs" /**指定生成哪个模块系统代码**/,
    "allowJs": true /**允许编译js文件**/,
    "jsx": "preserve" /**支持JSX**/,
    "outDir": "build" /**编译输出目录**/,
    "strict": true /**启用所有严格类型检查选项**/,
    "noImplicitAny": false /**在表达式和声明上有隐含的any类型时报错**/,
    "skipLibCheck": true /**忽略所有的声明文件的类型检查**/,
    "forceConsistentCasingInFileNames": true /**禁止对同一个文件的不一致的引用**/,
    "allowSyntheticDefaultImports": true /**允许使用import方式导入**/,
    "baseUrl": ".", //paths路劲解析起点
    "paths": {
      "@constant/*": ["src/constants/*"] // 路劲别名配置
    }
  },