与Multiple typescript变量的类型相同

Question

我在react组件道具中得到一个数据，它都是相同类型但不同的变量。

有没有什么方法可以让我只需要在一行中定义所有类型变量。

interface IcarouselProps {
img1: string
img2: string
img3: string
img4: string
img5: string
img6: string
heading1: string,
heading2: string,
heading3: string,
heading4: string,
heading5: string,
heading6: string,
}

Answer 1

在TS4.1及以上版本上，您可以编写：

type IcarouselProps = Record<`${'img' | 'heading'}${number}`, string>;

但这也将允许访问不在(1..6(范围内的属性。因此，为了使类型检查更加严格，你可以这样做：

type Enumerate<N extends number, Result extends Array<unknown> = []> = Result['length'] extends N
? Result[number]
: Enumerate<N, [...Result, Result['length']]>;
type IcarouselProps = Record<`${'img' | 'heading'}${Exclude<Enumerate<7>, 0>}`, string>;
// the above will work for any value <46 in place of 7 in TS4.1-4 and <1000 in TS4.5
// `Exclude<Enumerate<TO>, Enumerate<FROM>>` will generate integer range from `FROM` to `TO - 1` both inclusive.

在Typescript Playground上运行此程序。