reactjs - Typescript 如何扩展原生 HTML 元素？

Question

假设我想创建一个名为 MyDiv 的自定义 div 组件，并带有附加属性，例如。

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

但我仍然希望对常规 HTMLDivElement 进行所有类型检查，所以我想要的实际上是这样的:

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

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

显然这行不通，因为接口(interface)不能实现另一个接口(interface)，而且 IntrinsicElements 也没有公开。

执行此操作的正确方法是什么？

Answer 1

您正在寻找的语法是:

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

(TypeScript 有一个限制，一个接口(interface)只能扩展一个带点的名称，所以你必须在扩展它之前为 JSX.IntrinsicElements["div"] 定义一个类型别名。)