[Master] Fix 11566 : SFC returns null

src/compiler/checker.ts

@@ -284,6 +284,8 @@ namespace ts {
         let deferredGlobalAsyncIterableIteratorType: GenericType;
         let deferredGlobalTemplateStringsArrayType: ObjectType;
         let deferredJsxElementClassType: Type;
+        let deferredJsxElementType: Type;
+        let deferredJsxStatelessElementType: Type;
 
         let deferredNodes: Node[];
         let deferredUnusedIdentifierNodes: Node[];
@@ -404,7 +406,6 @@ namespace ts {
         });
         const typeofType = createTypeofType();
 
-        let jsxElementType: Type;
         let _jsxNamespace: string;
         let _jsxFactoryEntity: EntityName;
 
@@ -12453,12 +12454,12 @@ namespace ts {
                 type.flags & TypeFlags.UnionOrIntersection && !forEach((<UnionOrIntersectionType>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);
 
@@ -12485,7 +12486,7 @@ namespace ts {
                 }
             }
 
-            return jsxElementType || anyType;
+            return getJsxGlobalElementType() || anyType;
         }
 
         /**
@@ -12726,13 +12727,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) {
@@ -12760,7 +12762,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);
@@ -12769,7 +12772,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) &&
@@ -13013,6 +13016,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
          */
@@ -13027,7 +13047,7 @@ namespace ts {
                 error(errorNode, Diagnostics.Cannot_use_JSX_unless_the_jsx_flag_is_provided);
             }
 
-            if (jsxElementType === undefined) {
+            if (getJsxGlobalElementType() === undefined) {
                 if (noImplicitAny) {
                     error(errorNode, Diagnostics.JSX_element_implicitly_has_type_any_because_the_global_type_JSX_Element_does_not_exist);
                 }
@@ -22072,7 +22092,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);
 

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 = <Foo />;
+const G = <Greet />;
+
+//// [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 = <Foo />;
+    var G = <Greet />;
+});

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 />;
+>foo : Symbol(foo, Decl(file.tsx, 9, 5))
+>Foo : Symbol(Foo, Decl(file.tsx, 3, 5))
+
+const G = <Greet />;
+>G : Symbol(G, Decl(file.tsx, 10, 5))
+>Greet : Symbol(Greet, Decl(file.tsx, 3, 33))
+

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 />;
+>foo : JSX.Element
+><Foo /> : JSX.Element
+>Foo : (props: any) => any
+
+const G = <Greet />;
+>G : JSX.Element
+><Greet /> : JSX.Element
+>Greet : (x: { name?: string; }) => any
+

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 = <Foo />;
+const G = <Greet />;
+
+//// [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 = <Foo />;
+    var G = <Greet />;
+});

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 />;
+>foo : Symbol(foo, Decl(file.tsx, 9, 5))
+>Foo : Symbol(Foo, Decl(file.tsx, 3, 5))
+
+const G = <Greet />;
+>G : Symbol(G, Decl(file.tsx, 10, 5))
+>Greet : Symbol(Greet, Decl(file.tsx, 3, 33))
+

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 />;
+>foo : JSX.Element
+><Foo /> : JSX.Element
+>Foo : (props: any) => null
+
+const G = <Greet />;
+>G : JSX.Element
+><Greet /> : JSX.Element
+>Greet : (x: { name?: string | undefined; }) => null
+

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 = <Foo />;
+                ~~~~~~~
+!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements.
+    const G = <Greet />;
+              ~~~~~~~~~
+!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements.

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 = <Foo />;
+const G = <Greet />;
+
+//// [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 = <Foo />;
+    var G = <Greet />;
+});

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 = <Foo />;
+const G = <Greet />;

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 = <Foo />;
+const G = <Greet />;

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 = <Foo />;
+const G = <Greet />;