Wenn Sie eine Enumeration zum Indizieren optionaler Eigenschaften verwenden, kann es zu einer undefinierten Bedingung kommen

Question

Ich versuche, eine optionale Stilüberschreibung für meine Stilkomponente zu implementieren.

Derzeit habe ich Folgendes:

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

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;
};

Gibt es eine sauberere Möglichkeit, dies zu tun? Ich bin offen für Vorschläge.

Allerdings hätte ich fast den Titel der Frage vergessen. Meine Hauptfrage ist also, wenn ich mit themeMode常量中删除这部分as keyof typeof overridingTheme;，overridingTheme[themeMode] beginne, wird angezeigt, dass es möglicherweise auch nach der Überprüfung undefiniert ist.

Answer 1

尝试：

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