如何用const属性扩展Material-UI v4 Theme接口避免重复定义？

我正在自定义Material-UI v4的Theme，在独立的@our-project/ui包中已有如下声明：

export declare const themeOptions: {
  palette: {
    // 一些Palette中没有的颜色
  }
  status: string;
  // 其他属性
}

按照Material-UI v4的TypeScript自定义指引，需要手动扩展Theme和Palette接口：

import { Theme } from '@material-ui/core/styles/createTheme';

declare module '@material-ui/core/styles/createTheme' {
  interface Theme {
    status: string;
  }
  // 允许通过createTheme配置
  interface ThemeOptions {
    status?: string;
  }
}

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    green: PaletteColor;
    // 其他颜色
  }

  interface PaletteOptions extends DeepPartial<AdminLightPalette> {
    green?: PaletteColor;
  }
}

但我不想手动重复定义这些属性，也不想在@our-project/ui更新时同步修改，尝试用interface Theme extends typeof themeOptions的方式编译失败，该如何解决？

方案：利用TypeScript类型提取与模块扩展自动同步 #

1. 提取themeOptions的类型

从@our-project/ui导入themeOptions，通过TypeScript的typeof获取其完整类型，并拆分出Palette部分的类型：

import { themeOptions } from '@our-project/ui';
import { DeepPartial } from '@material-ui/core/styles';

// 获取themeOptions的完整类型
type AppThemeOptions = typeof themeOptions;
// 提取palette字段的类型
type AppPalette = AppThemeOptions['palette'];

2. 扩展Theme与ThemeOptions接口

在模块扩展中，通过Omit排除palette字段（避免与Material-UI原生Palette接口冲突），直接继承提取的类型：

declare module '@material-ui/core/styles/createTheme' {
  // 让Theme继承themeOptions中除palette外的所有属性
  interface Theme extends Omit<AppThemeOptions, 'palette'> {}
  
  // 让ThemeOptions继承themeOptions对应属性的可选版本
  interface ThemeOptions extends Partial<Omit<AppThemeOptions, 'palette'>> {}
}

3. 扩展Palette与PaletteOptions接口

用提取的AppPalette类型扩展Material-UI的Palette相关接口：

declare module '@material-ui/core/styles/createPalette' {
  interface Palette extends AppPalette {}
  
  interface PaletteOptions extends DeepPartial<AppPalette> {}
}

关键细节

• 使用Omit排除palette是因为Material-UI的Theme接口本身已包含palette属性，直接继承会导致类型冲突；单独扩展Palette接口更符合Material-UI的类型设计。
• Partial和DeepPartial分别用于ThemeOptions和PaletteOptions，匹配Material-UI配置项可选的设计逻辑。
• 后续@our-project/ui中themeOptions更新时，类型扩展会自动同步，无需手动修改代码。

为什么直接extends typeof themeOptions会编译失败？

Material-UI原生的Theme接口已经定义了palette、typography等核心属性，直接继承typeof themeOptions会导致palette等属性重复定义，触发TypeScript的类型冲突错误。通过Omit排除冲突字段后，就能正常继承自定义属性。

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