How can one extend React types to support html attributes as props?

Question

Given a component that takes custom props as well as html attribute props, how should the interface for such a component be created? Ideally, the interface would also handle react-specific html props such as using className instead of class.

This is the usage example for which I am trying to find the right interface:

<MyComponent customProp='value' style={{textAlign: 'center'}}  /> 

Answer 1

interface IMyComponentProps extends React.HTMLAttributes<HTMLElement> {   customProp: string; } 

UPD: @ddek mentioned intersections &.

I would like to warn you about the following issue with that approach.

 interface A {   onClick: () => void; }  interface B {   onClick: (event: React.MouseEvent<HTMLElement>) => void; }  // Typescript does not complain. This is not good type AB = A & B; const a: AB = {   onClick: () => {} };   // TS2320: Interface 'AB2' cannot simultaneously extend types 'A' and 'B'. // Named property 'onClick' of types 'A' and 'B' are not identical.  interface AB2 extends A, B {  }  // TS2430: Interface 'AC' incorrectly extends interface 'A'. //   Types of property 'onClick' are incompatible.   //   Type '(event: MouseEvent<HTMLElement, MouseEvent>) => void' is not // assignable to type '() => void'. interface AC extends A {   onClick: (event: React.MouseEvent<HTMLElement>) => void; }