Skip to content

Specialize JSX error messages for missing properties #39749

Open

Description

import React from "react";

function Foo(props: { count: number }) {
    return <div>{props.count}</div>;
}

<Foo />

function Bar(props: { a: any, b: any }) {
    return <div />;
}

<Bar />

function Baz(props: { a: any, b: any, c: any, d: any, e: any, f: any }) {
    return <div />
}

<Baz />

Current

Property 'count' is missing in type '{}' but required in type '{ count: number; }'.
Type '{}' is missing the following properties from type '{ a: any; b: any; }': a, b
Type '{}' is missing the following properties from type '{ a: any; b: any; c: any; d: any; e: any; f: any; }': a, b, c, d, and 2 more.

Proposed

The 'count' attribute is missing, but is required for this 'Foo' tag.
This 'Bar' tag is missing the following attributes: a, b.
This 'Baz' tag is missing the following attributes: a, b, c, d, and 2 more.

Playground Link

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

Metadata

Assignees

Labels

Domain: Error MessagesThe issue relates to error messagingDomain: JSX/TSXRelates to the JSX parser and emitterEffort: ModerateRequires experience with the TypeScript codebase, but feasible. Harder than "Effort: Casual".Experience EnhancementNoncontroversial enhancementsFix AvailableA PR has been opened for this issueHelp WantedYou can do thisRescheduledThis issue was previously scheduled to an earlier milestone

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions