Skip to content

Proposal: strictJsxAttributeChecks #46229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
4 of 5 tasks
DanielRosenwasser opened this issue Oct 5, 2021 · 1 comment
Open
4 of 5 tasks

Proposal: strictJsxAttributeChecks #46229

DanielRosenwasser opened this issue Oct 5, 2021 · 1 comment
Labels
Effort: Casual Good issue if you're already used to contributing to the codebase. Harder than "good first issue". Experimentation Needed Someone needs to try this out to see what happens Help Wanted You can do this Suggestion An idea for TypeScript

Comments

@DanielRosenwasser
Copy link
Member

DanielRosenwasser commented Oct 5, 2021

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.

@DanielRosenwasser
Copy link
Member Author

DanielRosenwasser commented Oct 6, 2021

I think we need some experimentation here. PRs are welcome, but the team feels a bit divided about the value that this brings compared to the potential breakage and the overhead of yet another flag. For that reason, even if results are mildly good (i.e. this catches a few legitimate bugs) we might not end up merging that PR.

@DanielRosenwasser DanielRosenwasser added Effort: Casual Good issue if you're already used to contributing to the codebase. Harder than "good first issue". Help Wanted You can do this and removed In Discussion Not yet reached consensus labels Oct 6, 2021
Zzzen added a commit to Zzzen/TypeScript that referenced this issue Oct 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Effort: Casual Good issue if you're already used to contributing to the codebase. Harder than "good first issue". Experimentation Needed Someone needs to try this out to see what happens Help Wanted You can do this Suggestion An idea for TypeScript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant