自定义node_modules目录的tsconfig配置及图片类型报错解决

为什么会出现图片导入错误？ #

你配置的paths中使用了全局通配符*，这会让TypeScript对所有模块导入请求都优先去node_modules_types目录查找——包括你本地的图片文件。当你导入../assets/logo.png时，TS会尝试在./node_modules_types/@types/../assets/logo.png和./node_modules_types/../assets/logo.png这些不存在的路径下找模块，同时原本用于识别图片类型的本地声明逻辑也被优先级更高的自定义目录映射覆盖，最终导致报错。

如何解决图片类型声明报错？ #

方案1：缩小paths的匹配范围（推荐） #

不要用全局*覆盖所有模块，只针对第三方包和@types配置映射，保留本地文件的默认解析逻辑：

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      // 映射@types类型包
      "@types/*": ["./node_modules_copy/@types/*"],
      // 映射第三方npm包，优先从自定义目录查找
      "*": ["./node_modules_copy/*", "*"]
    }
  }
}

这里的"*": ["./node_modules_copy/*", "*"]表示：先去自定义目录找第三方包，找不到则回退到默认解析逻辑（包括本地文件）。

方案2：确保图片类型声明被正确加载 #

如果项目中还没有处理图片类型的声明文件，创建一个src/types/assets.d.ts：

// src/types/assets.d.ts
declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

// 按需添加其他图片格式，比如svg、gif等

然后在tsconfig.json的include中包含这个文件，确保TS能识别到：

// tsconfig.json
{
  "include": ["src/**/*", "src/types/assets.d.ts"]
}

方案3：调整模块解析优先级 #

如果必须保留全局*映射，可以把本地目录的解析优先级提到自定义node_modules之前：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "*": ["src/*", "./node_modules_copy/@types/*", "./node_modules_copy/*"]
    }
  }
}

这样TS会先在src目录下查找本地文件，再去自定义目录处理第三方包的类型解析。

内容的提问来源于stack exchange，提问作者Kirency