Anda mungkin menghadapi keadaan yang tidak ditentukan apabila menggunakan enum untuk mengindeks sifat pilihan

Question

Saya cuba melaksanakan penggantian gaya pilihan untuk komponen gaya saya.

Pada masa ini saya mempunyai ini:

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

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

Adakah terdapat cara yang lebih bersih untuk melakukan ini. Saya terbuka menerima cadangan.

Namun, saya hampir terlupa tajuk soalan. Jadi soalan utama saya ialah jika saya bermula dari themeMode常量中删除这部分as keyof typeof overridingTheme;，overridingTheme[themeMode] ia akan mengatakan ia mungkin tidak ditentukan walaupun selepas menyemak.

Answer 1

Cuba:

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