Adding a custom property to an HTML attribute in react with typescript

Question

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?

declare module 'react' {
    interface HTMLAttributes<T> {
        customAttribute?: any;
        // more attributes...
    }
}

I have tried adding it to a created index.d.ts file and adding to tsconfig.json "compilerOptions": {"types":["./index.d.ts"]} but I still get

TS2322: Type '{ children: Element[]; customAttribute: string; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'customAttribute' does not exist on type

Thanks for any help.

Did you try to use declaration files? Add a index.d.ts in your project and the types should be available globally — Mihail Feraru
– Mihail Feraru, Commented Aug 12, 2020 at 11:02
Yes. This is what I was trying when I said I had created an index.d.ts file but that I was still getting the TS2322 error. — LJ950
– LJ950, Commented Aug 12, 2020 at 11:31
Having reviewed the docs on declarations I realised I was exporting and importing my declaration incorrectly. Thanks for your comment which confirmed declarations were the correct way forward. — LJ950
– LJ950, Commented Aug 12, 2020 at 12:05
This question is similar to: How do I add attributes to existing HTML elements in TypeScript/JSX?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — starball
– starball ♦, Commented Jul 13, 2024 at 22:38

LJ950 · Accepted Answer · 2020-08-20 15:37:23Z

6

Adding an index.d.ts file and importing the interface in the component solved this.

// index.d.ts
import "react";

declare module 'react' {
    export interface HTMLAttributes<T> {
        customAttribute?: any;
    }
}

Either add this to any components which use the typing:

// component
import HTMLAttributes from "../index.d";

function MyComponent() {
   return <div customAttribute=""></div>
}

or add index.d.ts to the tsconfig

//tsconfig.json
"include": [ "path/to/index.d.ts" ]

edited Aug 20, 2020 at 15:37

answered Aug 12, 2020 at 12:13

LJ950

911 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lastStranger Over a year ago

it doesn't work with the second way, I added the "include": [ "path/to/index.d.ts" ] to my tsconfig.json file, but it still get the same error

Mihail Feraru · Accepted Answer · 2020-08-12 14:46:33Z

0

If you would like to have all type declarations included by default, you could use typeRoots compiler option.

You simply have to add the following to your TS config file:

  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types/",
      "./"
    ]
  }
}```

References:
1. [Create global.d.ts][1]
2. [Typescript typeRoots][2]


  [1]: https://stackoverflow.com/questions/57125019/create-react-app-typescript-global-d-ts-file-doesnt-work
  [2]: https://www.typescriptlang.org/tsconfig#typeRoots

answered Aug 12, 2020 at 14:46

Mihail Feraru

1,4999 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding a custom property to an HTML attribute in react with typescript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related