javascript - 我应该从 HTMLProps<HTMLElement> 继承 react Prop 吗？

Question

我正在将 React 与 TypeScript 结合使用，我希望允许组件具有所有 HTML 属性。

interface MyComponentProps extends HTMLProps<HTMLElement> {

}

但是，有时我需要设置自定义 Prop 类型，例如 onClick:

interface MyComponentProps extends HTMLProps<HTMLElement> {
    onClick?: (count: number) => void
}

但是在 TypeScript 中，我无法更改子界面中已经存在的属性。有什么简单的解决方案吗？

我只是认为以下之一:

• 定义我自己的父接口(interface)而不是 HTMLProps (需要在每个文件和许多自定义接口(interface)中额外导入)，
• 重命名我的自定义 Prop (是的，但我想使用常见的 Prop 名称，如 onClick 或 data 而不是 onComponentClick 或_data)。

Answer 1

你可以尝试这样的事情。首先，定义您的 Prop ，然后从 HTMLProps 中省略它们，然后将您的 Prop 与它合并。

interface OverrideProps {
  onClick?: (count: number) => void;
}

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

type MyComponentProps = Omit<
  React.HTMLProps<HTMLElement>,
  keyof OverrideProps
> &
  OverrideProps;