Skip to content

Commit 15bfaf1

Browse files
sandersnsandersn
authored
Skip IntrinsicAttributes elaboration in JSX errors (microsoft#24461)
* Skip IntrinsicAttributes elaboration in JSX errors Do not issue an error message for a source type that comes from JSX attributes and a target type that is an intersection containing IntrinsicAttributes or IntrinsicClassAttributes. This will make error messages simpler and less confusing. Note: 1. There will always be elaboration under the skipped message, so this won't elide errors completely. 2. Rarely (once in the tests) the intersection type will have more that one non-Intrinsic* member. However, these additional members don't provide useful information either, so it's fine to skip them. * Add test of IntrinsicAttributes error * Fix indentation in test
1 parent c1a5d9b commit 15bfaf1

23 files changed

+468
-296
lines changed

‎src/compiler/checker.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10592,6 +10592,16 @@ namespace ts {
1059210592
else if (source.symbol && source.flags & TypeFlags.Object && globalObjectType === source) {
1059310593
reportError(Diagnostics.The_Object_type_is_assignable_to_very_few_other_types_Did_you_mean_to_use_the_any_type_instead);
1059410594
}
10595+
else if (getObjectFlags(source) & ObjectFlags.JsxAttributes && target.flags & TypeFlags.Intersection) {
10596+
const targetTypes = (target as IntersectionType).types;
10597+
const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes, errorNode);
10598+
const intrinsicClassAttributes = getJsxType(JsxNames.IntrinsicClassAttributes, errorNode);
10599+
if (intrinsicAttributes !== unknownType && intrinsicClassAttributes !== unknownType &&
10600+
(contains(targetTypes, intrinsicAttributes) || contains(targetTypes, intrinsicClassAttributes))) {
10601+
// do not report top error
10602+
return result;
10603+
}
10604+
}
1059510605
reportRelationError(headMessage, source, target);
1059610606
}
1059710607
return result;
@@ -16274,7 +16284,7 @@ namespace ts {
1627416284
return createJsxAttributesTypeFromAttributesProperty(node.parent, checkMode);
1627516285
}
1627616286

16277-
function getJsxType(name: __String, location: Node) {
16287+
function getJsxType(name: __String, location: Node | undefined) {
1627816288
const namespace = getJsxNamespaceAt(location);
1627916289
const exports = namespace && getExportsOfSymbol(namespace);
1628016290
const typeSymbol = exports && getSymbol(exports, name, SymbolFlags.Type);
@@ -16372,7 +16382,7 @@ namespace ts {
1637216382
return getSignatureInstantiation(signature, args, isJavascript);
1637316383
}
1637416384

16375-
function getJsxNamespaceAt(location: Node): Symbol {
16385+
function getJsxNamespaceAt(location: Node | undefined): Symbol {
1637616386
const namespaceName = getJsxNamespace(location);
1637716387
const resolvedNamespace = resolveName(location, namespaceName, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined, namespaceName, /*isUse*/ false);
1637816388
if (resolvedNamespace) {

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
tests/cases/conformance/jsx/file.tsx(42,11): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & SingleChildProp'.
2-
Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'SingleChildProp'.
3-
Types of property 'children' are incompatible.
4-
Type 'Element[]' is not assignable to type 'Element'.
5-
Property 'type' is missing in type 'Element[]'.
1+
tests/cases/conformance/jsx/file.tsx(42,11): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'SingleChildProp'.
2+
Types of property 'children' are incompatible.
3+
Type 'Element[]' is not assignable to type 'Element'.
4+
Property 'type' is missing in type 'Element[]'.
65

76

87
==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
@@ -49,8 +48,7 @@ tests/cases/conformance/jsx/file.tsx(42,11): error TS2322: Type '{ children: Ele
4948
// Error
5049
let k5 = <SingleChildComp a={10} b="hi"><></><Button /><AnotherButton /></SingleChildComp>;
5150
~~~~~~~~~~~~~~~
52-
!!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & SingleChildProp'.
53-
!!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'SingleChildProp'.
54-
!!! error TS2322: Types of property 'children' are incompatible.
55-
!!! error TS2322: Type 'Element[]' is not assignable to type 'Element'.
56-
!!! error TS2322: Property 'type' is missing in type 'Element[]'.
51+
!!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'SingleChildProp'.
52+
!!! error TS2322: Types of property 'children' are incompatible.
53+
!!! error TS2322: Type 'Element[]' is not assignable to type 'Element'.
54+
!!! error TS2322: Property 'type' is missing in type 'Element[]'.

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

Lines changed: 44 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,26 @@
1-
tests/cases/conformance/jsx/file.tsx(14,10): error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
2-
Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
3-
Property 'children' is missing in type '{ a: number; b: string; }'.
1+
tests/cases/conformance/jsx/file.tsx(14,10): error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
2+
Property 'children' is missing in type '{ a: number; b: string; }'.
43
tests/cases/conformance/jsx/file.tsx(17,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
5-
tests/cases/conformance/jsx/file.tsx(31,6): error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
6-
Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'Prop'.
7-
Types of property 'children' are incompatible.
8-
Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
9-
Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
10-
Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
11-
tests/cases/conformance/jsx/file.tsx(37,6): error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
12-
Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
13-
Types of property 'children' are incompatible.
14-
Type '(number | Element)[]' is not assignable to type 'string | Element'.
15-
Type '(number | Element)[]' is not assignable to type 'Element'.
16-
Property 'type' is missing in type '(number | Element)[]'.
17-
tests/cases/conformance/jsx/file.tsx(43,6): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
18-
Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
19-
Types of property 'children' are incompatible.
20-
Type '(string | Element)[]' is not assignable to type 'string | Element'.
21-
Type '(string | Element)[]' is not assignable to type 'Element'.
22-
Property 'type' is missing in type '(string | Element)[]'.
23-
tests/cases/conformance/jsx/file.tsx(49,6): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
24-
Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'Prop'.
25-
Types of property 'children' are incompatible.
26-
Type 'Element[]' is not assignable to type 'string | Element'.
27-
Type 'Element[]' is not assignable to type 'Element'.
28-
Property 'type' is missing in type 'Element[]'.
4+
tests/cases/conformance/jsx/file.tsx(31,6): error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'Prop'.
5+
Types of property 'children' are incompatible.
6+
Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
7+
Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
8+
Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
9+
tests/cases/conformance/jsx/file.tsx(37,6): error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
10+
Types of property 'children' are incompatible.
11+
Type '(number | Element)[]' is not assignable to type 'string | Element'.
12+
Type '(number | Element)[]' is not assignable to type 'Element'.
13+
Property 'type' is missing in type '(number | Element)[]'.
14+
tests/cases/conformance/jsx/file.tsx(43,6): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
15+
Types of property 'children' are incompatible.
16+
Type '(string | Element)[]' is not assignable to type 'string | Element'.
17+
Type '(string | Element)[]' is not assignable to type 'Element'.
18+
Property 'type' is missing in type '(string | Element)[]'.
19+
tests/cases/conformance/jsx/file.tsx(49,6): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'Prop'.
20+
Types of property 'children' are incompatible.
21+
Type 'Element[]' is not assignable to type 'string | Element'.
22+
Type 'Element[]' is not assignable to type 'Element'.
23+
Property 'type' is missing in type 'Element[]'.
2924

3025

3126
==== tests/cases/conformance/jsx/file.tsx (6 errors) ====
@@ -44,9 +39,8 @@ tests/cases/conformance/jsx/file.tsx(49,6): error TS2322: Type '{ children: Elem
4439
// Error: missing children
4540
let k = <Comp a={10} b="hi" />;
4641
~~~~
47-
!!! error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
48-
!!! error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
49-
!!! error TS2322: Property 'children' is missing in type '{ a: number; b: string; }'.
42+
!!! error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
43+
!!! error TS2322: Property 'children' is missing in type '{ a: number; b: string; }'.
5044

5145
let k0 =
5246
<Comp a={10} b="hi" children="Random" >
@@ -67,51 +61,47 @@ tests/cases/conformance/jsx/file.tsx(49,6): error TS2322: Type '{ children: Elem
6761
let k2 =
6862
<Comp a={10} b="hi">
6963
~~~~
70-
!!! error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
71-
!!! error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'Prop'.
72-
!!! error TS2322: Types of property 'children' are incompatible.
73-
!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
74-
!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
75-
!!! error TS2322: Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
64+
!!! error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'Prop'.
65+
!!! error TS2322: Types of property 'children' are incompatible.
66+
!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
67+
!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
68+
!!! error TS2322: Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
7669
<div> My Div </div>
7770
{(name: string) => <div> My name {name} </div>}
7871
</Comp>;
7972

8073
let k3 =
8174
<Comp a={10} b="hi">
8275
~~~~
83-
!!! error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
84-
!!! error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
85-
!!! error TS2322: Types of property 'children' are incompatible.
86-
!!! error TS2322: Type '(number | Element)[]' is not assignable to type 'string | Element'.
87-
!!! error TS2322: Type '(number | Element)[]' is not assignable to type 'Element'.
88-
!!! error TS2322: Property 'type' is missing in type '(number | Element)[]'.
76+
!!! error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
77+
!!! error TS2322: Types of property 'children' are incompatible.
78+
!!! error TS2322: Type '(number | Element)[]' is not assignable to type 'string | Element'.
79+
!!! error TS2322: Type '(number | Element)[]' is not assignable to type 'Element'.
80+
!!! error TS2322: Property 'type' is missing in type '(number | Element)[]'.
8981
<div> My Div </div>
9082
{1000000}
9183
</Comp>;
9284

9385
let k4 =
9486
<Comp a={10} b="hi" >
9587
~~~~
96-
!!! error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
97-
!!! error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
98-
!!! error TS2322: Types of property 'children' are incompatible.
99-
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'string | Element'.
100-
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element'.
101-
!!! error TS2322: Property 'type' is missing in type '(string | Element)[]'.
88+
!!! error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
89+
!!! error TS2322: Types of property 'children' are incompatible.
90+
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'string | Element'.
91+
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element'.
92+
!!! error TS2322: Property 'type' is missing in type '(string | Element)[]'.
10293
<div> My Div </div>
10394
hi hi hi!
10495
</Comp>;
10596

10697
let k5 =
10798
<Comp a={10} b="hi" >
10899
~~~~
109-
!!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
110-
!!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'Prop'.
111-
!!! error TS2322: Types of property 'children' are incompatible.
112-
!!! error TS2322: Type 'Element[]' is not assignable to type 'string | Element'.
113-
!!! error TS2322: Type 'Element[]' is not assignable to type 'Element'.
114-
!!! error TS2322: Property 'type' is missing in type 'Element[]'.
100+
!!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'Prop'.
101+
!!! error TS2322: Types of property 'children' are incompatible.
102+
!!! error TS2322: Type 'Element[]' is not assignable to type 'string | Element'.
103+
!!! error TS2322: Type 'Element[]' is not assignable to type 'Element'.
104+
!!! error TS2322: Property 'type' is missing in type 'Element[]'.
115105
<div> My Div </div>
116106
<div> My Div </div>
117107
</Comp>;

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
tests/cases/conformance/jsx/file.tsx(24,28): error TS2551: Property 'NAme' does not exist on type 'IUser'. Did you mean 'Name'?
2-
tests/cases/conformance/jsx/file.tsx(32,10): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
3-
Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
4-
Types of property 'children' are incompatible.
5-
Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
6-
Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
2+
tests/cases/conformance/jsx/file.tsx(32,10): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
3+
Types of property 'children' are incompatible.
4+
Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
5+
Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
76

87

98
==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
@@ -42,11 +41,10 @@ tests/cases/conformance/jsx/file.tsx(32,10): error TS2322: Type '{ children: ((u
4241
return (
4342
<FetchUser>
4443
~~~~~~~~~
45-
!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
46-
!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
47-
!!! error TS2322: Types of property 'children' are incompatible.
48-
!!! error TS2322: Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
49-
!!! error TS2322: Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
44+
!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
45+
!!! error TS2322: Types of property 'children' are incompatible.
46+
!!! error TS2322: Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
47+
!!! error TS2322: Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
5048

5149

5250

0 commit comments

Comments
 (0)