Using foo as an attribute throws an error:
// App.tsx
// ๐ throws
const App = () => <div foo></div>
export default App
Type '{ foo: true; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Property 'foo' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)
But using foo-foo is fine, why's that?
// App.tsx
// ๐ no error is thrown
const App = () => <div foo-foo></div>
export default App
And most importantly, how to define types like this in TypeScript? i.e. Only allowing standard or kebab-case attributes.
The answer is in the JSX section of the Typescript Handbook:
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.
The entire section on JSX is a very enlightening read.
I'm afraid the answer to the "how to define types like this in TypeScript" question is... We don't. JSX support is built into the compiler. There's plenty of interesting things we can customize, however.