是否可以在 TypeScript 上创建一个 object 接口，允许灵活数量/类型的键？

Question

On creating a theme for a React component I was wondering what the best way to define an object type would be. Basically I have a react component that takes in a style object to create a theme. Such as below:

const datePickerTheme = {
    palette: {
        primary: "#f5f5f5",
        secondary: "#2b4450",
        tertiary: "#871111"
    },
    spacing: ["0px", "4px", "8px", "16px", "32px", "64px"],
};

it would be passed in to a datepicker component like so:

<DatePicker theme={datePickerTheme}/>

On type script it has an interface like so:

interface ITheme {
  palette: {
    primary: string,
    secondary?: string,
    tertiary?: string,
  },
  spacing: [],
}

However, I would like keep the interface open for future theme customizations for other possibilities. Basically one should be able to pass a theme of any kind and however many keys needed. Is there a way to define the interface so that it is flexible and open for such cases without using type "theme:any".

Answer 1

Is this what you want? You can add any key in palette object.

interface ITheme {
  palette: {
    primary: string,
    secondary: string,
    tertiary: string,
    [key: string]: string
  },
  spacing: [],
}

Or you can restrict the value of key by provide a type .

type PaletteKey = 'third' | 'fourth';

interface ITheme {
  palette: {
    primary: string,
    secondary: string,
    tertiary: string,
    [key: PaletteKey]: string
  },
  spacing: [],
}

Edited

For future customizations base on the ITheme , you can extend the interface.

For example:

interface IPalette {
  primary: string;
  secondary: string;
  tertiary: string;
}

interface ITheme {
  palette: IPalette;
  spacing: [];
}

type Breakpoints = {
  xs: number;
  sm: number;
  md: number;
  lg: number;
  xl: number;
};

interface CustomTheme extends ITheme {
  palette: IPalette & {
    error: string;
    success: string;
  };
  breakpoints: Breakpoints;
}