With Typescript, type intersection for onChange with SVGProps

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Implement onChange method for Brush in a Typescript environment.

function App() {
  var brushChange = (newIndex: BrushStartEndIndex) => {
    console.log(newIndex);
  };
  return (
    <LineChart
      width={600}
      height={300}
      data={data}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <Brush onChange={brushChange} />
      <XAxis dataKey="name" />
...

What is expected?

This code should work.

What is actually happening?

Error in compiling

Type '(newIndex: BrushStartEndIndex) => void' is not assignable to type '((event: FormEvent<SVGElement>) => void) & ((newIndex: BrushStartEndIndex) => void)'.

The Brush props is defined as

export declare type Props = SVGProps<SVGElement> & BrushProps;

BrushProps defines onChange but SVGProps also defines onChange. So the resulting Props is an intersecting onChange definition:

(JSX attribute) onChange?: (((event: React.FormEvent<SVGElement>) => void) & ((newIndex: BrushStartEndIndex) => void)) | undefined

There might be a way to specify only one type in the implementation, but I don’t know it…

Omitting the SVGProps onChange does fix the issue (but might prevent legitimate use of it).

export declare type Props = Omit<SVGProps<SVGElement>,'onChange'> & BrushProps;

NB: It could be useful to export BrushStartEndIndex too!

Environment	Info
Recharts	v2.0.8
React	17.0.1
System	nodejs 6.14.11
Browser	Chrome 86.0.4240

[natBizitza]

 export declare type Props = Omit<SVGProps<SVGElement>,'onChange'> & BrushProps;

Where to pass that Props then? Thank you!

[raomin]

You should declare the new Props anywhere in your tsx

 export declare type Props = Omit<SVGProps<SVGElement>,'onChange'> & BrushProps;