Monorepo中如何共用根目录的styled-components TypeScript类型模块？

通过tsconfig配置共享全局类型的方案 #

你可以通过调整TS配置实现全局复用根目录的类型定义，无需在每个组件包重复存放文件，也不需要手动导入：

• 调整根目录tsconfig.json配置，加入以下字段：

{
  "compilerOptions": {
    // 将根目录types文件夹加入TS类型扫描路径
    "typeRoots": ["node_modules/@types", "./types"],
    // 其余原有配置保持不变
  },
  "include": ["types/**/*", "components/**/*"]
}

• 所有组件包的tsconfig.json直接继承根目录配置即可，无需额外重复配置类型路径：

{
  "extends": "../../tsconfig.json",
  // 子包自有配置保留即可
}

配置完成后重启编辑器的TS服务，所有组件包就能自动识别根目录下的styled-components类型扩展，智能提示会正常生效。

现有导入方案的合理性 #

你目前使用import '@common-types/styled'的实现方式是完全合理的，属于TS别名路径导入类型的标准用法，只要你在tsconfig.json中配置了对应的路径映射即可正常工作：

{
  "compilerOptions": {
    "paths": {
      "@common-types/*": ["./types/*"]
    }
  }
}

这种方案相比全局配置的可控性更强，如果你后续有部分包不需要使用该主题类型扩展，可以灵活选择是否导入，适合需要精细化控制类型作用范围的场景。唯一的缺点是全局通用的场景下需要在每个用到的文件中手动导入，你可以根据项目实际需求选择合适的方案。

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