打字稿如何扩展本机HTML元素?

Question

假设我想创建一个自定义div组件，称为MyDiv，具有其他属性，例如。

interface MyDivProps {
marginX: string;
marginY: string;
}

但我仍然想让所有类型检查常规HTMLDivElement，所以我想要的实际上是这样的：

interface MyDivProps implements JSX.IntrinsicElement.div {
marginX: string;
marginY: string;
}

(我使用JSX.IntrinsicElement.div而不是HTMLDivElement，因为它有额外的 Reactdiv 属性，例如ref(

显然这是行不通的，因为接口无法实现另一个接口，IntrinsicElements也没有公开。

正确的方法是什么？

Answer 1

您要查找的语法是：

type DivProps = JSX.IntrinsicElements["div"];
interface MyDivProps extends DivProps {
marginX: string;
marginY: string;
}

(TypeScript 有一个限制，即接口只能扩展点名称，因此必须先为JSX.IntrinsicElements["div"]定义类型别名，然后才能扩展它。

Answer 2

交集类型：

type DivProps = JSX.IntrinsicElements['div'] & {
marginX: string
marginY: string
}