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>继承react道具吗？

1 个答案: