在这种情况下如何使对象接口

Question

我想将此对象作为接口。

{
    size1: 'flexDirection value, for example: column, column-reverse, row or row-reverse',
    size2: 'column, column-reverse, row or row-reverse',
    ...
    sizeN: 'column, column-reverse, row or row-reverse'
}

我尝试了

interface Test {
  foo: number;
  bar: string;
}

但是，正如您所看到的，对象是重复大小n。

用例：

<Column breakpoints={{
    850: { flexDirection: 'row', backgroundColor: 'green' },
    600: 'row-reverse'
}}>
    <b>Hello</b>
    <span>world!</span>
</Column>

在这种情况下如何使该对象连接？

Answer 1

type Breakpoint = 320 | 480 | 768 | 992 | 1200
type ResponsiveStyle = Partial<Record<Breakpoint, CSSProperties>>

const breakpoints: ResponsiveStyle = {
    768: { flexDirection: 'row', backgroundColor: 'green' },
}