Declaring custom JSX/HTML attributes in TypeScript

React's type definition file (@types/react/index.d.ts) only includes standard HTML and React elements and props/attributes.

Consider, for example, that you need to allow the banana prop of type string on the <img> element. In TypeScript+JSX, the <img> element uses the React.ImgHTMLAttributes<T> interface declared in @types/react/index.d.ts as follows:

declare namespace React {
  //...
  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
    alt?: string;
    crossOrigin?: "anonymous" | "use-credentials" | "";
    decoding?: "async" | "auto" | "sync";
    height?: number | string;
    // ...
  }
  //...
}

To allow the custom HTML attribute, add the banana?: string; member to the React.ImgHTMLAttributes<T> interface like this:

// Inside your types.d.ts
namespace React {
  interface ImgHTMLAttributes<T> {
    banana?: string;
  }
}

This approach makes use of interface merging, a form of TypeScript's declaration merging.

See also