El uso de foo como atributo genera un 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) Pero usar foo-foo está bien, ¿por qué?
// App.tsx // 👇 no error is thrown const App = () => <div foo-foo></div> export default AppY lo más importante, ¿cómo definir tipos como este en TypeScript? es decir, solo permitir atributos estándar o de kebab-case.
La respuesta está en la sección JSX del Manual de mecanografiado :
Si un nombre de atributo no es un identificador JS válido (como un atributo
data-*), no se considera un error si no se encuentra en el tipo de atributos del elemento.
Toda la sección sobre JSX es una lectura muy esclarecedora.
Me temo que la respuesta a la pregunta "cómo definir tipos como este en TypeScript" es... No lo hacemos. La compatibilidad con JSX está integrada en el compilador. Sin embargo, hay muchas cosas interesantes que podemos personalizar.