From a6bce82c3588072cc909ca6d0889669038abecd2 Mon Sep 17 00:00:00 2001 From: uhyo Date: Sun, 4 Aug 2019 22:16:35 +0900 Subject: [PATCH 01/10] New diagnostic message for wrong JSX function component --- src/compiler/checker.ts | 12 ++++++++---- src/compiler/diagnosticMessages.json | 8 ++++++++ 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts index f699c08b4db7d..4ec17d29bc9df 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -20241,11 +20241,14 @@ namespace ts { return anyType; } - function checkJsxReturnAssignableToAppropriateBound(refKind: JsxReferenceKind, elemInstanceType: Type, openingLikeElement: Node) { + function checkJsxReturnAssignableToAppropriateBound(refKind: JsxReferenceKind, elemInstanceType: Type, openingLikeElement: JsxOpeningLikeElement) { if (refKind === JsxReferenceKind.Function) { const sfcReturnConstraint = getJsxStatelessElementTypeAt(openingLikeElement); if (sfcReturnConstraint) { - checkTypeRelatedTo(elemInstanceType, sfcReturnConstraint, assignableRelation, openingLikeElement, Diagnostics.JSX_element_type_0_is_not_a_constructor_function_for_JSX_elements); + // checkTypeRelatedTo(elemInstanceType, sfcReturnConstraint, assignableRelation, openingLikeElement.tagName, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); + checkTypeRelatedTo(elemInstanceType, sfcReturnConstraint, assignableRelation, openingLikeElement.tagName, Diagnostics.Its_return_type_0_is_not_a_valid_JSX_element, ()=> { + return chainDiagnosticMessages(undefined, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); + }); } } else if (refKind === JsxReferenceKind.Component) { @@ -20352,8 +20355,9 @@ namespace ts { } if (isNodeOpeningLikeElement) { - const sig = getResolvedSignature(node as JsxOpeningLikeElement); - checkJsxReturnAssignableToAppropriateBound(getJsxReferenceKind(node as JsxOpeningLikeElement), getReturnTypeOfSignature(sig), node); + const jsxOpeningLikeNode = node as JsxOpeningLikeElement; + const sig = getResolvedSignature(jsxOpeningLikeNode); + checkJsxReturnAssignableToAppropriateBound(getJsxReferenceKind(jsxOpeningLikeNode), getReturnTypeOfSignature(sig), jsxOpeningLikeNode); } } diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json index 4528d504d0d12..c4b5488f4c05e 100644 --- a/src/compiler/diagnosticMessages.json +++ b/src/compiler/diagnosticMessages.json @@ -2693,6 +2693,14 @@ "category": "Error", "code": 2773 }, + "This expression cannot be used as a JSX component.": { + "category": "Error", + "code": 2774 + }, + "Its return type '{0}' is not a valid JSX element.": { + "category": "Error", + "code": 2775 + }, "Import declaration '{0}' is using private name '{1}'.": { "category": "Error", From 093326dc83a8d197d57fabad89f5d552e24c8821 Mon Sep 17 00:00:00 2001 From: uhyo Date: Sun, 4 Aug 2019 23:35:54 +0900 Subject: [PATCH 02/10] Component and Mixed type --- src/compiler/checker.ts | 15 ++++++++------- src/compiler/diagnosticMessages.json | 8 ++++++++ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts index 4ec17d29bc9df..a148ba77d2089 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -20245,17 +20245,14 @@ namespace ts { if (refKind === JsxReferenceKind.Function) { const sfcReturnConstraint = getJsxStatelessElementTypeAt(openingLikeElement); if (sfcReturnConstraint) { - // checkTypeRelatedTo(elemInstanceType, sfcReturnConstraint, assignableRelation, openingLikeElement.tagName, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); - checkTypeRelatedTo(elemInstanceType, sfcReturnConstraint, assignableRelation, openingLikeElement.tagName, Diagnostics.Its_return_type_0_is_not_a_valid_JSX_element, ()=> { - return chainDiagnosticMessages(undefined, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); - }); + checkTypeRelatedTo(elemInstanceType, sfcReturnConstraint, assignableRelation, openingLikeElement.tagName, Diagnostics.Its_return_type_0_is_not_a_valid_JSX_element, generateInitialErrorChain); } } else if (refKind === JsxReferenceKind.Component) { const classConstraint = getJsxElementClassTypeAt(openingLikeElement); if (classConstraint) { - // Issue an error if this return type isn't assignable to JSX.ElementClass or JSX.Element, failing that - checkTypeRelatedTo(elemInstanceType, classConstraint, assignableRelation, openingLikeElement, Diagnostics.JSX_element_type_0_is_not_a_constructor_function_for_JSX_elements); + // Issue an error if this return type isn't assignable to JSX.ElementClass, failing that + checkTypeRelatedTo(elemInstanceType, classConstraint, assignableRelation, openingLikeElement.tagName, Diagnostics.Its_instance_type_0_is_not_a_valid_JSX_element, generateInitialErrorChain); } } else { // Mixed @@ -20265,7 +20262,11 @@ namespace ts { return; } const combined = getUnionType([sfcReturnConstraint, classConstraint]); - checkTypeRelatedTo(elemInstanceType, combined, assignableRelation, openingLikeElement, Diagnostics.JSX_element_type_0_is_not_a_constructor_function_for_JSX_elements); + checkTypeRelatedTo(elemInstanceType, combined, assignableRelation, openingLikeElement.tagName, Diagnostics.Its_element_type_0_is_not_a_valid_JSX_element, generateInitialErrorChain); + } + + function generateInitialErrorChain(): DiagnosticMessageChain { + return chainDiagnosticMessages(undefined, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); } } diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json index c4b5488f4c05e..472f5ac75ca6e 100644 --- a/src/compiler/diagnosticMessages.json +++ b/src/compiler/diagnosticMessages.json @@ -2701,6 +2701,14 @@ "category": "Error", "code": 2775 }, + "Its instance type '{0}' is not a valid JSX element.": { + "category": "Error", + "code": 2776 + }, + "Its element type '{0}' is not a valid JSX element.": { + "category": "Error", + "code": 2777 + }, "Import declaration '{0}' is using private name '{1}'.": { "category": "Error", From 22173197e5fa5b7100b0a46ab58a525a722ef419 Mon Sep 17 00:00:00 2001 From: uhyo Date: Sun, 4 Aug 2019 23:53:21 +0900 Subject: [PATCH 03/10] fix existing tests --- ...sxFactoryDeclarationsLocalTypes.errors.txt | 20 +++++++++++-------- ...ReturnUndefinedStrictNullChecks.errors.txt | 16 +++++++++------ 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt index c4a7c6809bcc5..acfc8648c679a 100644 --- a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt +++ b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt @@ -1,9 +1,11 @@ tests/cases/conformance/jsx/inline/index.tsx(5,1): error TS2741: Property '__predomBrand' is missing in type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' but required in type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. tests/cases/conformance/jsx/inline/index.tsx(21,40): error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. -tests/cases/conformance/jsx/inline/index.tsx(21,40): error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements. - Property '__domBrand' is missing in type 'MyClass' but required in type 'ElementClass'. +tests/cases/conformance/jsx/inline/index.tsx(21,41): error TS2774: This expression cannot be used as a JSX component. + Its instance type 'MyClass' is not a valid JSX element. + Property '__domBrand' is missing in type 'MyClass' but required in type 'ElementClass'. tests/cases/conformance/jsx/inline/index.tsx(21,63): error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. -tests/cases/conformance/jsx/inline/index.tsx(21,63): error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements. +tests/cases/conformance/jsx/inline/index.tsx(21,64): error TS2774: This expression cannot be used as a JSX component. + Its instance type 'MyClass' is not a valid JSX element. tests/cases/conformance/jsx/inline/index.tsx(24,42): error TS2741: Property '__domBrand' is missing in type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element' but required in type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element'. tests/cases/conformance/jsx/inline/index.tsx(24,48): error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element'. @@ -95,14 +97,16 @@ tests/cases/conformance/jsx/inline/index.tsx(24,48): error TS2322: Type 'import( const _brokenTree = ~~~~~~~~~~~~~~~~~~~~~~~ !!! error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. - ~~~~~~~~~~~~~~~~~~~~~~~ -!!! error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements. -!!! error TS2605: Property '__domBrand' is missing in type 'MyClass' but required in type 'ElementClass'. + ~~~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its instance type 'MyClass' is not a valid JSX element. +!!! error TS2774: Property '__domBrand' is missing in type 'MyClass' but required in type 'ElementClass'. !!! related TS2728 tests/cases/conformance/jsx/inline/renderer.d.ts:7:13: '__domBrand' is declared here. ~~~~~~~~~~~~~~~~~~~~~~~ !!! error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. - ~~~~~~~~~~~~~~~~~~~~~~~ -!!! error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements. + ~~~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its instance type 'MyClass' is not a valid JSX element. // Should fail, nondom isn't allowed as children of dom const _brokenTree2 = {tree}{tree} diff --git a/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt index f3452f62ccba9..be27f03511fe3 100644 --- a/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt +++ b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt @@ -1,5 +1,7 @@ -tests/cases/conformance/jsx/file.tsx(9,13): error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. -tests/cases/conformance/jsx/file.tsx(10,11): error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. +tests/cases/conformance/jsx/file.tsx(9,14): error TS2774: This expression cannot be used as a JSX component. + Its return type 'undefined' is not a valid JSX element. +tests/cases/conformance/jsx/file.tsx(10,12): error TS2774: This expression cannot be used as a JSX component. + Its return type 'undefined' is not a valid JSX element. ==== tests/cases/conformance/jsx/file.tsx (2 errors) ==== @@ -12,8 +14,10 @@ tests/cases/conformance/jsx/file.tsx(10,11): error TS2605: JSX element type 'und // Error const foo = ; - ~~~~~~~ -!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. + ~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its return type 'undefined' is not a valid JSX element. const G = ; - ~~~~~~~~~ -!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. \ No newline at end of file + ~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its return type 'undefined' is not a valid JSX element. \ No newline at end of file From 5bf829047afe7fd49864f4b0dac788318e8f82ef Mon Sep 17 00:00:00 2001 From: uhyo Date: Mon, 5 Aug 2019 00:09:49 +0900 Subject: [PATCH 04/10] add new test for JSX component return type error --- .../jsxComponentTypeErrors.errors.txt | 77 ++++++++++++++++ .../reference/jsxComponentTypeErrors.js | 62 +++++++++++++ .../reference/jsxComponentTypeErrors.symbols | 78 ++++++++++++++++ .../reference/jsxComponentTypeErrors.types | 88 +++++++++++++++++++ .../cases/compiler/jsxComponentTypeErrors.tsx | 34 +++++++ 5 files changed, 339 insertions(+) create mode 100644 tests/baselines/reference/jsxComponentTypeErrors.errors.txt create mode 100644 tests/baselines/reference/jsxComponentTypeErrors.js create mode 100644 tests/baselines/reference/jsxComponentTypeErrors.symbols create mode 100644 tests/baselines/reference/jsxComponentTypeErrors.types create mode 100644 tests/cases/compiler/jsxComponentTypeErrors.tsx diff --git a/tests/baselines/reference/jsxComponentTypeErrors.errors.txt b/tests/baselines/reference/jsxComponentTypeErrors.errors.txt new file mode 100644 index 0000000000000..80aa9e6d4ed3f --- /dev/null +++ b/tests/baselines/reference/jsxComponentTypeErrors.errors.txt @@ -0,0 +1,77 @@ +tests/cases/compiler/jsxComponentTypeErrors.tsx(20,16): error TS2774: This expression cannot be used as a JSX component. + Its return type '{ type: string; }' is not a valid JSX element. + Types of property 'type' are incompatible. + Type 'string' is not assignable to type '"element"'. +tests/cases/compiler/jsxComponentTypeErrors.tsx(21,16): error TS2774: This expression 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(22,16): error TS2774: This expression cannot be used as a JSX component. + Its element type 'ClassComponent' is not a valid JSX element. + Type 'ClassComponent' is not assignable to type 'ElementClass'. +tests/cases/compiler/jsxComponentTypeErrors.tsx(31,16): error TS2774: This expression 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(32,16): error TS2774: This expression 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 (5 errors) ==== + namespace JSX { + export interface Element { + type: 'element'; + } + export interface ElementClass { + type: 'element-class'; + } + } + + const FunctionComponent = () => ({ + type: 'string', + }); + + class ClassComponent { + type = 'string'; + } + + const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; + + const elem1 = ; + ~~~~~~~~~~~~~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its return type '{ type: string; }' is not a valid JSX element. +!!! error TS2774: Types of property 'type' are incompatible. +!!! error TS2774: Type 'string' is not assignable to type '"element"'. + const elem2 = ; + ~~~~~~~~~~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its instance type 'ClassComponent' is not a valid JSX element. +!!! error TS2774: Types of property 'type' are incompatible. +!!! error TS2774: Type 'string' is not assignable to type '"element-class"'. + const elem3 = ; + ~~~~~~~~~~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its element type 'ClassComponent' is not a valid JSX element. +!!! error TS2774: Type 'ClassComponent' is not assignable to type 'ElementClass'. + + const obj = { + MemberFunctionComponent() { + return {}; + }, + MemberClassComponent: class {}, + }; + + const elem4 = ; + ~~~~~~~~~~~~~~~~~~~~~~~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its return type '{}' is not a valid JSX element. +!!! error TS2774: 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 elem5 = ; + ~~~~~~~~~~~~~~~~~~~~~~~~ +!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: Its instance type 'MemberClassComponent' is not a valid JSX element. +!!! error TS2774: 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. + \ No newline at end of file diff --git a/tests/baselines/reference/jsxComponentTypeErrors.js b/tests/baselines/reference/jsxComponentTypeErrors.js new file mode 100644 index 0000000000000..6faaed60cf61a --- /dev/null +++ b/tests/baselines/reference/jsxComponentTypeErrors.js @@ -0,0 +1,62 @@ +//// [jsxComponentTypeErrors.tsx] +namespace JSX { + export interface Element { + type: 'element'; + } + export interface ElementClass { + type: 'element-class'; + } +} + +const FunctionComponent = () => ({ + type: 'string', +}); + +class ClassComponent { + type = 'string'; +} + +const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; + +const elem1 = ; +const elem2 = ; +const elem3 = ; + +const obj = { + MemberFunctionComponent() { + return {}; + }, + MemberClassComponent: class {}, +}; + +const elem4 = ; +const elem5 = ; + + +//// [jsxComponentTypeErrors.jsx] +"use strict"; +var FunctionComponent = function () { return ({ + type: 'string' +}); }; +var ClassComponent = /** @class */ (function () { + function ClassComponent() { + this.type = 'string'; + } + return ClassComponent; +}()); +var MixedComponent = Math.random() ? FunctionComponent : ClassComponent; +var elem1 = ; +var elem2 = ; +var elem3 = ; +var obj = { + MemberFunctionComponent: function () { + return {}; + }, + MemberClassComponent: /** @class */ (function () { + function MemberClassComponent() { + } + return MemberClassComponent; + }()) +}; +var elem4 = ; +var elem5 = ; diff --git a/tests/baselines/reference/jsxComponentTypeErrors.symbols b/tests/baselines/reference/jsxComponentTypeErrors.symbols new file mode 100644 index 0000000000000..846284dc85dac --- /dev/null +++ b/tests/baselines/reference/jsxComponentTypeErrors.symbols @@ -0,0 +1,78 @@ +=== tests/cases/compiler/jsxComponentTypeErrors.tsx === +namespace JSX { +>JSX : Symbol(JSX, Decl(jsxComponentTypeErrors.tsx, 0, 0)) + + export interface Element { +>Element : Symbol(Element, Decl(jsxComponentTypeErrors.tsx, 0, 15)) + + type: 'element'; +>type : Symbol(Element.type, Decl(jsxComponentTypeErrors.tsx, 1, 28)) + } + export interface ElementClass { +>ElementClass : Symbol(ElementClass, Decl(jsxComponentTypeErrors.tsx, 3, 3)) + + type: 'element-class'; +>type : Symbol(ElementClass.type, Decl(jsxComponentTypeErrors.tsx, 4, 33)) + } +} + +const FunctionComponent = () => ({ +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5)) + + type: 'string', +>type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 9, 34)) + +}); + +class ClassComponent { +>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3)) + + type = 'string'; +>type : Symbol(ClassComponent.type, Decl(jsxComponentTypeErrors.tsx, 13, 22)) +} + +const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; +>MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 17, 5)) +>Math.random : Symbol(Math.random, Decl(lib.es5.d.ts, --, --)) +>Math : Symbol(Math, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --)) +>random : Symbol(Math.random, Decl(lib.es5.d.ts, --, --)) +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5)) +>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3)) + +const elem1 = ; +>elem1 : Symbol(elem1, Decl(jsxComponentTypeErrors.tsx, 19, 5)) +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5)) + +const elem2 = ; +>elem2 : Symbol(elem2, Decl(jsxComponentTypeErrors.tsx, 20, 5)) +>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3)) + +const elem3 = ; +>elem3 : Symbol(elem3, Decl(jsxComponentTypeErrors.tsx, 21, 5)) +>MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 17, 5)) + +const obj = { +>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5)) + + MemberFunctionComponent() { +>MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13)) + + return {}; + }, + MemberClassComponent: class {}, +>MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4)) + +}; + +const elem4 = ; +>elem4 : Symbol(elem4, Decl(jsxComponentTypeErrors.tsx, 30, 5)) +>obj.MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13)) +>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5)) +>MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13)) + +const elem5 = ; +>elem5 : Symbol(elem5, Decl(jsxComponentTypeErrors.tsx, 31, 5)) +>obj.MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4)) +>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5)) +>MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4)) + diff --git a/tests/baselines/reference/jsxComponentTypeErrors.types b/tests/baselines/reference/jsxComponentTypeErrors.types new file mode 100644 index 0000000000000..e7c70f3b1fec1 --- /dev/null +++ b/tests/baselines/reference/jsxComponentTypeErrors.types @@ -0,0 +1,88 @@ +=== tests/cases/compiler/jsxComponentTypeErrors.tsx === +namespace JSX { + export interface Element { + type: 'element'; +>type : "element" + } + export interface ElementClass { + type: 'element-class'; +>type : "element-class" + } +} + +const FunctionComponent = () => ({ +>FunctionComponent : () => { type: string; } +>() => ({ type: 'string',}) : () => { type: string; } +>({ type: 'string',}) : { type: string; } +>{ type: 'string',} : { type: string; } + + type: 'string', +>type : string +>'string' : "string" + +}); + +class ClassComponent { +>ClassComponent : ClassComponent + + type = 'string'; +>type : string +>'string' : "string" +} + +const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; +>MixedComponent : (() => { type: string; }) | typeof ClassComponent +>Math.random() ? FunctionComponent : ClassComponent : (() => { type: string; }) | typeof ClassComponent +>Math.random() : number +>Math.random : () => number +>Math : Math +>random : () => number +>FunctionComponent : () => { type: string; } +>ClassComponent : typeof ClassComponent + +const elem1 = ; +>elem1 : JSX.Element +> : JSX.Element +>FunctionComponent : () => { type: string; } + +const elem2 = ; +>elem2 : JSX.Element +> : JSX.Element +>ClassComponent : typeof ClassComponent + +const elem3 = ; +>elem3 : JSX.Element +> : JSX.Element +>MixedComponent : (() => { type: string; }) | typeof ClassComponent + +const obj = { +>obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; } +>{ MemberFunctionComponent() { return {}; }, MemberClassComponent: class {},} : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; } + + MemberFunctionComponent() { +>MemberFunctionComponent : () => {} + + return {}; +>{} : {} + + }, + MemberClassComponent: class {}, +>MemberClassComponent : typeof MemberClassComponent +>class {} : typeof MemberClassComponent + +}; + +const elem4 = ; +>elem4 : JSX.Element +> : JSX.Element +>obj.MemberFunctionComponent : () => {} +>obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; } +>MemberFunctionComponent : () => {} + +const elem5 = ; +>elem5 : JSX.Element +> : JSX.Element +>obj.MemberClassComponent : typeof MemberClassComponent +>obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; } +>MemberClassComponent : typeof MemberClassComponent + diff --git a/tests/cases/compiler/jsxComponentTypeErrors.tsx b/tests/cases/compiler/jsxComponentTypeErrors.tsx new file mode 100644 index 0000000000000..88a381bdbd498 --- /dev/null +++ b/tests/cases/compiler/jsxComponentTypeErrors.tsx @@ -0,0 +1,34 @@ +// @strict: true +// @jsx: preserve +namespace JSX { + export interface Element { + type: 'element'; + } + export interface ElementClass { + type: 'element-class'; + } +} + +const FunctionComponent = () => ({ + type: 'string', +}); + +class ClassComponent { + type = 'string'; +} + +const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; + +const elem1 = ; +const elem2 = ; +const elem3 = ; + +const obj = { + MemberFunctionComponent() { + return {}; + }, + MemberClassComponent: class {}, +}; + +const elem4 = ; +const elem5 = ; From 64b5bedb0440a032d40b9a8ad0add584e17f019a Mon Sep 17 00:00:00 2001 From: uhyo Date: Mon, 5 Aug 2019 01:22:57 +0900 Subject: [PATCH 05/10] fix tslint error --- src/compiler/checker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts index a148ba77d2089..9473a909692d3 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -20266,7 +20266,7 @@ namespace ts { } function generateInitialErrorChain(): DiagnosticMessageChain { - return chainDiagnosticMessages(undefined, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); + return chainDiagnosticMessages(/* details */ undefined, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); } } From f28cbdecd651c98c050cfdb0b362c4f32a3608d7 Mon Sep 17 00:00:00 2001 From: uhyo Date: Fri, 16 Aug 2019 11:30:47 +0900 Subject: [PATCH 06/10] update diagnostic message to include component name --- src/compiler/checker.ts | 3 ++- src/compiler/diagnosticMessages.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts index 9473a909692d3..7ffa325e73f9d 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -20266,7 +20266,8 @@ namespace ts { } function generateInitialErrorChain(): DiagnosticMessageChain { - return chainDiagnosticMessages(/* details */ undefined, Diagnostics.This_expression_cannot_be_used_as_a_JSX_component); + const componentName = getTextOfNode(openingLikeElement.tagName) + return chainDiagnosticMessages(/* details */ undefined, Diagnostics._0_cannot_be_used_as_a_JSX_component, componentName); } } diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json index 472f5ac75ca6e..00a95c953ca67 100644 --- a/src/compiler/diagnosticMessages.json +++ b/src/compiler/diagnosticMessages.json @@ -2693,7 +2693,7 @@ "category": "Error", "code": 2773 }, - "This expression cannot be used as a JSX component.": { + "'{0}' cannot be used as a JSX component.": { "category": "Error", "code": 2774 }, From 87f3f3d87e2f53c096f547820e562fc1c3a6dfe1 Mon Sep 17 00:00:00 2001 From: uhyo Date: Fri, 16 Aug 2019 11:37:08 +0900 Subject: [PATCH 07/10] accept baseline --- ...sxFactoryDeclarationsLocalTypes.errors.txt | 8 ++++---- .../jsxComponentTypeErrors.errors.txt | 20 +++++++++---------- ...ReturnUndefinedStrictNullChecks.errors.txt | 8 ++++---- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt index acfc8648c679a..5f925d709806d 100644 --- a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt +++ b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt @@ -1,10 +1,10 @@ tests/cases/conformance/jsx/inline/index.tsx(5,1): error TS2741: Property '__predomBrand' is missing in type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' but required in type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. tests/cases/conformance/jsx/inline/index.tsx(21,40): error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. -tests/cases/conformance/jsx/inline/index.tsx(21,41): error TS2774: This expression cannot be used as a JSX component. +tests/cases/conformance/jsx/inline/index.tsx(21,41): error TS2774: 'MyClass' cannot be used as a JSX component. Its instance type 'MyClass' is not a valid JSX element. Property '__domBrand' is missing in type 'MyClass' but required in type 'ElementClass'. tests/cases/conformance/jsx/inline/index.tsx(21,63): error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. -tests/cases/conformance/jsx/inline/index.tsx(21,64): error TS2774: This expression cannot be used as a JSX component. +tests/cases/conformance/jsx/inline/index.tsx(21,64): error TS2774: 'MyClass' cannot be used as a JSX component. Its instance type 'MyClass' is not a valid JSX element. tests/cases/conformance/jsx/inline/index.tsx(24,42): error TS2741: Property '__domBrand' is missing in type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element' but required in type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element'. tests/cases/conformance/jsx/inline/index.tsx(24,48): error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element'. @@ -98,14 +98,14 @@ tests/cases/conformance/jsx/inline/index.tsx(24,48): error TS2322: Type 'import( ~~~~~~~~~~~~~~~~~~~~~~~ !!! error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. ~~~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'MyClass' cannot be used as a JSX component. !!! error TS2774: Its instance type 'MyClass' is not a valid JSX element. !!! error TS2774: Property '__domBrand' is missing in type 'MyClass' but required in type 'ElementClass'. !!! related TS2728 tests/cases/conformance/jsx/inline/renderer.d.ts:7:13: '__domBrand' is declared here. ~~~~~~~~~~~~~~~~~~~~~~~ !!! error TS2322: Type 'import("tests/cases/conformance/jsx/inline/renderer").dom.JSX.Element' is not assignable to type 'import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element'. ~~~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'MyClass' cannot be used as a JSX component. !!! error TS2774: Its instance type 'MyClass' is not a valid JSX element. // Should fail, nondom isn't allowed as children of dom diff --git a/tests/baselines/reference/jsxComponentTypeErrors.errors.txt b/tests/baselines/reference/jsxComponentTypeErrors.errors.txt index 80aa9e6d4ed3f..93873b5ee9c06 100644 --- a/tests/baselines/reference/jsxComponentTypeErrors.errors.txt +++ b/tests/baselines/reference/jsxComponentTypeErrors.errors.txt @@ -1,18 +1,18 @@ -tests/cases/compiler/jsxComponentTypeErrors.tsx(20,16): error TS2774: This expression cannot be used as a JSX component. +tests/cases/compiler/jsxComponentTypeErrors.tsx(20,16): error TS2774: 'FunctionComponent' cannot be used as a JSX component. Its return type '{ type: string; }' is not a valid JSX element. Types of property 'type' are incompatible. Type 'string' is not assignable to type '"element"'. -tests/cases/compiler/jsxComponentTypeErrors.tsx(21,16): error TS2774: This expression cannot be used as a JSX component. +tests/cases/compiler/jsxComponentTypeErrors.tsx(21,16): error TS2774: '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(22,16): error TS2774: This expression cannot be used as a JSX component. +tests/cases/compiler/jsxComponentTypeErrors.tsx(22,16): error TS2774: 'MixedComponent' cannot be used as a JSX component. Its element type 'ClassComponent' is not a valid JSX element. Type 'ClassComponent' is not assignable to type 'ElementClass'. -tests/cases/compiler/jsxComponentTypeErrors.tsx(31,16): error TS2774: This expression cannot be used as a JSX component. +tests/cases/compiler/jsxComponentTypeErrors.tsx(31,16): error TS2774: '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(32,16): error TS2774: This expression cannot be used as a JSX component. +tests/cases/compiler/jsxComponentTypeErrors.tsx(32,16): error TS2774: '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'. @@ -39,19 +39,19 @@ tests/cases/compiler/jsxComponentTypeErrors.tsx(32,16): error TS2774: This expre const elem1 = ; ~~~~~~~~~~~~~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'FunctionComponent' cannot be used as a JSX component. !!! error TS2774: Its return type '{ type: string; }' is not a valid JSX element. !!! error TS2774: Types of property 'type' are incompatible. !!! error TS2774: Type 'string' is not assignable to type '"element"'. const elem2 = ; ~~~~~~~~~~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'ClassComponent' cannot be used as a JSX component. !!! error TS2774: Its instance type 'ClassComponent' is not a valid JSX element. !!! error TS2774: Types of property 'type' are incompatible. !!! error TS2774: Type 'string' is not assignable to type '"element-class"'. const elem3 = ; ~~~~~~~~~~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'MixedComponent' cannot be used as a JSX component. !!! error TS2774: Its element type 'ClassComponent' is not a valid JSX element. !!! error TS2774: Type 'ClassComponent' is not assignable to type 'ElementClass'. @@ -64,13 +64,13 @@ tests/cases/compiler/jsxComponentTypeErrors.tsx(32,16): error TS2774: This expre const elem4 = ; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'obj.MemberFunctionComponent' cannot be used as a JSX component. !!! error TS2774: Its return type '{}' is not a valid JSX element. !!! error TS2774: 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 elem5 = ; ~~~~~~~~~~~~~~~~~~~~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'obj.MemberClassComponent' cannot be used as a JSX component. !!! error TS2774: Its instance type 'MemberClassComponent' is not a valid JSX element. !!! error TS2774: 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. diff --git a/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt index be27f03511fe3..bb45dcb7cd0bf 100644 --- a/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt +++ b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt @@ -1,6 +1,6 @@ -tests/cases/conformance/jsx/file.tsx(9,14): error TS2774: This expression cannot be used as a JSX component. +tests/cases/conformance/jsx/file.tsx(9,14): error TS2774: 'Foo' cannot be used as a JSX component. Its return type 'undefined' is not a valid JSX element. -tests/cases/conformance/jsx/file.tsx(10,12): error TS2774: This expression cannot be used as a JSX component. +tests/cases/conformance/jsx/file.tsx(10,12): error TS2774: 'Greet' cannot be used as a JSX component. Its return type 'undefined' is not a valid JSX element. @@ -15,9 +15,9 @@ tests/cases/conformance/jsx/file.tsx(10,12): error TS2774: This expression canno // Error const foo = ; ~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'Foo' cannot be used as a JSX component. !!! error TS2774: Its return type 'undefined' is not a valid JSX element. const G = ; ~~~~~ -!!! error TS2774: This expression cannot be used as a JSX component. +!!! error TS2774: 'Greet' cannot be used as a JSX component. !!! error TS2774: Its return type 'undefined' is not a valid JSX element. \ No newline at end of file From 90f7f1047a8ea220735df5e36bb581021db22c4c Mon Sep 17 00:00:00 2001 From: uhyo Date: Fri, 16 Aug 2019 12:01:35 +0900 Subject: [PATCH 08/10] update tests --- .../jsxComponentTypeErrors.errors.txt | 74 ++++++++++----- .../reference/jsxComponentTypeErrors.js | 45 ++++++---- .../reference/jsxComponentTypeErrors.symbols | 89 +++++++++++-------- .../reference/jsxComponentTypeErrors.types | 69 ++++++++------ .../cases/compiler/jsxComponentTypeErrors.tsx | 22 +++-- 5 files changed, 191 insertions(+), 108 deletions(-) diff --git a/tests/baselines/reference/jsxComponentTypeErrors.errors.txt b/tests/baselines/reference/jsxComponentTypeErrors.errors.txt index 93873b5ee9c06..5e486a34e68ab 100644 --- a/tests/baselines/reference/jsxComponentTypeErrors.errors.txt +++ b/tests/baselines/reference/jsxComponentTypeErrors.errors.txt @@ -1,23 +1,32 @@ -tests/cases/compiler/jsxComponentTypeErrors.tsx(20,16): error TS2774: 'FunctionComponent' cannot be used as a JSX component. - Its return type '{ type: string; }' is not a valid JSX element. +tests/cases/compiler/jsxComponentTypeErrors.tsx(16,11): error TS2774: '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 'string' is not assignable to type '"element"'. -tests/cases/compiler/jsxComponentTypeErrors.tsx(21,16): error TS2774: 'ClassComponent' cannot be used as a JSX component. + 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 TS2774: '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 TS2774: '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 TS2774: '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(22,16): error TS2774: 'MixedComponent' cannot be used as a JSX component. - Its element type 'ClassComponent' is not a valid JSX element. - Type 'ClassComponent' is not assignable to type 'ElementClass'. -tests/cases/compiler/jsxComponentTypeErrors.tsx(31,16): error TS2774: 'obj.MemberFunctionComponent' cannot be used as a JSX component. +tests/cases/compiler/jsxComponentTypeErrors.tsx(28,16): error TS2774: '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 TS2774: '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(32,16): error TS2774: 'obj.MemberClassComponent' cannot be used as a JSX component. +tests/cases/compiler/jsxComponentTypeErrors.tsx(38,16): error TS2774: '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 (5 errors) ==== +==== tests/cases/compiler/jsxComponentTypeErrors.tsx (7 errors) ==== namespace JSX { export interface Element { type: 'element'; @@ -27,9 +36,20 @@ tests/cases/compiler/jsxComponentTypeErrors.tsx(32,16): error TS2774: 'obj.Membe } } - const FunctionComponent = () => ({ - type: 'string', - }); + function FunctionComponent({type}: {type?: T}) { + return { + type + } + } + FunctionComponent.useThis = function() { + return ; + ~~~~ +!!! error TS2774: 'this' cannot be used as a JSX component. +!!! error TS2774: Its return type '{ type: "foo" | undefined; }' is not a valid JSX element. +!!! error TS2774: Types of property 'type' are incompatible. +!!! error TS2774: Type '"foo" | undefined' is not assignable to type '"element"'. +!!! error TS2774: Type 'undefined' is not assignable to type '"element"'. + } class ClassComponent { type = 'string'; @@ -37,23 +57,29 @@ tests/cases/compiler/jsxComponentTypeErrors.tsx(32,16): error TS2774: 'obj.Membe const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; - const elem1 = ; + const elem1 = ; ~~~~~~~~~~~~~~~~~ !!! error TS2774: 'FunctionComponent' cannot be used as a JSX component. -!!! error TS2774: Its return type '{ type: string; }' is not a valid JSX element. +!!! error TS2774: Its return type '{ type: "abc" | undefined; }' is not a valid JSX element. !!! error TS2774: Types of property 'type' are incompatible. -!!! error TS2774: Type 'string' is not assignable to type '"element"'. - const elem2 = ; +!!! error TS2774: Type '"abc" | undefined' is not assignable to type '"element"'. +!!! error TS2774: Type 'undefined' is not assignable to type '"element"'. + const elem2 = />; + ~~~~~~~~~~~~~~~~~ +!!! error TS2774: 'FunctionComponent' cannot be used as a JSX component. +!!! error TS2774: Its return type '{ type: "abc" | undefined; }' is not a valid JSX element. + const elem3 = ; ~~~~~~~~~~~~~~ !!! error TS2774: 'ClassComponent' cannot be used as a JSX component. !!! error TS2774: Its instance type 'ClassComponent' is not a valid JSX element. !!! error TS2774: Types of property 'type' are incompatible. !!! error TS2774: Type 'string' is not assignable to type '"element-class"'. - const elem3 = ; + const elem4 = ; ~~~~~~~~~~~~~~ !!! error TS2774: 'MixedComponent' cannot be used as a JSX component. -!!! error TS2774: Its element type 'ClassComponent' is not a valid JSX element. -!!! error TS2774: Type 'ClassComponent' is not assignable to type 'ElementClass'. +!!! error TS2774: Its element type 'ClassComponent | { type: string | undefined; }' is not a valid JSX element. +!!! error TS2774: Type 'ClassComponent' is not assignable to type 'Element | ElementClass | null'. +!!! error TS2774: Type 'ClassComponent' is not assignable to type 'ElementClass'. const obj = { MemberFunctionComponent() { @@ -62,15 +88,15 @@ tests/cases/compiler/jsxComponentTypeErrors.tsx(32,16): error TS2774: 'obj.Membe MemberClassComponent: class {}, }; - const elem4 = ; + const elem5 = ; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ !!! error TS2774: 'obj.MemberFunctionComponent' cannot be used as a JSX component. !!! error TS2774: Its return type '{}' is not a valid JSX element. !!! error TS2774: 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 elem5 = ; - ~~~~~~~~~~~~~~~~~~~~~~~~ -!!! error TS2774: 'obj.MemberClassComponent' cannot be used as a JSX component. + const elem6 = ; + ~~~~~~~~~~~~~~~~~~~~~~~~~ +!!! error TS2774: 'obj. MemberClassComponent' cannot be used as a JSX component. !!! error TS2774: Its instance type 'MemberClassComponent' is not a valid JSX element. !!! error TS2774: 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. diff --git a/tests/baselines/reference/jsxComponentTypeErrors.js b/tests/baselines/reference/jsxComponentTypeErrors.js index 6faaed60cf61a..9787531cf0808 100644 --- a/tests/baselines/reference/jsxComponentTypeErrors.js +++ b/tests/baselines/reference/jsxComponentTypeErrors.js @@ -8,9 +8,14 @@ namespace JSX { } } -const FunctionComponent = () => ({ - type: 'string', -}); +function FunctionComponent({type}: {type?: T}) { + return { + type + } +} +FunctionComponent.useThis = function() { + return ; +} class ClassComponent { type = 'string'; @@ -18,9 +23,10 @@ class ClassComponent { const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; -const elem1 = ; -const elem2 = ; -const elem3 = ; +const elem1 = ; +const elem2 = />; +const elem3 = ; +const elem4 = ; const obj = { MemberFunctionComponent() { @@ -29,15 +35,21 @@ const obj = { MemberClassComponent: class {}, }; -const elem4 = ; -const elem5 = ; +const elem5 = ; +const elem6 = ; //// [jsxComponentTypeErrors.jsx] "use strict"; -var FunctionComponent = function () { return ({ - type: 'string' -}); }; +function FunctionComponent(_a) { + var type = _a.type; + return { + type: type + }; +} +FunctionComponent.useThis = function () { + return ; +}; var ClassComponent = /** @class */ (function () { function ClassComponent() { this.type = 'string'; @@ -45,9 +57,10 @@ var ClassComponent = /** @class */ (function () { return ClassComponent; }()); var MixedComponent = Math.random() ? FunctionComponent : ClassComponent; -var elem1 = ; -var elem2 = ; -var elem3 = ; +var elem1 = ; +var elem2 = ; +var elem3 = ; +var elem4 = ; var obj = { MemberFunctionComponent: function () { return {}; @@ -58,5 +71,5 @@ var obj = { return MemberClassComponent; }()) }; -var elem4 = ; -var elem5 = ; +var elem5 = ; +var elem6 = ; diff --git a/tests/baselines/reference/jsxComponentTypeErrors.symbols b/tests/baselines/reference/jsxComponentTypeErrors.symbols index 846284dc85dac..f728d5a5f0404 100644 --- a/tests/baselines/reference/jsxComponentTypeErrors.symbols +++ b/tests/baselines/reference/jsxComponentTypeErrors.symbols @@ -16,63 +16,82 @@ namespace JSX { } } -const FunctionComponent = () => ({ ->FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5)) - - type: 'string', ->type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 9, 34)) - -}); +function FunctionComponent({type}: {type?: T}) { +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 7, 1), Decl(jsxComponentTypeErrors.tsx, 13, 1)) +>T : Symbol(T, Decl(jsxComponentTypeErrors.tsx, 9, 27)) +>type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 9, 46)) +>type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 9, 54)) +>T : Symbol(T, Decl(jsxComponentTypeErrors.tsx, 9, 27)) + + return { + type +>type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 10, 10)) + } +} +FunctionComponent.useThis = function() { +>FunctionComponent.useThis : Symbol(FunctionComponent.useThis, Decl(jsxComponentTypeErrors.tsx, 13, 1)) +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 7, 1), Decl(jsxComponentTypeErrors.tsx, 13, 1)) +>useThis : Symbol(FunctionComponent.useThis, Decl(jsxComponentTypeErrors.tsx, 13, 1)) + + return ; +>this : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 7, 1), Decl(jsxComponentTypeErrors.tsx, 13, 1)) +>type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 15, 14)) +} class ClassComponent { ->ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3)) +>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 16, 1)) type = 'string'; ->type : Symbol(ClassComponent.type, Decl(jsxComponentTypeErrors.tsx, 13, 22)) +>type : Symbol(ClassComponent.type, Decl(jsxComponentTypeErrors.tsx, 18, 22)) } const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; ->MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 17, 5)) +>MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 22, 5)) >Math.random : Symbol(Math.random, Decl(lib.es5.d.ts, --, --)) >Math : Symbol(Math, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --)) >random : Symbol(Math.random, Decl(lib.es5.d.ts, --, --)) ->FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5)) ->ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3)) +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 7, 1), Decl(jsxComponentTypeErrors.tsx, 13, 1)) +>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 16, 1)) + +const elem1 = ; +>elem1 : Symbol(elem1, Decl(jsxComponentTypeErrors.tsx, 24, 5)) +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 7, 1), Decl(jsxComponentTypeErrors.tsx, 13, 1)) +>type : Symbol(type, Decl(jsxComponentTypeErrors.tsx, 24, 32)) -const elem1 = ; ->elem1 : Symbol(elem1, Decl(jsxComponentTypeErrors.tsx, 19, 5)) ->FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 9, 5)) +const elem2 = />; +>elem2 : Symbol(elem2, Decl(jsxComponentTypeErrors.tsx, 25, 5)) +>FunctionComponent : Symbol(FunctionComponent, Decl(jsxComponentTypeErrors.tsx, 7, 1), Decl(jsxComponentTypeErrors.tsx, 13, 1)) -const elem2 = ; ->elem2 : Symbol(elem2, Decl(jsxComponentTypeErrors.tsx, 20, 5)) ->ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 11, 3)) +const elem3 = ; +>elem3 : Symbol(elem3, Decl(jsxComponentTypeErrors.tsx, 26, 5)) +>ClassComponent : Symbol(ClassComponent, Decl(jsxComponentTypeErrors.tsx, 16, 1)) -const elem3 = ; ->elem3 : Symbol(elem3, Decl(jsxComponentTypeErrors.tsx, 21, 5)) ->MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 17, 5)) +const elem4 = ; +>elem4 : Symbol(elem4, Decl(jsxComponentTypeErrors.tsx, 27, 5)) +>MixedComponent : Symbol(MixedComponent, Decl(jsxComponentTypeErrors.tsx, 22, 5)) const obj = { ->obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5)) +>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 29, 5)) MemberFunctionComponent() { ->MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13)) +>MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 29, 13)) return {}; }, MemberClassComponent: class {}, ->MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4)) +>MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 32, 4)) }; -const elem4 = ; ->elem4 : Symbol(elem4, Decl(jsxComponentTypeErrors.tsx, 30, 5)) ->obj.MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13)) ->obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5)) ->MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 23, 13)) - -const elem5 = ; ->elem5 : Symbol(elem5, Decl(jsxComponentTypeErrors.tsx, 31, 5)) ->obj.MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4)) ->obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 23, 5)) ->MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 26, 4)) +const elem5 = ; +>elem5 : Symbol(elem5, Decl(jsxComponentTypeErrors.tsx, 36, 5)) +>obj.MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 29, 13)) +>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 29, 5)) +>MemberFunctionComponent : Symbol(MemberFunctionComponent, Decl(jsxComponentTypeErrors.tsx, 29, 13)) + +const elem6 = ; +>elem6 : Symbol(elem6, Decl(jsxComponentTypeErrors.tsx, 37, 5)) +>obj. MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 32, 4)) +>obj : Symbol(obj, Decl(jsxComponentTypeErrors.tsx, 29, 5)) +>MemberClassComponent : Symbol(MemberClassComponent, Decl(jsxComponentTypeErrors.tsx, 32, 4)) diff --git a/tests/baselines/reference/jsxComponentTypeErrors.types b/tests/baselines/reference/jsxComponentTypeErrors.types index e7c70f3b1fec1..39b1c661eb228 100644 --- a/tests/baselines/reference/jsxComponentTypeErrors.types +++ b/tests/baselines/reference/jsxComponentTypeErrors.types @@ -10,17 +10,30 @@ namespace JSX { } } -const FunctionComponent = () => ({ ->FunctionComponent : () => { type: string; } ->() => ({ type: 'string',}) : () => { type: string; } ->({ type: 'string',}) : { type: string; } ->{ type: 'string',} : { type: string; } +function FunctionComponent({type}: {type?: T}) { +>FunctionComponent : typeof FunctionComponent +>type : T | undefined +>type : T | undefined - type: 'string', ->type : string ->'string' : "string" + return { +>{ type } : { type: T | undefined; } -}); + type +>type : T | undefined + } +} +FunctionComponent.useThis = function() { +>FunctionComponent.useThis = function() { return ;} : () => JSX.Element +>FunctionComponent.useThis : () => JSX.Element +>FunctionComponent : typeof FunctionComponent +>useThis : () => JSX.Element +>function() { return ;} : () => JSX.Element + + return ; +> : JSX.Element +>this : typeof FunctionComponent +>type : "foo" +} class ClassComponent { >ClassComponent : ClassComponent @@ -31,29 +44,35 @@ class ClassComponent { } const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; ->MixedComponent : (() => { type: string; }) | typeof ClassComponent ->Math.random() ? FunctionComponent : ClassComponent : (() => { type: string; }) | typeof ClassComponent +>MixedComponent : typeof FunctionComponent | typeof ClassComponent +>Math.random() ? FunctionComponent : ClassComponent : typeof FunctionComponent | typeof ClassComponent >Math.random() : number >Math.random : () => number >Math : Math >random : () => number ->FunctionComponent : () => { type: string; } +>FunctionComponent : typeof FunctionComponent >ClassComponent : typeof ClassComponent -const elem1 = ; +const elem1 = ; >elem1 : JSX.Element -> : JSX.Element ->FunctionComponent : () => { type: string; } +> : JSX.Element +>FunctionComponent : typeof FunctionComponent +>type : "abc" -const elem2 = ; +const elem2 = />; >elem2 : JSX.Element +> /> : JSX.Element +>FunctionComponent : typeof FunctionComponent + +const elem3 = ; +>elem3 : JSX.Element > : JSX.Element >ClassComponent : typeof ClassComponent -const elem3 = ; ->elem3 : JSX.Element +const elem4 = ; +>elem4 : JSX.Element > : JSX.Element ->MixedComponent : (() => { type: string; }) | typeof ClassComponent +>MixedComponent : typeof FunctionComponent | typeof ClassComponent const obj = { >obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; } @@ -72,17 +91,17 @@ const obj = { }; -const elem4 = ; ->elem4 : JSX.Element +const elem5 = ; +>elem5 : JSX.Element > : JSX.Element >obj.MemberFunctionComponent : () => {} >obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; } >MemberFunctionComponent : () => {} -const elem5 = ; ->elem5 : JSX.Element -> : JSX.Element ->obj.MemberClassComponent : typeof MemberClassComponent +const elem6 = ; +>elem6 : JSX.Element +> : JSX.Element +>obj. MemberClassComponent : typeof MemberClassComponent >obj : { MemberFunctionComponent(): {}; MemberClassComponent: typeof MemberClassComponent; } >MemberClassComponent : typeof MemberClassComponent diff --git a/tests/cases/compiler/jsxComponentTypeErrors.tsx b/tests/cases/compiler/jsxComponentTypeErrors.tsx index 88a381bdbd498..b04196ae020b9 100644 --- a/tests/cases/compiler/jsxComponentTypeErrors.tsx +++ b/tests/cases/compiler/jsxComponentTypeErrors.tsx @@ -9,9 +9,14 @@ namespace JSX { } } -const FunctionComponent = () => ({ - type: 'string', -}); +function FunctionComponent({type}: {type?: T}) { + return { + type + } +} +FunctionComponent.useThis = function() { + return ; +} class ClassComponent { type = 'string'; @@ -19,9 +24,10 @@ class ClassComponent { const MixedComponent = Math.random() ? FunctionComponent : ClassComponent; -const elem1 = ; -const elem2 = ; -const elem3 = ; +const elem1 = ; +const elem2 = />; +const elem3 = ; +const elem4 = ; const obj = { MemberFunctionComponent() { @@ -30,5 +36,5 @@ const obj = { MemberClassComponent: class {}, }; -const elem4 = ; -const elem5 = ; +const elem5 = ; +const elem6 = ; From a521e215b89362528d91793069b0d9d99ba7f2d3 Mon Sep 17 00:00:00 2001 From: uhyo Date: Fri, 16 Aug 2019 12:02:47 +0900 Subject: [PATCH 09/10] missing semicolon --- src/compiler/checker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts index 7ffa325e73f9d..bae63fd872db8 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -20266,7 +20266,7 @@ namespace ts { } function generateInitialErrorChain(): DiagnosticMessageChain { - const componentName = getTextOfNode(openingLikeElement.tagName) + const componentName = getTextOfNode(openingLikeElement.tagName); return chainDiagnosticMessages(/* details */ undefined, Diagnostics._0_cannot_be_used_as_a_JSX_component, componentName); } } From a1afe119b67c588a1b21c1b52dd844b7a5f4dacd Mon Sep 17 00:00:00 2001 From: uhyo Date: Wed, 19 Feb 2020 00:35:56 +0900 Subject: [PATCH 10/10] accept baseline --- .../tsxElementResolution10.errors.txt | 14 ++++++---- .../tsxElementResolution9.errors.txt | 28 +++++++++++-------- ...entPartialDefinitionStillErrors.errors.txt | 8 ++++-- 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/tests/baselines/reference/tsxElementResolution10.errors.txt b/tests/baselines/reference/tsxElementResolution10.errors.txt index 3a2802c2ac053..f0268e2886647 100644 --- a/tests/baselines/reference/tsxElementResolution10.errors.txt +++ b/tests/baselines/reference/tsxElementResolution10.errors.txt @@ -1,6 +1,7 @@ -tests/cases/conformance/jsx/file.tsx(13,1): error TS2605: JSX element type '{ x: number; }' is not a constructor function for JSX elements. - Property 'render' is missing in type '{ x: number; }' but required in type 'ElementClass'. tests/cases/conformance/jsx/file.tsx(13,2): error TS2322: Type '{ x: number; }' is not assignable to type 'string'. +tests/cases/conformance/jsx/file.tsx(13,2): error TS2784: 'Obj1' cannot be used as a JSX component. + Its instance type '{ x: number; }' is not a valid JSX element. + Property 'render' is missing in type '{ x: number; }' but required in type 'ElementClass'. tests/cases/conformance/jsx/file.tsx(19,2): error TS2322: Type '{ x: number; render: number; }' is not assignable to type 'string'. @@ -18,12 +19,13 @@ tests/cases/conformance/jsx/file.tsx(19,2): error TS2322: Type '{ x: number; ren } var Obj1: Obj1type; ; // Error, no render member - ~~~~~~~~~~~~~~~ -!!! error TS2605: JSX element type '{ x: number; }' is not a constructor function for JSX elements. -!!! error TS2605: Property 'render' is missing in type '{ x: number; }' but required in type 'ElementClass'. -!!! related TS2728 tests/cases/conformance/jsx/file.tsx:4:3: 'render' is declared here. ~~~~ !!! error TS2322: Type '{ x: number; }' is not assignable to type 'string'. + ~~~~ +!!! error TS2784: 'Obj1' cannot be used as a JSX component. +!!! error TS2784: Its instance type '{ x: number; }' is not a valid JSX element. +!!! error TS2784: Property 'render' is missing in type '{ x: number; }' but required in type 'ElementClass'. +!!! related TS2728 tests/cases/conformance/jsx/file.tsx:4:3: 'render' is declared here. interface Obj2type { (n: string): { x: number; render: any; }; diff --git a/tests/baselines/reference/tsxElementResolution9.errors.txt b/tests/baselines/reference/tsxElementResolution9.errors.txt index 38d4c941335f6..1a5a7ade41c6e 100644 --- a/tests/baselines/reference/tsxElementResolution9.errors.txt +++ b/tests/baselines/reference/tsxElementResolution9.errors.txt @@ -3,20 +3,22 @@ tests/cases/conformance/jsx/file.tsx(11,2): error TS2769: No overload matches th Type '{}' is not assignable to type 'string'. Overload 2 of 2, '(n: number): { y: string; }', gave the following error. Type '{}' is not assignable to type 'number'. -tests/cases/conformance/jsx/file.tsx(18,1): error TS2605: JSX element type '{ x: number; } & { y: string; }' is not a constructor function for JSX elements. - Property 'something' is missing in type '{ x: number; } & { y: string; }' but required in type 'Element'. tests/cases/conformance/jsx/file.tsx(18,2): error TS2769: No overload matches this call. Overload 1 of 2, '(n: string): { x: number; }', gave the following error. Type '{}' is not assignable to type 'string'. Overload 2 of 2, '(n: number): { y: string; }', gave the following error. Type '{}' is not assignable to type 'number'. -tests/cases/conformance/jsx/file.tsx(25,1): error TS2605: JSX element type '{ x: number; } & { x: number; y: string; }' is not a constructor function for JSX elements. - Property 'something' is missing in type '{ x: number; } & { x: number; y: string; }' but required in type 'Element'. +tests/cases/conformance/jsx/file.tsx(18,2): error TS2784: 'Obj2' cannot be used as a JSX component. + Its return type '{ x: number; } & { y: string; }' is not a valid JSX element. + Property 'something' is missing in type '{ x: number; } & { y: string; }' but required in type 'Element'. tests/cases/conformance/jsx/file.tsx(25,2): error TS2769: No overload matches this call. Overload 1 of 2, '(n: string): { x: number; }', gave the following error. Type '{ x: number; }' is not assignable to type 'string'. Overload 2 of 2, '(n: number): { x: number; y: string; }', gave the following error. Type '{ x: number; }' is not assignable to type 'number'. +tests/cases/conformance/jsx/file.tsx(25,2): error TS2784: 'Obj3' cannot be used as a JSX component. + Its return type '{ x: number; } & { x: number; y: string; }' is not a valid JSX element. + Property 'something' is missing in type '{ x: number; } & { x: number; y: string; }' but required in type 'Element'. ==== tests/cases/conformance/jsx/file.tsx (5 errors) ==== @@ -44,16 +46,17 @@ tests/cases/conformance/jsx/file.tsx(25,2): error TS2769: No overload matches th } var Obj2: Obj2; ; // Error, return type is not an object type - ~~~~~~~~ -!!! error TS2605: JSX element type '{ x: number; } & { y: string; }' is not a constructor function for JSX elements. -!!! error TS2605: Property 'something' is missing in type '{ x: number; } & { y: string; }' but required in type 'Element'. -!!! related TS2728 tests/cases/conformance/jsx/file.tsx:2:22: 'something' is declared here. ~~~~ !!! error TS2769: No overload matches this call. !!! error TS2769: Overload 1 of 2, '(n: string): { x: number; }', gave the following error. !!! error TS2769: Type '{}' is not assignable to type 'string'. !!! error TS2769: Overload 2 of 2, '(n: number): { y: string; }', gave the following error. !!! error TS2769: Type '{}' is not assignable to type 'number'. + ~~~~ +!!! error TS2784: 'Obj2' cannot be used as a JSX component. +!!! error TS2784: Its return type '{ x: number; } & { y: string; }' is not a valid JSX element. +!!! error TS2784: Property 'something' is missing in type '{ x: number; } & { y: string; }' but required in type 'Element'. +!!! related TS2728 tests/cases/conformance/jsx/file.tsx:2:22: 'something' is declared here. interface Obj3 { (n: string): { x: number }; @@ -61,14 +64,15 @@ tests/cases/conformance/jsx/file.tsx(25,2): error TS2769: No overload matches th } var Obj3: Obj3; ; // OK - ~~~~~~~~~~~~~~~ -!!! error TS2605: JSX element type '{ x: number; } & { x: number; y: string; }' is not a constructor function for JSX elements. -!!! error TS2605: Property 'something' is missing in type '{ x: number; } & { x: number; y: string; }' but required in type 'Element'. -!!! related TS2728 tests/cases/conformance/jsx/file.tsx:2:22: 'something' is declared here. ~~~~ !!! error TS2769: No overload matches this call. !!! error TS2769: Overload 1 of 2, '(n: string): { x: number; }', gave the following error. !!! error TS2769: Type '{ x: number; }' is not assignable to type 'string'. !!! error TS2769: Overload 2 of 2, '(n: number): { x: number; y: string; }', gave the following error. !!! error TS2769: Type '{ x: number; }' is not assignable to type 'number'. + ~~~~ +!!! error TS2784: 'Obj3' cannot be used as a JSX component. +!!! error TS2784: Its return type '{ x: number; } & { x: number; y: string; }' is not a valid JSX element. +!!! error TS2784: Property 'something' is missing in type '{ x: number; } & { x: number; y: string; }' but required in type 'Element'. +!!! related TS2728 tests/cases/conformance/jsx/file.tsx:2:22: 'something' is declared here. \ No newline at end of file diff --git a/tests/baselines/reference/tsxTypeArgumentPartialDefinitionStillErrors.errors.txt b/tests/baselines/reference/tsxTypeArgumentPartialDefinitionStillErrors.errors.txt index 25d62a07fa514..1a60c59d8c4a4 100644 --- a/tests/baselines/reference/tsxTypeArgumentPartialDefinitionStillErrors.errors.txt +++ b/tests/baselines/reference/tsxTypeArgumentPartialDefinitionStillErrors.errors.txt @@ -1,4 +1,5 @@ -tests/cases/compiler/file.tsx(11,1): error TS2605: JSX element type 'string' is not a constructor function for JSX elements. +tests/cases/compiler/file.tsx(11,2): error TS2784: 'SFC' cannot be used as a JSX component. + Its return type 'string' is not a valid JSX element. tests/cases/compiler/file.tsx(11,14): error TS2322: Type 'number' is not assignable to type 'string'. @@ -14,8 +15,9 @@ tests/cases/compiler/file.tsx(11,14): error TS2322: Type 'number' is not assigna } prop={1}>; // should error - ~~~~~~~~~~~~~~~~~~~~~~ -!!! error TS2605: JSX element type 'string' is not a constructor function for JSX elements. + ~~~ +!!! error TS2784: 'SFC' cannot be used as a JSX component. +!!! error TS2784: Its return type 'string' is not a valid JSX element. ~~~~ !!! error TS2322: Type 'number' is not assignable to type 'string'. \ No newline at end of file