title: Adding a custom property to an HTML attribute in react with typescript
body: <p>Is there a way to add a custom type to a react HTML element? I'm using React 16.13.1 with Create React App and Typescript 3.9.5. The only solution I have found is to either disable type checking, which is not ideal, or declare the react module interface at the top of every single component (as below). Is there a way to add this globally? Or a different solution?</p>
  <pre><code>declare module 'react' {
      interface HTMLAttributes&lt;T&gt; {
          customAttribute?: any;
          // more attributes...
      }
  }
  </code></pre>
  <p>I have tried adding it to a created index.d.ts file and adding to tsconfig.json <code>&quot;compilerOptions&quot;: {&quot;types&quot;:[&quot;./index.d.ts&quot;]}</code> but I still get</p>
  <p><code>TS2322: Type '{ children: Element[]; customAttribute: string; className: string; }' is not assignable to type 'DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;'.   Property 'customAttribute' does not exist on type</code></p>
  <p>Thanks for any help.</p>