Skip to content

Commit 4f25774

Browse files
DanielRosenwasserDanielRosenwasser
authored
Merge pull request #33477 from Nathan-Fenner/error-on-extra-jsx-prop
report error on extraneous JSX prop instead of element name
2 parents ff10599 + 86c7d84 commit 4f25774

18 files changed

+73
-68
lines changed

‎src/compiler/checker.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13041,6 +13041,11 @@ namespace ts {
1304113041
// JsxAttributes has an object-literal flag and undergo same type-assignablity check as normal object-literal.
1304213042
// However, using an object-literal error message will be very confusing to the users so we give different a message.
1304313043
// TODO: Spelling suggestions for excess jsx attributes (needs new diagnostic messages)
13044+
if (prop.valueDeclaration && isJsxAttribute(prop.valueDeclaration)) {
13045+
// Note that extraneous children (as in `<NoChild>extra</NoChild>`) don't pass this check,
13046+
// since `children` is a SyntaxKind.PropertySignature instead of a SyntaxKind.JsxAttribute.
13047+
errorNode = prop.valueDeclaration.name;
13048+
}
1304413049
reportError(Diagnostics.Property_0_does_not_exist_on_type_1, symbolToString(prop), typeToString(errorTarget));
1304513050
}
1304613051
else {

‎tests/baselines/reference/checkJsxChildrenProperty15.errors.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
tests/cases/conformance/jsx/file.tsx(10,13): error TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes'.
1+
tests/cases/conformance/jsx/file.tsx(10,17): error TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes'.
22
Property 'children' does not exist on type 'IntrinsicAttributes'.
33
tests/cases/conformance/jsx/file.tsx(11,13): error TS2322: Type '{ children: Element; key: string; }' is not assignable to type 'IntrinsicAttributes'.
44
Property 'children' does not exist on type 'IntrinsicAttributes'.
@@ -17,7 +17,7 @@ tests/cases/conformance/jsx/file.tsx(12,13): error TS2322: Type '{ children: Ele
1717

1818
// Not OK (excess children)
1919
const k3 = <Tag children={<div></div>} />;
20-
~~~
20+
~~~~~~~~
2121
!!! error TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes'.
2222
!!! error TS2322: Property 'children' does not exist on type 'IntrinsicAttributes'.
2323
const k4 = <Tag key="1"><div></div></Tag>;

‎tests/baselines/reference/contextuallyTypedStringLiteralsInJsxAttributes02.errors.txt

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(27,13): error TS2769: No overload matches this call.
1+
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(27,64): error TS2769: No overload matches this call.
22
Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
33
Type '{ extra: true; onClick: (k: "left" | "right") => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
44
Property 'extra' does not exist on type 'IntrinsicAttributes & ButtonProps'.
55
Overload 2 of 2, '(linkProps: LinkProps): Element', gave the following error.
66
Type '{ extra: true; onClick: (k: "left" | "right") => void; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
77
Property 'extra' does not exist on type 'IntrinsicAttributes & LinkProps'.
8-
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(28,13): error TS2769: No overload matches this call.
8+
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(28,12): error TS2769: No overload matches this call.
99
Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
1010
Type '{ onClick: (k: "left" | "right") => void; extra: true; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
1111
Property 'extra' does not exist on type 'IntrinsicAttributes & ButtonProps'.
1212
Overload 2 of 2, '(linkProps: LinkProps): Element', gave the following error.
1313
Type '{ onClick: (k: "left" | "right") => void; extra: true; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
1414
Property 'onClick' does not exist on type 'IntrinsicAttributes & LinkProps'.
15-
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(29,13): error TS2769: No overload matches this call.
15+
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(29,43): error TS2769: No overload matches this call.
1616
Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
1717
Type '{ extra: true; goTo: string; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
1818
Property 'extra' does not exist on type 'IntrinsicAttributes & ButtonProps'.
1919
Overload 2 of 2, '(linkProps: LinkProps): Element', gave the following error.
2020
Type '{ extra: true; goTo: "home"; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
2121
Property 'extra' does not exist on type 'IntrinsicAttributes & LinkProps'.
22-
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(30,13): error TS2769: No overload matches this call.
22+
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(30,12): error TS2769: No overload matches this call.
2323
Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
2424
Type '{ goTo: string; extra: true; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
2525
Property 'goTo' does not exist on type 'IntrinsicAttributes & ButtonProps'.
2626
Overload 2 of 2, '(linkProps: LinkProps): Element', gave the following error.
2727
Type '{ goTo: "home"; extra: true; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
2828
Property 'extra' does not exist on type 'IntrinsicAttributes & LinkProps'.
29-
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(33,13): error TS2322: Type '{ extra: true; onClick: (k: "left" | "right") => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
29+
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(33,65): error TS2322: Type '{ extra: true; onClick: (k: "left" | "right") => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
3030
Property 'extra' does not exist on type 'IntrinsicAttributes & ButtonProps'.
31-
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(36,13): error TS2322: Type '{ extra: true; goTo: "home"; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
31+
tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(36,44): error TS2322: Type '{ extra: true; goTo: "home"; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
3232
Property 'extra' does not exist on type 'IntrinsicAttributes & LinkProps'.
3333

3434

@@ -60,7 +60,7 @@ tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(36,13): err
6060
}
6161

6262
const b0 = <MainButton {...{onClick: (k) => {console.log(k)}}} extra />; // k has type "left" | "right"
63-
~~~~~~~~~~
63+
~~~~~
6464
!!! error TS2769: No overload matches this call.
6565
!!! error TS2769: Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
6666
!!! error TS2769: Type '{ extra: true; onClick: (k: "left" | "right") => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
@@ -69,7 +69,7 @@ tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(36,13): err
6969
!!! error TS2769: Type '{ extra: true; onClick: (k: "left" | "right") => void; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
7070
!!! error TS2769: Property 'extra' does not exist on type 'IntrinsicAttributes & LinkProps'.
7171
const b2 = <MainButton onClick={(k)=>{console.log(k)}} extra />; // k has type "left" | "right"
72-
~~~~~~~~~~
72+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7373
!!! error TS2769: No overload matches this call.
7474
!!! error TS2769: Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
7575
!!! error TS2769: Type '{ onClick: (k: "left" | "right") => void; extra: true; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
@@ -78,7 +78,7 @@ tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(36,13): err
7878
!!! error TS2769: Type '{ onClick: (k: "left" | "right") => void; extra: true; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
7979
!!! error TS2769: Property 'onClick' does not exist on type 'IntrinsicAttributes & LinkProps'.
8080
const b3 = <MainButton {...{goTo:"home"}} extra />; // goTo has type"home" | "contact"
81-
~~~~~~~~~~
81+
~~~~~
8282
!!! error TS2769: No overload matches this call.
8383
!!! error TS2769: Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
8484
!!! error TS2769: Type '{ extra: true; goTo: string; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
@@ -87,7 +87,7 @@ tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(36,13): err
8787
!!! error TS2769: Type '{ extra: true; goTo: "home"; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
8888
!!! error TS2769: Property 'extra' does not exist on type 'IntrinsicAttributes & LinkProps'.
8989
const b4 = <MainButton goTo="home" extra />; // goTo has type "home" | "contact"
90-
~~~~~~~~~~
90+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9191
!!! error TS2769: No overload matches this call.
9292
!!! error TS2769: Overload 1 of 2, '(buttonProps: ButtonProps): Element', gave the following error.
9393
!!! error TS2769: Type '{ goTo: string; extra: true; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
@@ -98,13 +98,13 @@ tests/cases/conformance/types/contextualTypes/jsxAttributes/file.tsx(36,13): err
9898

9999
export function NoOverload(buttonProps: ButtonProps): JSX.Element { return undefined }
100100
const c1 = <NoOverload {...{onClick: (k) => {console.log(k)}}} extra />; // k has type any
101-
~~~~~~~~~~
101+
~~~~~
102102
!!! error TS2322: Type '{ extra: true; onClick: (k: "left" | "right") => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
103103
!!! error TS2322: Property 'extra' does not exist on type 'IntrinsicAttributes & ButtonProps'.
104104

105105
export function NoOverload1(linkProps: LinkProps): JSX.Element { return undefined }
106106
const d1 = <NoOverload1 {...{goTo:"home"}} extra />; // goTo has type "home" | "contact"
107-
~~~~~~~~~~~
107+
~~~~~
108108
!!! error TS2322: Type '{ extra: true; goTo: "home"; }' is not assignable to type 'IntrinsicAttributes & LinkProps'.
109109
!!! error TS2322: Property 'extra' does not exist on type 'IntrinsicAttributes & LinkProps'.
110110

‎tests/baselines/reference/tsxAttributeResolution1.errors.txt

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
tests/cases/conformance/jsx/file.tsx(23,8): error TS2322: Type 'string' is not assignable to type 'number'.
2-
tests/cases/conformance/jsx/file.tsx(24,2): error TS2322: Type '{ y: number; }' is not assignable to type 'Attribs1'.
2+
tests/cases/conformance/jsx/file.tsx(24,8): error TS2322: Type '{ y: number; }' is not assignable to type 'Attribs1'.
33
Property 'y' does not exist on type 'Attribs1'.
4-
tests/cases/conformance/jsx/file.tsx(25,2): error TS2322: Type '{ y: string; }' is not assignable to type 'Attribs1'.
4+
tests/cases/conformance/jsx/file.tsx(25,8): error TS2322: Type '{ y: string; }' is not assignable to type 'Attribs1'.
55
Property 'y' does not exist on type 'Attribs1'.
66
tests/cases/conformance/jsx/file.tsx(26,8): error TS2322: Type 'string' is not assignable to type 'number'.
7-
tests/cases/conformance/jsx/file.tsx(27,2): error TS2322: Type '{ var: string; }' is not assignable to type 'Attribs1'.
7+
tests/cases/conformance/jsx/file.tsx(27,8): error TS2322: Type '{ var: string; }' is not assignable to type 'Attribs1'.
88
Property 'var' does not exist on type 'Attribs1'.
99
tests/cases/conformance/jsx/file.tsx(29,2): error TS2741: Property 'reqd' is missing in type '{}' but required in type '{ reqd: string; }'.
1010
tests/cases/conformance/jsx/file.tsx(30,8): error TS2322: Type 'number' is not assignable to type 'string'.
@@ -38,19 +38,19 @@ tests/cases/conformance/jsx/file.tsx(30,8): error TS2322: Type 'number' is not a
3838
!!! error TS2322: Type 'string' is not assignable to type 'number'.
3939
!!! related TS6500 tests/cases/conformance/jsx/file.tsx:10:2: The expected type comes from property 'x' which is declared here on type 'Attribs1'
4040
<test1 y={0} />; // Error, no property "y"
41-
~~~~~
41+
~
4242
!!! error TS2322: Type '{ y: number; }' is not assignable to type 'Attribs1'.
4343
!!! error TS2322: Property 'y' does not exist on type 'Attribs1'.
4444
<test1 y="foo" />; // Error, no property "y"
45-
~~~~~
45+
~
4646
!!! error TS2322: Type '{ y: string; }' is not assignable to type 'Attribs1'.
4747
!!! error TS2322: Property 'y' does not exist on type 'Attribs1'.
4848
<test1 x="32" />; // Error, "32" is not number
4949
~
5050
!!! error TS2322: Type 'string' is not assignable to type 'number'.
5151
!!! related TS6500 tests/cases/conformance/jsx/file.tsx:10:2: The expected type comes from property 'x' which is declared here on type 'Attribs1'
5252
<test1 var="10" />; // Error, no 'var' property
53-
~~~~~
53+
~~~
5454
!!! error TS2322: Type '{ var: string; }' is not assignable to type 'Attribs1'.
5555
!!! error TS2322: Property 'var' does not exist on type 'Attribs1'.
5656

‎tests/baselines/reference/tsxAttributeResolution11.errors.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
tests/cases/conformance/jsx/file.tsx(11,10): error TS2322: Type '{ bar: string; }' is not assignable to type 'IntrinsicAttributes & { ref?: string; }'.
1+
tests/cases/conformance/jsx/file.tsx(11,22): error TS2322: Type '{ bar: string; }' is not assignable to type 'IntrinsicAttributes & { ref?: string; }'.
22
Property 'bar' does not exist on type 'IntrinsicAttributes & { ref?: string; }'.
33

44

@@ -27,7 +27,7 @@ tests/cases/conformance/jsx/file.tsx(11,10): error TS2322: Type '{ bar: string;
2727

2828
// Should be an OK
2929
var x = <MyComponent bar='world' />;
30-
~~~~~~~~~~~
30+
~~~
3131
!!! error TS2322: Type '{ bar: string; }' is not assignable to type 'IntrinsicAttributes & { ref?: string; }'.
3232
!!! error TS2322: Property 'bar' does not exist on type 'IntrinsicAttributes & { ref?: string; }'.
3333

‎tests/baselines/reference/tsxAttributeResolution15.errors.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
tests/cases/conformance/jsx/file.tsx(11,10): error TS2322: Type '{ prop1: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<BigGreeter> & { children?: ReactNode; }'.
1+
tests/cases/conformance/jsx/file.tsx(11,21): error TS2322: Type '{ prop1: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<BigGreeter> & { children?: ReactNode; }'.
22
Property 'prop1' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<BigGreeter> & { children?: ReactNode; }'.
33
tests/cases/conformance/jsx/file.tsx(14,44): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
44

@@ -15,7 +15,7 @@ tests/cases/conformance/jsx/file.tsx(14,44): error TS7017: Element implicitly ha
1515

1616
// Error
1717
let a = <BigGreeter prop1="hello" />
18-
~~~~~~~~~~
18+
~~~~~
1919
!!! error TS2322: Type '{ prop1: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<BigGreeter> & { children?: ReactNode; }'.
2020
!!! error TS2322: Property 'prop1' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<BigGreeter> & { children?: ReactNode; }'.
2121

‎tests/baselines/reference/tsxElementResolution11.errors.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
tests/cases/conformance/jsx/file.tsx(17,2): error TS2322: Type '{ x: number; }' is not assignable to type '{ q?: number; }'.
1+
tests/cases/conformance/jsx/file.tsx(17,7): error TS2322: Type '{ x: number; }' is not assignable to type '{ q?: number; }'.
22
Property 'x' does not exist on type '{ q?: number; }'.
33

44

@@ -20,7 +20,7 @@ tests/cases/conformance/jsx/file.tsx(17,2): error TS2322: Type '{ x: number; }'
2020
}
2121
var Obj2: Obj2type;
2222
<Obj2 x={10} />; // Error
23-
~~~~
23+
~
2424
!!! error TS2322: Type '{ x: number; }' is not assignable to type '{ q?: number; }'.
2525
!!! error TS2322: Property 'x' does not exist on type '{ q?: number; }'.
2626

‎tests/baselines/reference/tsxElementResolution3.errors.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
tests/cases/conformance/jsx/file.tsx(12,2): error TS2322: Type '{ w: string; }' is not assignable to type '{ n: string; }'.
1+
tests/cases/conformance/jsx/file.tsx(12,7): error TS2322: Type '{ w: string; }' is not assignable to type '{ n: string; }'.
22
Property 'w' does not exist on type '{ n: string; }'.
33

44

@@ -15,6 +15,6 @@ tests/cases/conformance/jsx/file.tsx(12,2): error TS2322: Type '{ w: string; }'
1515

1616
// Error
1717
<span w='err' />;
18-
~~~~
18+
~
1919
!!! error TS2322: Type '{ w: string; }' is not assignable to type '{ n: string; }'.
2020
!!! error TS2322: Property 'w' does not exist on type '{ n: string; }'.

‎tests/baselines/reference/tsxElementResolution4.errors.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
tests/cases/conformance/jsx/file.tsx(16,2): error TS2322: Type '{ q: string; }' is not assignable to type '{ m: string; }'.
1+
tests/cases/conformance/jsx/file.tsx(16,7): error TS2322: Type '{ q: string; }' is not assignable to type '{ m: string; }'.
22
Property 'q' does not exist on type '{ m: string; }'.
33

44

@@ -19,7 +19,7 @@ tests/cases/conformance/jsx/file.tsx(16,2): error TS2322: Type '{ q: string; }'
1919

2020
// Error
2121
<span q='' />;
22-
~~~~
22+
~
2323
!!! error TS2322: Type '{ q: string; }' is not assignable to type '{ m: string; }'.
2424
!!! error TS2322: Property 'q' does not exist on type '{ m: string; }'.
2525

0 commit comments

Comments
 (0)