Skip to content

Proposal: strictJsxAttributeChecks #46229

Open
@DanielRosenwasser

Description

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 #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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Effort: CasualGood issue if you're already used to contributing to the codebase. Harder than "good first issue".Experimentation NeededSomeone needs to try this out to see what happensHelp WantedYou can do thisSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions