EckherInsightsContact
Eckher
Your guide to what's next.
Eckher
Home › Eckher Insights › Declaring custom JSX/HTML attributes in TypeScript
Apr 4, 2020

Declaring custom JSX/HTML attributes in TypeScript

How to specify non-standard JSX/HTML attributes in TypeScript?

Those who switched to TypeScript may experience problems with non-standard JSX/HTML props/attributes. 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:

// 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.

Cover
See also
Built-in React hooks
The list of built-in React hooks.
Multi-<select> in React
How to implement a controlled multi-<select> in React?
How to run a JSX script?
Executing .jsx files with command line.
<select> in React
How to implement a controlled <select> in React?
Eckher
Your guide to what's next.
Copyright © 2021 Eckher. Various trademarks held by their respective owners.