如何在 typescript 中为具有可变键控子对象的深层 object 定义接口

Question

我正在尝试编写我调用 ThemeType 的接口类型：

export interface ThemeType {
  mobileWidth: string;
  font: {
    fontName: string;
  };
  colors: {
    color: {
      darkest: string;
      dark: string;
      middle: string;
      lightest: string;
      light: string;
    };
  };
}

对于看起来像这样的主题：

export const SiteTheme: ThemeType = {
  mobileWidth: '900px',
  font: {
    esteban: "'Esteban', 'Georgia', serif",
    apercu: "'Apercu', Helvetica, sans-serif",
  },
  colors: {
    rose: {
      darkest: '#D4B1A6',
      dark: '#F0C9BC',
      middle: '#F5DBD2',
      light: '#F9E9E4',
      lightest: '#FAF3F0',
    },
    coffee: {
      darkest: '#6F6150',
      dark: '#A6795B',
      middle: '#CA9673',
      light: '#CFA992',
      lightest: '#E7CEBF',
    },
    cream: {
      darkest: '#E8D3A6',
      dark: '#F7E5C0',
      middle: '#F9EECF',
      light: '#FFF9EA',
      lightest: '#FFFBF2',
    }
  }
}

但是我看不到如何在键下定义具有重复结构的接口，并且这些重复结构每个都有自己的唯一键。

Answer 1

interface ColorSet {
      darkest: string
      dark: string
      middle: string
      light: string
      lightest: string
}

export interface ThemeType {
  mobileWidth: string;
  font: {
    fontName: string;
  };
  colors: {
    [color: string]: ColorSet
  };
}

Answer 2

上面的方法有一个缺点，智能感知不会识别键，因为它可以是任何字符串。 我会使用 Record 实用程序类型来克服这个问题，您可以将它们设置为可选或不使用 Partial。

例子：

type FontTypes =
  | "'Esteban', 'Georgia', serif"
  | "'Apercu', Helvetica, sans-serif";

type Fonts = "esteban" | "apercu";

interface ColorSet {
  darkest: string
  dark: string
  middle: string
  light: string
  lightest: string
}

type Colors = "rose" | "coffee" | "cream";

export interface ThemeType {
  mobileWidth: string;
  font: Partial<Record<Fonts, FontTypes>>;
  colors: Record<Colors, ColorSet>;
}

文档：https://www.typescriptlang.org/docs/handbook/utility-types.html