Enforce property rules on kebab-cased JSX attributes

Bug Report

Reference: https://github.com/microsoft/TypeScript/issues/32447

I thought it was a good idea to reopen this given it's been 4 years and TS's features have advanced substantially since that last issue was filed and closed.

Quoting @RyanCavanaugh

This is the intended behavior because of data- and aria- properties. If we ever get regex-based property names, we'll revisit.

Given we now have template literal types - this is probably ripe for revisiting!

🔎 Search Terms

jsx dash property missing error kebab case

🕗 Version & Regression Information

• This is the behavior in every version I tried

⏯ Playground Link

Playground link with relevant code

💻 Code

type Props = {
  a?: string,
  'some-kebab-property'?: boolean;
} & {
  [k in `data-${string}` | `aria-${string}` | `hello${string}`]?: string
} & {
  [k in 'kebab-case1' | 'kebab-case2']?: string
};
function Component(props: Props) { return null }

function Other() {
  <Component
    a={1} // ✅ expected error
  
    b={1} // ✅ expected error
    
    hello={1} // ✅ expected
    helloThere={1} // ✅ expected
    
    aria-label="" // ✅ valid
    data-foo="" // ✅ valid
  />;

  // ❓ errors on the component, rather than the property
  <Component
    kebab-case1={1}
    kebab-case2={1}
  />;

  // ❓ errors on the component, rather than the property
  <Component
    some-kebab-property={1}
  />;

  <Component
    data-bar={1} // ❌ should error but doesn't
  />;

  <Component
    property-that-definitely-doesnt-exist-yet-ts-does-not-error-on-it={false} // ❌ should error but doesn't
  />;
}

🙁 Actual behavior

This errors on the component, not the property

  <Component
    kebab-case1={1}
    kebab-case2={1}
  />;

  <Component
    some-kebab-property={1}
  />;

These do not error at all

  <Component
    data-bar={1}
  />;

  <Component
    property-that-definitely-doesnt-exist-yet-ts-does-not-error-on-it={false}
  />;

🙂 Expected behavior

This should error on the property - but it errors on the component instead

  <Component
    kebab-case1={1}
    kebab-case2={1}
  />;

  <Component
    some-kebab-property={1}
  />;

Should error because it doesn't match the defined template literal mapped type

  <Component
    data-bar={1}
  />;

Should error because the property doesn't exist

  <Component
    property-that-definitely-doesnt-exist-yet-ts-does-not-error-on-it={false}
  />;

Start with the linked TypeScript Playground and the JSX example to reproduce how kebab-cased attributes are checked. Compare the diagnostics for explicitly mapped properties, data-bar, and the unknown property; done means invalid attributes produce property-level errors while valid data- and aria-prefixed attributes remain accepted.