You may encounter an undefined condition when using an enum to index optional properties

Question

I'm trying to implement an optional style override for my style component.

Currently I have this:

这是一个函数，将会将我改变的样式与主题中的默认样式合并。

const mergeComponentTheme = <T extends object>(mode: ThemeMode, defaultTheme: T, overridingTheme?: CustomComponentStyle<T>): T => {
  return Object.keys(defaultTheme).reduce<T>((previousValue, currentValue) => {
    const property = currentValue as keyof T;
    const themeMode = mode as keyof typeof overridingTheme;
    const value = (overridingTheme && overridingTheme[themeMode][property]) || defaultTheme[property];

    return { ...previousValue, [currentValue]: value };
  }, {} as T);
};

这是我目前的使用方式。

const Button = styled.button<CustomStyled<ButtonTheme>>`
  ${({ theme, customStyle }) => {
    const componentStyle = mergeComponentTheme<ButtonTheme>(theme.mode, theme.current.button, customStyle);

    return css`
      background-color: ${componentStyle.backgroundColor};
      color: ${componentStyle.foregroundColor};
      padding: ${componentStyle.padding};
      margin: ${componentStyle.margin};
      border-radius: ${componentStyle.borderRadius};
      filter: drop-shadow(0 0 2px ${componentStyle.dropShadowColor});
      transition: all 0.2s ease-in-out;

      &:hover {
        background-color: ${componentStyle.backgroundColorHover};
        cursor: pointer;
      }
    `;
  }}
`;

这些是示例中使用的所有类型。

type CustomStyled<T> = {
  customStyle?: CustomComponentStyle<T>;
};

type CustomComponentStyle<T> = {
  light?: Partial<T>;
  dark?: Partial<T>;
};

enum ThemeMode {
  LIGHT = 'light',
  DARK = 'dark',
}

interface ButtonTheme extends GenericTheme {
  borderRadius: Radius;
}

type GenericTheme = {
  backgroundColor: Color;
  foregroundColor: Color;
  backgroundColorHover: Color;
  foregroundColorHover: Color;
  dropShadowColor: Color;
  margin: Space;
  padding: Space;
};

Is there a cleaner way to do this. I'm open to suggestions.

However, I almost forgot the title of the question. So my main question is, if I remove this part from the themeMode constant as keyof typeof overridingTheme;, overridingTheme[themeMode] will say even after checking It may be undefined.

Answer 1

try:

const value = (overridingTheme?.[themeMode]?.[property]) ?? defaultTheme[property];