[React-Release 2.3] Enable default type parameter in React Component class

src/compiler/checker.ts

@@ -13397,7 +13397,18 @@ namespace ts {
                 }
             }
 
-            return getUnionType(map(signatures, getReturnTypeOfSignature), /*subtypeReduction*/ true);
+            const instantiatedSignatures = [];
+            for (const signature of signatures) {
+                if (signature.typeParameters) {
+                    const typeArguments = fillMissingTypeArguments(/*typeArguments*/ undefined, signature.typeParameters, /*minTypeArgumentCount*/ 0);
+                    instantiatedSignatures.push(getSignatureInstantiation(signature, typeArguments));
+                }
+                else {
+                    instantiatedSignatures.push(signature);
+                }
+            }
+
+            return getUnionType(map(instantiatedSignatures, getReturnTypeOfSignature), /*subtypeReduction*/ true);
         }
 
         /**

tests/baselines/reference/tsxReactComponentWithDefaultTypeParameter1.js

@@ -0,0 +1,19 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string
+}
+
+declare class MyComp<P = Prop> extends React.Component<P, {}> {
+    internalProp: P;
+}
+
+let x = <MyComp a={10} b="hi" />
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+var x = <MyComp a={10} b="hi"/>;

tests/baselines/reference/tsxReactComponentWithDefaultTypeParameter1.symbols

@@ -0,0 +1,34 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface Prop {
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    a: number,
+>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
+
+    b: string
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+}
+
+declare class MyComp<P = Prop> extends React.Component<P, {}> {
+>MyComp : Symbol(MyComp, Decl(file.tsx, 5, 1))
+>P : Symbol(P, Decl(file.tsx, 7, 21))
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>P : Symbol(P, Decl(file.tsx, 7, 21))
+
+    internalProp: P;
+>internalProp : Symbol(MyComp.internalProp, Decl(file.tsx, 7, 63))
+>P : Symbol(P, Decl(file.tsx, 7, 21))
+}
+
+let x = <MyComp a={10} b="hi" />
+>x : Symbol(x, Decl(file.tsx, 11, 3))
+>MyComp : Symbol(MyComp, Decl(file.tsx, 5, 1))
+>a : Symbol(a, Decl(file.tsx, 11, 15))
+>b : Symbol(b, Decl(file.tsx, 11, 22))
+

tests/baselines/reference/tsxReactComponentWithDefaultTypeParameter1.types

@@ -0,0 +1,36 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface Prop {
+>Prop : Prop
+
+    a: number,
+>a : number
+
+    b: string
+>b : string
+}
+
+declare class MyComp<P = Prop> extends React.Component<P, {}> {
+>MyComp : MyComp<P>
+>P : P
+>Prop : Prop
+>React.Component : React.Component<P, {}>
+>React : typeof React
+>Component : typeof React.Component
+>P : P
+
+    internalProp: P;
+>internalProp : P
+>P : P
+}
+
+let x = <MyComp a={10} b="hi" />
+>x : JSX.Element
+><MyComp a={10} b="hi" /> : JSX.Element
+>MyComp : typeof MyComp
+>a : number
+>10 : 10
+>b : string
+

tests/baselines/reference/tsxReactComponentWithDefaultTypeParameter2.errors.txt

@@ -0,0 +1,33 @@
+tests/cases/conformance/jsx/file.tsx(13,9): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<Prop>> & Prop & { children?: ReactNode; }'.
+  Type '{}' is not assignable to type 'Prop'.
+    Property 'a' is missing in type '{}'.
+tests/cases/conformance/jsx/file.tsx(14,18): error TS2322: Type '{ a: "hi"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<Prop>> & Prop & { children?: ReactNode; }'.
+  Type '{ a: "hi"; }' is not assignable to type 'Prop'.
+    Types of property 'a' are incompatible.
+      Type '"hi"' is not assignable to type 'number'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
+    import React = require('react');
+
+    interface Prop {
+        a: number,
+        b: string
+    }
+
+    declare class MyComp<P = Prop> extends React.Component<P, {}> {
+        internalProp: P;
+    }
+
+    // Error
+    let x = <MyComp />
+            ~~~~~~~~~~
+!!! error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<Prop>> & Prop & { children?: ReactNode; }'.
+!!! error TS2322:   Type '{}' is not assignable to type 'Prop'.
+!!! error TS2322:     Property 'a' is missing in type '{}'.
+    let x1 = <MyComp a="hi"/>
+                     ~~~~~~
+!!! error TS2322: Type '{ a: "hi"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<Prop>> & Prop & { children?: ReactNode; }'.
+!!! error TS2322:   Type '{ a: "hi"; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'a' are incompatible.
+!!! error TS2322:       Type '"hi"' is not assignable to type 'number'.

tests/baselines/reference/tsxReactComponentWithDefaultTypeParameter2.js

@@ -0,0 +1,23 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string
+}
+
+declare class MyComp<P = Prop> extends React.Component<P, {}> {
+    internalProp: P;
+}
+
+// Error
+let x = <MyComp />
+let x1 = <MyComp a="hi"/>
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+// Error
+var x = <MyComp />;
+var x1 = <MyComp a="hi"/>;

tests/baselines/reference/tsxReactComponentWithDefaultTypeParameter3.errors.txt

@@ -0,0 +1,30 @@
+tests/cases/conformance/jsx/file.tsx(16,17): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.
+  Property 'a' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.
+tests/cases/conformance/jsx/file.tsx(17,18): error TS2322: Type '{ a: "hi"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.
+  Property 'a' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
+    import React = require('react');
+
+    interface Prop {
+        a: number,
+        b: string
+    }
+
+    declare class MyComp<P extends Prop> extends React.Component<P, {}> {
+        internalProp: P;
+    }
+
+    // OK: we fille in missing type argument with empty object
+    let x1 = <MyComp />
+
+    // Error
+    let x = <MyComp a={10} b="hi" />
+                    ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.
+!!! error TS2322:   Property 'a' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.
+    let x2 = <MyComp a="hi"/>
+                     ~~~~~~
+!!! error TS2322: Type '{ a: "hi"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.
+!!! error TS2322:   Property 'a' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp<{}>> & { children?: ReactNode; }'.

tests/baselines/reference/tsxReactComponentWithDefaultTypeParameter3.js

@@ -0,0 +1,28 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string
+}
+
+declare class MyComp<P extends Prop> extends React.Component<P, {}> {
+    internalProp: P;
+}
+
+// OK: we fille in missing type argument with empty object
+let x1 = <MyComp />
+
+// Error
+let x = <MyComp a={10} b="hi" />
+let x2 = <MyComp a="hi"/>
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+// OK: we fille in missing type argument with empty object
+var x1 = <MyComp />;
+// Error
+var x = <MyComp a={10} b="hi"/>;
+var x2 = <MyComp a="hi"/>;

tests/baselines/reference/tsxStatelessFunctionComponentWithDefaultTypeParameter1.js

@@ -0,0 +1,26 @@
+//// [file.tsx]
+import React = require('react')
+
+interface MyComponentProp {
+    values: string;
+}
+
+function MyComponent<T = MyComponentProp>(attr: T) {
+    return <div>attr.values</div>
+}
+
+// OK
+let i = <MyComponent values />;  // We infer type arguments here
+let i1 = <MyComponent values="Hello"/>;
+
+//// [file.jsx]
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    exports.__esModule = true;
+    function MyComponent(attr) {
+        return <div>attr.values</div>;
+    }
+    // OK
+    var i = <MyComponent values/>; // We infer type arguments here
+    var i1 = <MyComponent values="Hello"/>;
+});

tests/baselines/reference/tsxStatelessFunctionComponentWithDefaultTypeParameter1.symbols

@@ -0,0 +1,34 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react')
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface MyComponentProp {
+>MyComponentProp : Symbol(MyComponentProp, Decl(file.tsx, 0, 31))
+
+    values: string;
+>values : Symbol(MyComponentProp.values, Decl(file.tsx, 2, 27))
+}
+
+function MyComponent<T = MyComponentProp>(attr: T) {
+>MyComponent : Symbol(MyComponent, Decl(file.tsx, 4, 1))
+>T : Symbol(T, Decl(file.tsx, 6, 21))
+>MyComponentProp : Symbol(MyComponentProp, Decl(file.tsx, 0, 31))
+>attr : Symbol(attr, Decl(file.tsx, 6, 42))
+>T : Symbol(T, Decl(file.tsx, 6, 21))
+
+    return <div>attr.values</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+}
+
+// OK
+let i = <MyComponent values />;  // We infer type arguments here
+>i : Symbol(i, Decl(file.tsx, 11, 3))
+>MyComponent : Symbol(MyComponent, Decl(file.tsx, 4, 1))
+>values : Symbol(values, Decl(file.tsx, 11, 20))
+
+let i1 = <MyComponent values="Hello"/>;
+>i1 : Symbol(i1, Decl(file.tsx, 12, 3))
+>MyComponent : Symbol(MyComponent, Decl(file.tsx, 4, 1))
+>values : Symbol(values, Decl(file.tsx, 12, 21))
+

tests/baselines/reference/tsxStatelessFunctionComponentWithDefaultTypeParameter1.types

@@ -0,0 +1,37 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react')
+>React : typeof React
+
+interface MyComponentProp {
+>MyComponentProp : MyComponentProp
+
+    values: string;
+>values : string
+}
+
+function MyComponent<T = MyComponentProp>(attr: T) {
+>MyComponent : <T = MyComponentProp>(attr: T) => JSX.Element
+>T : T
+>MyComponentProp : MyComponentProp
+>attr : T
+>T : T
+
+    return <div>attr.values</div>
+><div>attr.values</div> : JSX.Element
+>div : any
+>div : any
+}
+
+// OK
+let i = <MyComponent values />;  // We infer type arguments here
+>i : JSX.Element
+><MyComponent values /> : JSX.Element
+>MyComponent : <T = MyComponentProp>(attr: T) => JSX.Element
+>values : true
+
+let i1 = <MyComponent values="Hello"/>;
+>i1 : JSX.Element
+><MyComponent values="Hello"/> : JSX.Element
+>MyComponent : <T = MyComponentProp>(attr: T) => JSX.Element
+>values : string
+

tests/baselines/reference/tsxStatelessFunctionComponentWithDefaultTypeParameter2.errors.txt

@@ -0,0 +1,25 @@
+tests/cases/conformance/jsx/file.tsx(13,24): error TS2322: Type '{ values: 5; }' is not assignable to type 'IntrinsicAttributes & MyComponentProp'.
+  Type '{ values: 5; }' is not assignable to type 'MyComponentProp'.
+    Types of property 'values' are incompatible.
+      Type '5' is not assignable to type 'string'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
+    import React = require('react')
+
+    interface MyComponentProp {
+        values: string;
+    }
+
+    function MyComponent1<T extends MyComponentProp>(attr: T) {
+        return <div>attr.values</div>
+    }
+
+
+    // Error
+    let i1 = <MyComponent1 values={5}/>;
+                           ~~~~~~~~~~
+!!! error TS2322: Type '{ values: 5; }' is not assignable to type 'IntrinsicAttributes & MyComponentProp'.
+!!! error TS2322:   Type '{ values: 5; }' is not assignable to type 'MyComponentProp'.
+!!! error TS2322:     Types of property 'values' are incompatible.
+!!! error TS2322:       Type '5' is not assignable to type 'string'.

tests/baselines/reference/tsxStatelessFunctionComponentWithDefaultTypeParameter2.js

@@ -0,0 +1,25 @@
+//// [file.tsx]
+import React = require('react')
+
+interface MyComponentProp {
+    values: string;
+}
+
+function MyComponent1<T extends MyComponentProp>(attr: T) {
+    return <div>attr.values</div>
+}
+
+
+// Error
+let i1 = <MyComponent1 values={5}/>;
+
+//// [file.jsx]
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    exports.__esModule = true;
+    function MyComponent1(attr) {
+        return <div>attr.values</div>;
+    }
+    // Error
+    var i1 = <MyComponent1 values={5}/>;
+});