How TypeScript handles `data-*` attributes in JSX?

Question

Consider this:

import type { JSX } from 'react';

const MyComponent = (): JSX.Element => (
  <div data-attr="bar">Foo</div>
);

This does not give any TypeScript error which is expected, however, I cannot find types for data-* custom attributes, something like

interface *** {
  // other attributes...
  `data-${string}`: string
}

Can anyone please tell me where in d.ts files are defining this?

@TheTisiboth - How do the answers to that question answer this question? — T.J. Crowder
– T.J. Crowder, Commented May 11, 2023 at 14:01
Apparently is part of Typescript specification for JSX, as per this answer stackoverflow.com/a/50961972/3797799 (referring to the doc). From my test, any prop with a - is considered valid by Typescript, ie. <div what-is-this="hello" >asd</div>. — colinD
– colinD, Commented May 11, 2023 at 14:58
Relevant quote from those docs: "Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error if it is not found in the element attributes type." — T.J. Crowder
– T.J. Crowder, Commented May 11, 2023 at 17:50
@T.J.Crowder, yes, I was thinking it was a duplicate but the question is not the same. Thanks for the heads up! — colinD
– colinD, Commented May 11, 2023 at 19:10

colinD · Accepted Answer · 2023-05-11 19:08:12Z

2

It is part of Typescript specification for JSX, as per the documentation:

Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error if it is not found in the element attributes type.

It also extends to any property with a dash - inside, for example this is valid JSX for Typescript:

<div a-custom-attribute="hello"></div>

answered May 11, 2023 at 19:08

colinD

2,1011 gold badge24 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

How TypeScript handles `data-*` attributes in JSX?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related