我应该从 HTMLProps<HTMLElement> 继承反应道具吗？

Question

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

interface MyComponentProps extends HTMLProps<HTMLElement> {

}

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

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

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

我只是认为以下之一：

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

Answer 1

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

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;

我应该从 HTMLProps<HTMLElement> 继承反应道具吗？

Should I inherit react props from HTMLProps<HTMLElement>?

javascript

inheritance

typescript

reactjs

react-props