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}
  />;

Inizia con il TypeScript Playground collegato e l'esempio JSX per riprodurre il modo in cui vengono verificati gli attributi in kebab-case. Confronta i diagnostici per le proprietà mappate esplicitamente, data-bar e la proprietà sconosciuta; il lavoro è completo quando gli attributi non validi producono errori a livello di proprietà, mentre gli attributi validi con prefisso data- e aria- continuano a essere accettati.