Vous pouvez rencontrer une condition non définie lors de l'utilisation d'une énumération pour indexer des propriétés facultatives

Question

J'essaie d'implémenter un remplacement de style facultatif pour mon composant de style.

Actuellement j'ai ceci :

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

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

Existe-t-il une façon plus propre de procéder. Je suis ouvert aux suggestions.

Cependant, j'ai presque oublié le titre de la question. Donc ma question principale est que si je pars de themeMode常量中删除这部分as keyof typeof overridingTheme;，overridingTheme[themeMode], il dira qu'il peut être indéfini même après vérification.

Answer 1

Essayez :

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