-
Notifications
You must be signed in to change notification settings - Fork 12.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve error message for invalid return type of JSX component (#32702)
* New diagnostic message for wrong JSX function component * Component and Mixed type * fix existing tests * add new test for JSX component return type error * fix tslint error * update diagnostic message to include component name * accept baseline * update tests * missing semicolon * accept baseline Co-authored-by: Wesley Wigham <wwigham@gmail.com>
- Loading branch information
Showing
12 changed files
with
509 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
tests/baselines/reference/jsxComponentTypeErrors.errors.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| tests/cases/compiler/jsxComponentTypeErrors.tsx(16,11): error TS2786: 'this' cannot be used as a JSX component. | ||
| Its return type '{ type: "foo" | undefined; }' is not a valid JSX element. | ||
| Types of property 'type' are incompatible. | ||
| Type '"foo" | undefined' is not assignable to type '"element"'. | ||
| Type 'undefined' is not assignable to type '"element"'. | ||
| tests/cases/compiler/jsxComponentTypeErrors.tsx(25,16): error TS2786: 'FunctionComponent' cannot be used as a JSX component. | ||
| Its return type '{ type: "abc" | undefined; }' is not a valid JSX element. | ||
| Types of property 'type' are incompatible. | ||
| Type '"abc" | undefined' is not assignable to type '"element"'. | ||
| Type 'undefined' is not assignable to type '"element"'. | ||
| tests/cases/compiler/jsxComponentTypeErrors.tsx(26,16): error TS2786: 'FunctionComponent' cannot be used as a JSX component. | ||
| Its return type '{ type: "abc" | undefined; }' is not a valid JSX element. | ||
| tests/cases/compiler/jsxComponentTypeErrors.tsx(27,16): error TS2786: 'ClassComponent' cannot be used as a JSX component. | ||
| Its instance type 'ClassComponent' is not a valid JSX element. | ||
| Types of property 'type' are incompatible. | ||
| Type 'string' is not assignable to type '"element-class"'. | ||
| tests/cases/compiler/jsxComponentTypeErrors.tsx(28,16): error TS2786: 'MixedComponent' cannot be used as a JSX component. | ||
| Its element type 'ClassComponent | { type: string | undefined; }' is not a valid JSX element. | ||
| Type 'ClassComponent' is not assignable to type 'Element | ElementClass | null'. | ||
| Type 'ClassComponent' is not assignable to type 'ElementClass'. | ||
| tests/cases/compiler/jsxComponentTypeErrors.tsx(37,16): error TS2786: 'obj.MemberFunctionComponent' cannot be used as a JSX component. | ||
| Its return type '{}' is not a valid JSX element. | ||
| Property 'type' is missing in type '{}' but required in type 'Element'. | ||
| tests/cases/compiler/jsxComponentTypeErrors.tsx(38,16): error TS2786: 'obj. MemberClassComponent' cannot be used as a JSX component. | ||
| Its instance type 'MemberClassComponent' is not a valid JSX element. | ||
| Property 'type' is missing in type 'MemberClassComponent' but required in type 'ElementClass'. | ||
|
|
||
|
|
||
| ==== tests/cases/compiler/jsxComponentTypeErrors.tsx (7 errors) ==== | ||
| namespace JSX { | ||
| export interface Element { | ||
| type: 'element'; | ||
| } | ||
| export interface ElementClass { | ||
| type: 'element-class'; | ||
| } | ||
| } | ||
|
|
||
| function FunctionComponent<T extends string>({type}: {type?: T}) { | ||
| return { | ||
| type | ||
| } | ||
| } | ||
| FunctionComponent.useThis = function() { | ||
| return <this type="foo" />; | ||
| ~~~~ | ||
| !!! error TS2786: 'this' cannot be used as a JSX component. | ||
| !!! error TS2786: Its return type '{ type: "foo" | undefined; }' is not a valid JSX element. | ||
| !!! error TS2786: Types of property 'type' are incompatible. | ||
| !!! error TS2786: Type '"foo" | undefined' is not assignable to type '"element"'. | ||
| !!! error TS2786: Type 'undefined' is not assignable to type '"element"'. | ||
| } | ||
|
|
||
| class ClassComponent { | ||
| type = 'string'; | ||
| } | ||
|
|
||
| const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; | ||
|
|
||
| const elem1 = <FunctionComponent type="abc" />; | ||
| ~~~~~~~~~~~~~~~~~ | ||
| !!! error TS2786: 'FunctionComponent' cannot be used as a JSX component. | ||
| !!! error TS2786: Its return type '{ type: "abc" | undefined; }' is not a valid JSX element. | ||
| !!! error TS2786: Types of property 'type' are incompatible. | ||
| !!! error TS2786: Type '"abc" | undefined' is not assignable to type '"element"'. | ||
| !!! error TS2786: Type 'undefined' is not assignable to type '"element"'. | ||
| const elem2 = <FunctionComponent<"abc"> />; | ||
| ~~~~~~~~~~~~~~~~~ | ||
| !!! error TS2786: 'FunctionComponent' cannot be used as a JSX component. | ||
| !!! error TS2786: Its return type '{ type: "abc" | undefined; }' is not a valid JSX element. | ||
| const elem3 = <ClassComponent />; | ||
| ~~~~~~~~~~~~~~ | ||
| !!! error TS2786: 'ClassComponent' cannot be used as a JSX component. | ||
| !!! error TS2786: Its instance type 'ClassComponent' is not a valid JSX element. | ||
| !!! error TS2786: Types of property 'type' are incompatible. | ||
| !!! error TS2786: Type 'string' is not assignable to type '"element-class"'. | ||
| const elem4 = <MixedComponent />; | ||
| ~~~~~~~~~~~~~~ | ||
| !!! error TS2786: 'MixedComponent' cannot be used as a JSX component. | ||
| !!! error TS2786: Its element type 'ClassComponent | { type: string | undefined; }' is not a valid JSX element. | ||
| !!! error TS2786: Type 'ClassComponent' is not assignable to type 'Element | ElementClass | null'. | ||
| !!! error TS2786: Type 'ClassComponent' is not assignable to type 'ElementClass'. | ||
|
|
||
| const obj = { | ||
| MemberFunctionComponent() { | ||
| return {}; | ||
| }, | ||
| MemberClassComponent: class {}, | ||
| }; | ||
|
|
||
| const elem5 = <obj.MemberFunctionComponent />; | ||
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
| !!! error TS2786: 'obj.MemberFunctionComponent' cannot be used as a JSX component. | ||
| !!! error TS2786: Its return type '{}' is not a valid JSX element. | ||
| !!! error TS2786: Property 'type' is missing in type '{}' but required in type 'Element'. | ||
| !!! related TS2728 tests/cases/compiler/jsxComponentTypeErrors.tsx:3:5: 'type' is declared here. | ||
| const elem6 = <obj. MemberClassComponent />; | ||
| ~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
| !!! error TS2786: 'obj. MemberClassComponent' cannot be used as a JSX component. | ||
| !!! error TS2786: Its instance type 'MemberClassComponent' is not a valid JSX element. | ||
| !!! error TS2786: Property 'type' is missing in type 'MemberClassComponent' but required in type 'ElementClass'. | ||
| !!! related TS2728 tests/cases/compiler/jsxComponentTypeErrors.tsx:6:5: 'type' is declared here. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| //// [jsxComponentTypeErrors.tsx] | ||
| namespace JSX { | ||
| export interface Element { | ||
| type: 'element'; | ||
| } | ||
| export interface ElementClass { | ||
| type: 'element-class'; | ||
| } | ||
| } | ||
|
|
||
| function FunctionComponent<T extends string>({type}: {type?: T}) { | ||
| return { | ||
| type | ||
| } | ||
| } | ||
| FunctionComponent.useThis = function() { | ||
| return <this type="foo" />; | ||
| } | ||
|
|
||
| class ClassComponent { | ||
| type = 'string'; | ||
| } | ||
|
|
||
| const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; | ||
|
|
||
| const elem1 = <FunctionComponent type="abc" />; | ||
| const elem2 = <FunctionComponent<"abc"> />; | ||
| const elem3 = <ClassComponent />; | ||
| const elem4 = <MixedComponent />; | ||
|
|
||
| const obj = { | ||
| MemberFunctionComponent() { | ||
| return {}; | ||
| }, | ||
| MemberClassComponent: class {}, | ||
| }; | ||
|
|
||
| const elem5 = <obj.MemberFunctionComponent />; | ||
| const elem6 = <obj. MemberClassComponent />; | ||
|
|
||
|
|
||
| //// [jsxComponentTypeErrors.jsx] | ||
| "use strict"; | ||
| function FunctionComponent(_a) { | ||
| var type = _a.type; | ||
| return { | ||
| type: type | ||
| }; | ||
| } | ||
| FunctionComponent.useThis = function () { | ||
| return <this type="foo"/>; | ||
| }; | ||
| var ClassComponent = /** @class */ (function () { | ||
| function ClassComponent() { | ||
| this.type = 'string'; | ||
| } | ||
| return ClassComponent; | ||
| }()); | ||
| var MixedComponent = Math.random() ? FunctionComponent : ClassComponent; | ||
| var elem1 = <FunctionComponent type="abc"/>; | ||
| var elem2 = <FunctionComponent />; | ||
| var elem3 = <ClassComponent />; | ||
| var elem4 = <MixedComponent />; | ||
| var obj = { | ||
| MemberFunctionComponent: function () { | ||
| return {}; | ||
| }, | ||
| MemberClassComponent: /** @class */ (function () { | ||
| function MemberClassComponent() { | ||
| } | ||
| return MemberClassComponent; | ||
| }()) | ||
| }; | ||
| var elem5 = <obj.MemberFunctionComponent />; | ||
| var elem6 = <obj.MemberClassComponent />; |
Oops, something went wrong.