我正在尝试构造一个Box
组件,该组件接受变量is
属性来确定呈现的元素:
<Box is="a" href="...">
...
</Box>
为了支持这种类型化,我有一个标准元素和它们的属性的接口,如下所示:
interface IElements {
a: {href: string, ...};
button: {...};
...
}
然后,我创建了一个实用程序类型,它生成{is: TAG, ...attributes[TAG]}
的适当交集:
type IAttributes<K extends keyof IElements> = {
is: K;
} & IElements[K];
const attributes: IAttributes<"a"> = {
is: "a",
href: "..."
}
由于我创建的Box
组件呈现每个标准HTML元素,因此我创建了一个union,使其输入属性类型根据is
属性进行更改:
type IProps = IAttributes<"a"> | IAttributes<"button">;
有没有一种方法可以让TypeScript使用IAttributes
迭代IElements
中的每个HTML标记,而不必键入每个HTML标记的并集?
我从一个外部库中使用IElements
,在这个库中可能会在版本之间添加和删除新的标签,所以我希望在这种情况下动态构建IProps
。
1条答案
按热度按时间cu6pst1q1#
你可以把
IProps
做成一个 * 分布式对象类型 *,你先做一个mapped type,然后立即把index into it和它的键完全联合起来,产生一个联合输出:Playground代码链接