Proposal: strictJsxAttributeChecks

When TypeScript checks if provided attributes match a given type, it exempts dashed attributes from being checked against things like index signatures.

import React from 'react';

interface Props {
    [prop: string]: number;
}

function MyComponent(x: Props) {
    return <div />
}

// No error.
<MyComponent foo-bar={"hello"} />

This applies to all index signatures, even string pattern index signatures that match.

import React from 'react';

interface Props {
    [prop: `data-${string}`]: number;
}

function MyComponent(x: Props) {
    return <div />
}

// No error.
<MyComponent data-bar={"hello"} />

Under this new --strict mode flag, these properties would be strictly checked in the presence of an index signature.

This issue is a possible alternative for https://github.com/microsoft/TypeScript/issues/44797. Instead of validating against a specific set of index signatures, this idea in this proposal is to tighten checking against all index signatures under a new strict-mode flag.

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • It would for --strict mode users.
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

💻 Use Cases

One of the motivating examples for template string types was index patterns on object types. This was something that specifically came up in discussions with library authors of Fluent UI; however, this checking doesn't fully apply to JSX attributes, which seems like an unfortunate accident.