From 096c15b0dedeae3cc4cebf28748bb5f70b5e848c Mon Sep 17 00:00:00 2001 From: Kanchalai Tanglertsampan Date: Fri, 17 Feb 2017 12:58:17 -0800 Subject: [PATCH 1/3] Defer get JSX.Element type allow null to be returned in SFC --- src/compiler/checker.ts | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts index 12b55aa818b9e..669a2e0f7c8b5 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -278,6 +278,8 @@ namespace ts { let deferredGlobalAsyncIterableIteratorType: GenericType; let deferredGlobalTemplateStringsArrayType: ObjectType; let deferredJsxElementClassType: Type; + let deferredJsxElementType: Type; + let deferredJsxStatelessElementType: Type; let deferredNodes: Node[]; let deferredUnusedIdentifierNodes: Node[]; @@ -398,7 +400,6 @@ namespace ts { }); const typeofType = createTypeofType(); - let jsxElementType: Type; let _jsxNamespace: string; let _jsxFactoryEntity: EntityName; @@ -12306,12 +12307,12 @@ namespace ts { type.flags & TypeFlags.UnionOrIntersection && !forEach((type).types, t => !isValidSpreadType(t))); } - function checkJsxSelfClosingElement(node: JsxSelfClosingElement) { + function checkJsxSelfClosingElement(node: JsxSelfClosingElement): Type { checkJsxOpeningLikeElement(node); - return jsxElementType || anyType; + return getJsxGlobalElementType() || anyType; } - function checkJsxElement(node: JsxElement) { + function checkJsxElement(node: JsxElement): Type { // Check attributes checkJsxOpeningLikeElement(node.openingElement); @@ -12338,7 +12339,7 @@ namespace ts { } } - return jsxElementType || anyType; + return getJsxGlobalElementType() || anyType; } /** @@ -12579,13 +12580,14 @@ namespace ts { function defaultTryGetJsxStatelessFunctionAttributesType(openingLikeElement: JsxOpeningLikeElement, elementType: Type, elemInstanceType: Type, elementClassType?: Type): Type { Debug.assert(!(elementType.flags & TypeFlags.Union)); if (!elementClassType || !isTypeAssignableTo(elemInstanceType, elementClassType)) { - if (jsxElementType) { + const jsxStatelessElementType = getJsxGlobalStatelessElementType(); + if (jsxStatelessElementType) { // We don't call getResolvedSignature here because we have already resolve the type of JSX Element. const callSignature = getResolvedJsxStatelessFunctionSignature(openingLikeElement, elementType, /*candidatesOutArray*/ undefined); if (callSignature !== unknownSignature) { const callReturnType = callSignature && getReturnTypeOfSignature(callSignature); let paramType = callReturnType && (callSignature.parameters.length === 0 ? emptyObjectType : getTypeOfSymbol(callSignature.parameters[0])); - if (callReturnType && isTypeAssignableTo(callReturnType, jsxElementType)) { + if (callReturnType && isTypeAssignableTo(callReturnType, jsxStatelessElementType)) { // Intersect in JSX.IntrinsicAttributes if it exists const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes); if (intrinsicAttributes !== unknownType) { @@ -12613,7 +12615,8 @@ namespace ts { Debug.assert(!(elementType.flags & TypeFlags.Union)); if (!elementClassType || !isTypeAssignableTo(elemInstanceType, elementClassType)) { // Is this is a stateless function component? See if its single signature's return type is assignable to the JSX Element Type - if (jsxElementType) { + const jsxStatelessElementType = getJsxGlobalStatelessElementType(); + if (jsxStatelessElementType) { // We don't call getResolvedSignature because here we have already resolve the type of JSX Element. const candidatesOutArray: Signature[] = []; getResolvedJsxStatelessFunctionSignature(openingLikeElement, elementType, candidatesOutArray); @@ -12622,7 +12625,7 @@ namespace ts { for (const candidate of candidatesOutArray) { const callReturnType = getReturnTypeOfSignature(candidate); const paramType = callReturnType && (candidate.parameters.length === 0 ? emptyObjectType : getTypeOfSymbol(candidate.parameters[0])); - if (callReturnType && isTypeAssignableTo(callReturnType, jsxElementType)) { + if (callReturnType && isTypeAssignableTo(callReturnType, jsxStatelessElementType)) { let shouldBeCandidate = true; for (const attribute of openingLikeElement.attributes.properties) { if (isJsxAttribute(attribute) && @@ -12871,6 +12874,23 @@ namespace ts { return deferredJsxElementClassType; } + function getJsxGlobalElementType(): Type { + if (!deferredJsxElementType) { + deferredJsxElementType = getExportedTypeFromNamespace(JsxNames.JSX, JsxNames.Element); + } + return deferredJsxElementType; + } + + function getJsxGlobalStatelessElementType(): Type { + if (!deferredJsxStatelessElementType) { + const jsxElementType = getJsxGlobalElementType(); + if (jsxElementType){ + deferredJsxStatelessElementType = getUnionType([jsxElementType, nullType]); + } + } + return deferredJsxStatelessElementType; + } + /** * Returns all the properties of the Jsx.IntrinsicElements interface */ @@ -12885,7 +12905,7 @@ namespace ts { error(errorNode, Diagnostics.Cannot_use_JSX_unless_the_jsx_flag_is_provided); } - if (jsxElementType === undefined) { + if (getJsxGlobalElementType() === undefined) { if (compilerOptions.noImplicitAny) { error(errorNode, Diagnostics.JSX_element_implicitly_has_type_any_because_the_global_type_JSX_Element_does_not_exist); } @@ -21917,7 +21937,6 @@ namespace ts { globalNumberType = getGlobalType("Number", /*arity*/ 0, /*reportErrors*/ true); globalBooleanType = getGlobalType("Boolean", /*arity*/ 0, /*reportErrors*/ true); globalRegExpType = getGlobalType("RegExp", /*arity*/ 0, /*reportErrors*/ true); - jsxElementType = getExportedTypeFromNamespace("JSX", JsxNames.Element); anyArrayType = createArrayType(anyType); autoArrayType = createArrayType(autoType); From fc6eee1a6c694300cf1509a041d21078f53c5632 Mon Sep 17 00:00:00 2001 From: Kanchalai Tanglertsampan Date: Fri, 17 Feb 2017 13:13:26 -0800 Subject: [PATCH 2/3] Add tests and baselines --- tests/baselines/reference/tsxSfcReturnNull.js | 24 +++++++++++++++ .../reference/tsxSfcReturnNull.symbols | 25 ++++++++++++++++ .../reference/tsxSfcReturnNull.types | 30 +++++++++++++++++++ .../tsxSfcReturnNullStrictNullChecks.js | 24 +++++++++++++++ .../tsxSfcReturnNullStrictNullChecks.symbols | 25 ++++++++++++++++ .../tsxSfcReturnNullStrictNullChecks.types | 30 +++++++++++++++++++ ...ReturnUndefinedStrictNullChecks.errors.txt | 20 +++++++++++++ .../tsxSfcReturnUndefinedStrictNullChecks.js | 25 ++++++++++++++++ .../conformance/jsx/tsxSfcReturnNull.tsx | 16 ++++++++++ .../jsx/tsxSfcReturnNullStrictNullChecks.tsx | 17 +++++++++++ .../tsxSfcReturnUndefinedStrictNullChecks.tsx | 17 +++++++++++ 11 files changed, 253 insertions(+) create mode 100644 tests/baselines/reference/tsxSfcReturnNull.js create mode 100644 tests/baselines/reference/tsxSfcReturnNull.symbols create mode 100644 tests/baselines/reference/tsxSfcReturnNull.types create mode 100644 tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.js create mode 100644 tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.symbols create mode 100644 tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.types create mode 100644 tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt create mode 100644 tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.js create mode 100644 tests/cases/conformance/jsx/tsxSfcReturnNull.tsx create mode 100644 tests/cases/conformance/jsx/tsxSfcReturnNullStrictNullChecks.tsx create mode 100644 tests/cases/conformance/jsx/tsxSfcReturnUndefinedStrictNullChecks.tsx diff --git a/tests/baselines/reference/tsxSfcReturnNull.js b/tests/baselines/reference/tsxSfcReturnNull.js new file mode 100644 index 0000000000000..8a332a7057f64 --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnNull.js @@ -0,0 +1,24 @@ +//// [file.tsx] + +import React = require('react'); + +const Foo = (props: any) => null; + +function Greet(x: {name?: string}) { + return null; +} + +const foo = ; +const G = ; + +//// [file.jsx] +define(["require", "exports", "react"], function (require, exports, React) { + "use strict"; + exports.__esModule = true; + var Foo = function (props) { return null; }; + function Greet(x) { + return null; + } + var foo = ; + var G = ; +}); diff --git a/tests/baselines/reference/tsxSfcReturnNull.symbols b/tests/baselines/reference/tsxSfcReturnNull.symbols new file mode 100644 index 0000000000000..483b7db6c592f --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnNull.symbols @@ -0,0 +1,25 @@ +=== tests/cases/conformance/jsx/file.tsx === + +import React = require('react'); +>React : Symbol(React, Decl(file.tsx, 0, 0)) + +const Foo = (props: any) => null; +>Foo : Symbol(Foo, Decl(file.tsx, 3, 5)) +>props : Symbol(props, Decl(file.tsx, 3, 13)) + +function Greet(x: {name?: string}) { +>Greet : Symbol(Greet, Decl(file.tsx, 3, 33)) +>x : Symbol(x, Decl(file.tsx, 5, 15)) +>name : Symbol(name, Decl(file.tsx, 5, 19)) + + return null; +} + +const foo = ; +>foo : Symbol(foo, Decl(file.tsx, 9, 5)) +>Foo : Symbol(Foo, Decl(file.tsx, 3, 5)) + +const G = ; +>G : Symbol(G, Decl(file.tsx, 10, 5)) +>Greet : Symbol(Greet, Decl(file.tsx, 3, 33)) + diff --git a/tests/baselines/reference/tsxSfcReturnNull.types b/tests/baselines/reference/tsxSfcReturnNull.types new file mode 100644 index 0000000000000..edc346b03e612 --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnNull.types @@ -0,0 +1,30 @@ +=== tests/cases/conformance/jsx/file.tsx === + +import React = require('react'); +>React : typeof React + +const Foo = (props: any) => null; +>Foo : (props: any) => any +>(props: any) => null : (props: any) => any +>props : any +>null : null + +function Greet(x: {name?: string}) { +>Greet : (x: { name?: string; }) => any +>x : { name?: string; } +>name : string + + return null; +>null : null +} + +const foo = ; +>foo : JSX.Element +> : JSX.Element +>Foo : (props: any) => any + +const G = ; +>G : JSX.Element +> : JSX.Element +>Greet : (x: { name?: string; }) => any + diff --git a/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.js b/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.js new file mode 100644 index 0000000000000..8a332a7057f64 --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.js @@ -0,0 +1,24 @@ +//// [file.tsx] + +import React = require('react'); + +const Foo = (props: any) => null; + +function Greet(x: {name?: string}) { + return null; +} + +const foo = ; +const G = ; + +//// [file.jsx] +define(["require", "exports", "react"], function (require, exports, React) { + "use strict"; + exports.__esModule = true; + var Foo = function (props) { return null; }; + function Greet(x) { + return null; + } + var foo = ; + var G = ; +}); diff --git a/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.symbols b/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.symbols new file mode 100644 index 0000000000000..483b7db6c592f --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.symbols @@ -0,0 +1,25 @@ +=== tests/cases/conformance/jsx/file.tsx === + +import React = require('react'); +>React : Symbol(React, Decl(file.tsx, 0, 0)) + +const Foo = (props: any) => null; +>Foo : Symbol(Foo, Decl(file.tsx, 3, 5)) +>props : Symbol(props, Decl(file.tsx, 3, 13)) + +function Greet(x: {name?: string}) { +>Greet : Symbol(Greet, Decl(file.tsx, 3, 33)) +>x : Symbol(x, Decl(file.tsx, 5, 15)) +>name : Symbol(name, Decl(file.tsx, 5, 19)) + + return null; +} + +const foo = ; +>foo : Symbol(foo, Decl(file.tsx, 9, 5)) +>Foo : Symbol(Foo, Decl(file.tsx, 3, 5)) + +const G = ; +>G : Symbol(G, Decl(file.tsx, 10, 5)) +>Greet : Symbol(Greet, Decl(file.tsx, 3, 33)) + diff --git a/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.types b/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.types new file mode 100644 index 0000000000000..5268592b8d7c6 --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnNullStrictNullChecks.types @@ -0,0 +1,30 @@ +=== tests/cases/conformance/jsx/file.tsx === + +import React = require('react'); +>React : typeof React + +const Foo = (props: any) => null; +>Foo : (props: any) => null +>(props: any) => null : (props: any) => null +>props : any +>null : null + +function Greet(x: {name?: string}) { +>Greet : (x: { name?: string | undefined; }) => null +>x : { name?: string | undefined; } +>name : string | undefined + + return null; +>null : null +} + +const foo = ; +>foo : JSX.Element +> : JSX.Element +>Foo : (props: any) => null + +const G = ; +>G : JSX.Element +> : JSX.Element +>Greet : (x: { name?: string | undefined; }) => null + diff --git a/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt new file mode 100644 index 0000000000000..127eb4b0d4431 --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.errors.txt @@ -0,0 +1,20 @@ +tests/cases/conformance/jsx/file.tsx(10,13): error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. +tests/cases/conformance/jsx/file.tsx(11,11): error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. + + +==== tests/cases/conformance/jsx/file.tsx (2 errors) ==== + + import React = require('react'); + + const Foo = (props: any) => undefined; + function Greet(x: {name?: string}) { + return undefined; + } + + // Error + const foo = ; + ~~~~~~~ +!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. + const G = ; + ~~~~~~~~~ +!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements. \ No newline at end of file diff --git a/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.js b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.js new file mode 100644 index 0000000000000..0fcaa2f168937 --- /dev/null +++ b/tests/baselines/reference/tsxSfcReturnUndefinedStrictNullChecks.js @@ -0,0 +1,25 @@ +//// [file.tsx] + +import React = require('react'); + +const Foo = (props: any) => undefined; +function Greet(x: {name?: string}) { + return undefined; +} + +// Error +const foo = ; +const G = ; + +//// [file.jsx] +define(["require", "exports", "react"], function (require, exports, React) { + "use strict"; + exports.__esModule = true; + var Foo = function (props) { return undefined; }; + function Greet(x) { + return undefined; + } + // Error + var foo = ; + var G = ; +}); diff --git a/tests/cases/conformance/jsx/tsxSfcReturnNull.tsx b/tests/cases/conformance/jsx/tsxSfcReturnNull.tsx new file mode 100644 index 0000000000000..436b361eaf898 --- /dev/null +++ b/tests/cases/conformance/jsx/tsxSfcReturnNull.tsx @@ -0,0 +1,16 @@ +// @filename: file.tsx +// @jsx: preserve +// @module: amd +// @noLib: true +// @libFiles: react.d.ts,lib.d.ts + +import React = require('react'); + +const Foo = (props: any) => null; + +function Greet(x: {name?: string}) { + return null; +} + +const foo = ; +const G = ; \ No newline at end of file diff --git a/tests/cases/conformance/jsx/tsxSfcReturnNullStrictNullChecks.tsx b/tests/cases/conformance/jsx/tsxSfcReturnNullStrictNullChecks.tsx new file mode 100644 index 0000000000000..cbc7218698f0f --- /dev/null +++ b/tests/cases/conformance/jsx/tsxSfcReturnNullStrictNullChecks.tsx @@ -0,0 +1,17 @@ +// @filename: file.tsx +// @jsx: preserve +// @module: amd +// @noLib: true +// @strictNullChecks: true +// @libFiles: react.d.ts,lib.d.ts + +import React = require('react'); + +const Foo = (props: any) => null; + +function Greet(x: {name?: string}) { + return null; +} + +const foo = ; +const G = ; \ No newline at end of file diff --git a/tests/cases/conformance/jsx/tsxSfcReturnUndefinedStrictNullChecks.tsx b/tests/cases/conformance/jsx/tsxSfcReturnUndefinedStrictNullChecks.tsx new file mode 100644 index 0000000000000..cb0c6444e739d --- /dev/null +++ b/tests/cases/conformance/jsx/tsxSfcReturnUndefinedStrictNullChecks.tsx @@ -0,0 +1,17 @@ +// @filename: file.tsx +// @jsx: preserve +// @module: amd +// @noLib: true +// @strictNullChecks: true +// @libFiles: react.d.ts,lib.d.ts + +import React = require('react'); + +const Foo = (props: any) => undefined; +function Greet(x: {name?: string}) { + return undefined; +} + +// Error +const foo = ; +const G = ; \ No newline at end of file From 9ca08a4efafec79abf16043de3cd4b92fda6ad54 Mon Sep 17 00:00:00 2001 From: Kanchalai Tanglertsampan Date: Fri, 17 Feb 2017 13:50:05 -0800 Subject: [PATCH 3/3] Fix linting --- 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 669a2e0f7c8b5..bc39712f2f2a3 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -12884,7 +12884,7 @@ namespace ts { function getJsxGlobalStatelessElementType(): Type { if (!deferredJsxStatelessElementType) { const jsxElementType = getJsxGlobalElementType(); - if (jsxElementType){ + if (jsxElementType) { deferredJsxStatelessElementType = getUnionType([jsxElementType, nullType]); } }