使用foo
作为属性会引发错误:
// 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)
但是使用foo-foo
是可以的,为什么?
// 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.