Search code examples
typescripttsx

Why tsx doesn't check attribute which has `-` in name?

Why tsx doesn't check attribute which has - in name?

declare namespace JSX {
  interface ElementAttributesProperty {
    props:any; // specify the property name to use
  }
}
class A{
    props!:{p1:string}
}
const tsx = <A p1="" p-p2={1} p3=""></A>

https://www.typescriptlang.org/play?jsx=1#code/CYUwxgNghgTiAEA7KBbEBnADlMCBSAygBrwDeAUPPAJaIAuIMAZjggKIQhr0CCddMagCMArg3QAFGAHtMjOgE8ylKvEwzM6AFxRECgNzwA9EfhZw1JkroALBOtnylyNPDrT4I9CBUBfcv6QUOjo8DwUqmoa6ACEWqSYAIxa6AK0AOb+gdKIqW7oAB7wALzwADw8aonFAEQ1agC0mABMxaSJvmoAzLU1AHxlRjx9QA

p1, good, it has a string value.

p-p2, wrong, it's not defined in class's props, bug there is no ts error.

p3, good, it's not defined in class's props and thrown a ts error.

Why ts doesn't check p-p2?

Solution

  • Typescript skips type checks on attributes with hyphens in order to be more painless with data- and aria- attributes. At the time this was implemented into typescript template strings didn't exist, so i wonder if they would do it differently if they were implementing it today.

    https://github.com/microsoft/TypeScript/issues/32447#issuecomment-512430295