React Typescript – Adding custom attribute

Issue

React Typescript allow to add custom data-* attributes.
But is it possible to add custom attributes like ‘name’ || ‘test’ act. ?

<span name="I'm causing a type error" data-test="I'm Working"/>

Bold added by me.

type error: Type ‘{ children: Element; name: string; data-test:
string; }’ is not assignable to type
‘DetailedHTMLProps, HTMLSpanElement>’.
Property ‘name’ does not exist on type
‘DetailedHTMLProps, HTMLSpanElement>’.
TS232

"react": "^16.7.0",
"typescript": "^3.2.4",

Solution

in react 16+ it is possible, see

probem is that typescript didnt know about it(yet)

but you can still add @ts ignore for typechecking

{ //@ts-ignore
  <span name="I'm causing a type error" data-test="I'm Working"/>
}

Answered By – Juraj Kocan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0