TypeScript中如何合并第三方主题与styled-components的DefaultTheme？

核心问题是你对styled-components的DefaultTheme类型扩展不符合TypeScript的模块扩展规则，且编译流程未正确识别你的自定义类型声明，导致TS编译时认为你合并后的主题缺少必填属性。

步骤1：修正类型声明文件（styled.d.ts）写法 #

需要通过模块扩展的方式继承第三方主题的类型，同时新增自定义属性，无需重复定义第三方主题已有的属性，正确写法如下：

// 先导入styled-components/native的基础类型
import 'styled-components/native';
// 导入第三方模块的主题
import { theme as idCheckTheme } from '@pass-culture/id-check/src/theme';

declare module 'styled-components/native' {
  // 扩展DefaultTheme接口，直接继承第三方主题的类型
  export interface DefaultTheme extends typeof idCheckTheme {
    // 新增你的自定义属性
    appBarHeight: number;
  }
}

步骤2：调整tsconfig.json配置 #

确保你的类型声明文件被TS编译流程识别，检查include字段是否包含d.ts文件所在路径，示例配置：

{
  "compilerOptions": {
    // 其余原有配置保持不变
  },
  "include": [
    "src/**/*", 
    "src/**/*.d.ts" // 确保包含所有d.ts声明文件
  ]
}

不要在theme.ts中手动导入./styled.d，声明文件只要在include范围内会被TS自动加载。

步骤3：优化主题合并代码 #

删除theme.ts中冗余的类型注解和声明文件导入，TS会自动做类型校验，写法如下：

import { theme as idCheckTheme } from '@pass-culture/id-check/src/theme'

// 直接导出合并后的主题，TS会自动匹配你扩展后的DefaultTheme类型
export const theme = {
  ...idCheckTheme,
  appBarHeight: 64,
}

如果需要显式标注类型，可以用satisfies做类型校验，避免丢失具体类型：

import { theme as idCheckTheme } from '@pass-culture/id-check/src/theme'
import { DefaultTheme } from 'styled-components/native'

export const theme = {
  ...idCheckTheme,
  appBarHeight: 64,
} satisfies DefaultTheme

IntelliJ不报错但启动编译报错的原因是IDE的TS语言服务提前识别到了你的声明文件，而打包流程使用的TS配置未正确加载声明文件，调整完tsconfig配置后即可统一。

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