Yarn Workspaces公共包资源类型声明缺失问题求助

问题场景与现象 #

前端Monorepo项目采用Yarn Workspaces管理，根目录包含app、common两个工作区，同时存在global.d.ts、根tsconfig.json和package.json：

• 已在根目录global.d.ts中声明了*.png、*.svg?react、*.json等资源模块的类型
• 根tsconfig.json配置了@common/*的路径映射
• 根package.json已指定工作区范围

但从@common/assets导入SVG资源时，TypeScript抛出错误：

Cannot find module '@common/assets/example.svg?react' or its corresponding type declarations.ts(2307)

注：项目UI运行正常，从@common导入组件等代码无问题，仅SVG、PNG这类资源文件存在类型声明不生效的问题。

解决方案 #

需要为每个子包单独配置类型声明文件和tsconfig.json：

1. 在子包内创建独立的类型声明文件
   在common包的合适位置（比如根目录或assets目录下）创建assets.d.ts，写入资源类型声明：

   declare module '*.png' {
     const value: string;
     export default value;
   }
   
   declare module '*.svg?react' {
     import type React from 'react';
     const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
     export default ReactComponent;
   }
   
   declare module '*.json' {
     const value: Record<string, unknown>;
     export default value;
   }
   

2. 为子包配置独立的tsconfig.json
   在common包根目录创建tsconfig.json，确保包含类型声明文件：

   {
     "extends": "../../tsconfig.json", // 可选，继承根目录的基础配置
     "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"],
     "compilerOptions": {
       // 根据子包需求添加专属配置，如输出目录、模块类型等
     }
   }
   

3. 可选：在子包package.json中指定类型入口
   如果需要让其他包更明确地识别子包的类型，可以在common/package.json中添加：

   {
     "types": "./assets.d.ts"
   }
   

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