TypeScript：从对象集合提取独立类型，解决组件属性类型报错

问题描述 #

我有如下主题对象：

const themes = {
  light: {
    a...
    b...
  },
  dark: {
    a...
    b...
    c...
    d...
  },
}

React组件接收该对象中的某一个主题作为colors属性，不同主题内部的key: value集合存在差异。在组件中访问colors.d时，TypeScript始终提示类型错误。

我尝试过两种方法：

• 定义联合类型：

export type TThemes = typeof themes['light'] | typeof themes['dark'] | (...其他主题)

但TypeScript提示“Property 'd' does not exist on type { a, b, ... }”，仅单独导出单个主题的typeof时可正常工作，但我需要支持所有主题。

• 尝试映射类型：

{ [K in keyof typeof themes]: typeof themes[K] }

TypeScript仍提示“Property 'd' does not exist on type 'TThemes'”。

请问如何让colors.d这类属性访问正常，同时支持所有结构不同的主题类型？

更新：完整的themes代码如下：

const themes = {
    bordered: {
        background: COLORS.BgMain,
        borderWidth: '1px',
        radius: '4px',
        padding: '20px',
        mobilePadding: '15px',
        color: COLORS.TextPrimary
    },
    simple: {
        background: 'transparent',
        borderWidth: '1px 0',
        radius: '0px',
        padding: '20px 0',
        mobilePadding: '15px 0',
        color: COLORS.TextPrimary
    },
    light: {
        border: COLORS.BgLight,
        background: COLORS.BgLight,
        color: COLORS.TextPrimary,
        colorArrow: COLORS.GRAY_DARK,
        backgroundIcon: COLORS.BgSecondary,
        borderIcon: COLORS.BgSecondary,
        colorArrowIsOpen: COLORS.GRAY_DARK,
        backgroundIconIsOpen: COLORS.Outline_Light,
        borderIconIsOpen: COLORS.Outline_Light,
        radius: BorderRadius.componentRadius,
        padding: '20px 24px',
        mobilePadding: '15px',
        storyColor: COLORS.BgMain,
    },
    dark: {
        border: COLORS.Control,
        background: COLORS.Control,
        color: COLORS.TextWhite,
        colorArrow: COLORS.Control,
        backgroundIcon: COLORS.GRAY_DARK,
        borderIcon: COLORS.GRAY_DARK,
        colorArrowIsOpen: COLORS.Control,
        backgroundIconIsOpen: COLORS.TextWhite,
        borderIconIsOpen: COLORS.TextWhite,
        radius: BorderRadius.componentRadius,
        padding: '20px 24px',
        mobilePadding: '15px',
        storyColor: '#3D3D3D',
    },
};

解决方案 #

方法1：类型断言+分支判断缩小范围 #

在访问仅部分主题存在的属性时，可通过主题标识做分支判断，TypeScript会自动缩小类型范围：

// 假设组件接收themeName参数标识当前主题
if (props.themeName === 'dark') {
  // 此处TypeScript自动识别colors为dark主题类型，可安全访问所有dark属性
  console.log(props.colors.colorArrow);
} else if (props.themeName === 'light') {
  console.log(props.colors.border);
}

如果无法通过分支判断，也可以直接用类型断言明确当前主题类型：

const darkColors = props.colors as typeof themes['dark'];
console.log(darkColors.colorArrow);

方法2：定义含可选属性的基础类型 #

如果大部分属性是共享的，仅少数属性存在差异，可先定义包含所有可能属性的基础类型，将差异属性标记为可选：

type BaseTheme = {
  background: string;
  radius: string;
  padding: string;
  mobilePadding: string;
  color: string;
  // 差异属性标记为可选
  borderWidth?: string;
  border?: string;
  colorArrow?: string;
  backgroundIcon?: string;
  borderIcon?: string;
  colorArrowIsOpen?: string;
  backgroundIconIsOpen?: string;
  borderIconIsOpen?: string;
  storyColor?: string;
};

// 用基础类型约束主题对象
const themes: Record<string, BaseTheme> = {
  // 填入你的主题定义...
};

// 组件props类型
type ComponentProps = {
  colors: BaseTheme;
};

访问可选属性时，建议结合可选链操作符?.处理可能的undefined：

console.log(props.colors.colorArrow?.toString());

方法3：泛型绑定精确主题类型 #

通过泛型让组件明确当前使用的主题类型，实现最精确的类型检查：

type ThemeKey = keyof typeof themes;

type ComponentProps<T extends ThemeKey> = {
  theme: T;
  colors: typeof themes[T];
};

const MyComponent = <T extends ThemeKey>(props: ComponentProps<T>) => {
  if (props.theme === 'dark') {
    return <div style={{ color: props.colors.colorArrow }}>深色主题</div>;
  }
  return <div style={{ color: props.colors.color }}>其他主题</div>;
};

// 使用组件时传入对应主题
<MyComponent theme="dark" colors={themes.dark} />

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