Microsoft/TypeScript
1
0
Fork 0
mirror of https://github.com/microsoft/TypeScript.git synced 2025-11-18 17:21:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8674 from evansb/union-type-react

Browse Source 
Fixes #8657: Handles union typed React component.
This commit is contained in:
Mohamed Hegazy
2016-05-19 13:14:07 -07:00
parent c9ab20c13b 01b541dbe2
commit 43b36d22e0
8 changed files with 358 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/compiler/checker.ts
+104 -90
View File
@@ -9509,20 +9509,18 @@ namespace ts {
* element is not a class element, or the class element type cannot be determined, returns 'undefined'.
* For example, in the element <MyClass>, the element instance type is `MyClass` (not `typeof MyClass`).
*/
function getJsxElementInstanceType(node: JsxOpeningLikeElement) {
const valueType = checkExpression(node.tagName);
function getJsxElementInstanceType(node: JsxOpeningLikeElement, valueType: Type) {
Debug.assert(!(valueType.flags & TypeFlags.Union));
if (isTypeAny(valueType)) {
// Short-circuit if the class tag is using an element type 'any'
return anyType;
}
// Resolve the signatures, preferring constructors
// Resolve the signatures, preferring constructor
let signatures = getSignaturesOfType(valueType, SignatureKind.Construct);
if (signatures.length === 0) {
// No construct signatures, try call signatures
signatures = getSignaturesOfType(valueType, SignatureKind.Call);
if (signatures.length === 0) {
// We found no signatures at all, which is an error
error(node.tagName, Diagnostics.JSX_element_type_0_does_not_have_any_construct_or_call_signatures, getTextOfNode(node.tagName));
@@ -9570,6 +9568,103 @@ namespace ts {
}
}
/**
* Given React element instance type and the class type, resolve the Jsx type
* Pass elemType to handle individual type in the union typed element type.
*/
function getResolvedJsxType(node: JsxOpeningLikeElement, elemType?: Type, elemClassType?: Type): Type {
if (!elemType) {
elemType = checkExpression(node.tagName);
}
if (elemType.flags & TypeFlags.Union) {
const types = (<UnionOrIntersectionType> elemType).types;
return getUnionType(types.map(type => {
return getResolvedJsxType(node, type, elemClassType);
}));
}
// Get the element instance type (the result of newing or invoking this tag)
const elemInstanceType = getJsxElementInstanceType(node, elemType);
if (!elemClassType || !isTypeAssignableTo(elemInstanceType, elemClassType)) {
// 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 callSignatures = elemType && getSignaturesOfType(elemType, SignatureKind.Call);
const callSignature = callSignatures && callSignatures.length > 0 && callSignatures[0];
const callReturnType = callSignature && getReturnTypeOfSignature(callSignature);
let paramType = callReturnType && (callSignature.parameters.length === 0 ? emptyObjectType : getTypeOfSymbol(callSignature.parameters[0]));
if (callReturnType && isTypeAssignableTo(callReturnType, jsxElementType)) {
// Intersect in JSX.IntrinsicAttributes if it exists
const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes);
if (intrinsicAttributes !== unknownType) {
paramType = intersectTypes(intrinsicAttributes, paramType);
}
return paramType;
}
}
}
// Issue an error if this return type isn't assignable to JSX.ElementClass
if (elemClassType) {
checkTypeRelatedTo(elemInstanceType, elemClassType, assignableRelation, node, Diagnostics.JSX_element_type_0_is_not_a_constructor_function_for_JSX_elements);
}
if (isTypeAny(elemInstanceType)) {
return elemInstanceType;
}
const propsName = getJsxElementPropertiesName();
if (propsName === undefined) {
// There is no type ElementAttributesProperty, return 'any'
return anyType;
}
else if (propsName === "") {
// If there is no e.g. 'props' member in ElementAttributesProperty, use the element class type instead
return elemInstanceType;
}
else {
const attributesType = getTypeOfPropertyOfType(elemInstanceType, propsName);
if (!attributesType) {
// There is no property named 'props' on this instance type
return emptyObjectType;
}
else if (isTypeAny(attributesType) || (attributesType === unknownType)) {
// Props is of type 'any' or unknown
return attributesType;
}
else if (attributesType.flags & TypeFlags.Union) {
// Props cannot be a union type
error(node.tagName, Diagnostics.JSX_element_attributes_type_0_may_not_be_a_union_type, typeToString(attributesType));
return anyType;
}
else {
// Normal case -- add in IntrinsicClassElements<T> and IntrinsicElements
let apparentAttributesType = attributesType;
const intrinsicClassAttribs = getJsxType(JsxNames.IntrinsicClassAttributes);
if (intrinsicClassAttribs !== unknownType) {
const typeParams = getLocalTypeParametersOfClassOrInterfaceOrTypeAlias(intrinsicClassAttribs.symbol);
if (typeParams) {
if (typeParams.length === 1) {
apparentAttributesType = intersectTypes(createTypeReference(<GenericType>intrinsicClassAttribs, [elemInstanceType]), apparentAttributesType);
}
}
else {
apparentAttributesType = intersectTypes(attributesType, intrinsicClassAttribs);
}
}
const intrinsicAttribs = getJsxType(JsxNames.IntrinsicAttributes);
if (intrinsicAttribs !== unknownType) {
apparentAttributesType = intersectTypes(intrinsicAttribs, apparentAttributesType);
}
return apparentAttributesType;
}
}
}
/**
* Given an opening/self-closing element, get the 'element attributes type', i.e. the type that tells
* us which attributes are valid on a given element.
@@ -9585,96 +9680,15 @@ namespace ts {
else if (links.jsxFlags & JsxFlags.IntrinsicIndexedElement) {
return links.resolvedJsxType = getIndexInfoOfSymbol(symbol, IndexKind.String).type;
}
else {
return links.resolvedJsxType = unknownType;
}
}
else {
// Get the element instance type (the result of newing or invoking this tag)
const elemInstanceType = getJsxElementInstanceType(node);
const elemClassType = getJsxGlobalElementClassType();
if (!elemClassType || !isTypeAssignableTo(elemInstanceType, elemClassType)) {
// 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 elemType = checkExpression(node.tagName);
const callSignatures = elemType && getSignaturesOfType(elemType, SignatureKind.Call);
const callSignature = callSignatures && callSignatures.length > 0 && callSignatures[0];
const callReturnType = callSignature && getReturnTypeOfSignature(callSignature);
let paramType = callReturnType && (callSignature.parameters.length === 0 ? emptyObjectType : getTypeOfSymbol(callSignature.parameters[0]));
if (callReturnType && isTypeAssignableTo(callReturnType, jsxElementType)) {
// Intersect in JSX.IntrinsicAttributes if it exists
const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes);
if (intrinsicAttributes !== unknownType) {
paramType = intersectTypes(intrinsicAttributes, paramType);
}
return links.resolvedJsxType = paramType;
}
}
}
// Issue an error if this return type isn't assignable to JSX.ElementClass
if (elemClassType) {
checkTypeRelatedTo(elemInstanceType, elemClassType, assignableRelation, node, Diagnostics.JSX_element_type_0_is_not_a_constructor_function_for_JSX_elements);
}
if (isTypeAny(elemInstanceType)) {
return links.resolvedJsxType = elemInstanceType;
}
const propsName = getJsxElementPropertiesName();
if (propsName === undefined) {
// There is no type ElementAttributesProperty, return 'any'
return links.resolvedJsxType = anyType;
}
else if (propsName === "") {
// If there is no e.g. 'props' member in ElementAttributesProperty, use the element class type instead
return links.resolvedJsxType = elemInstanceType;
}
else {
const attributesType = getTypeOfPropertyOfType(elemInstanceType, propsName);
if (!attributesType) {
// There is no property named 'props' on this instance type
return links.resolvedJsxType = emptyObjectType;
}
else if (isTypeAny(attributesType) || (attributesType === unknownType)) {
// Props is of type 'any' or unknown
return links.resolvedJsxType = attributesType;
}
else if (attributesType.flags & TypeFlags.Union) {
// Props cannot be a union type
error(node.tagName, Diagnostics.JSX_element_attributes_type_0_may_not_be_a_union_type, typeToString(attributesType));
return links.resolvedJsxType = anyType;
}
else {
// Normal case -- add in IntrinsicClassElements<T> and IntrinsicElements
let apparentAttributesType = attributesType;
const intrinsicClassAttribs = getJsxType(JsxNames.IntrinsicClassAttributes);
if (intrinsicClassAttribs !== unknownType) {
const typeParams = getLocalTypeParametersOfClassOrInterfaceOrTypeAlias(intrinsicClassAttribs.symbol);
if (typeParams) {
if (typeParams.length === 1) {
apparentAttributesType = intersectTypes(createTypeReference(<GenericType>intrinsicClassAttribs, [elemInstanceType]), apparentAttributesType);
}
}
else {
apparentAttributesType = intersectTypes(attributesType, intrinsicClassAttribs);
}
}
const intrinsicAttribs = getJsxType(JsxNames.IntrinsicAttributes);
if (intrinsicAttribs !== unknownType) {
apparentAttributesType = intersectTypes(intrinsicAttribs, apparentAttributesType);
}
return links.resolvedJsxType = apparentAttributesType;
}
}
return links.resolvedJsxType = getResolvedJsxType(node, undefined, elemClassType);
}
return links.resolvedJsxType = unknownType;
}
return links.resolvedJsxType;
}
tests/baselines/reference/tsxUnionTypeComponent1.js
+56
View File
@@ -0,0 +1,56 @@
//// [file.tsx]
import React = require('react');
interface ComponentProps {
AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
}
class MyComponent extends React.Component<ComponentProps, {}> {
render() {
const { AnyComponent } = this.props;
return (<AnyComponent />);
}
}
// Stateless Component As Props
<MyComponent AnyComponent={() => <button>test</button>}/>
// Component Class as Props
class MyButtonComponent extends React.Component<{},{}> {
}
<MyComponent AnyComponent={MyButtonComponent} />
//// [file.js]
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var MyComponent = (function (_super) {
__extends(MyComponent, _super);
function MyComponent() {
_super.apply(this, arguments);
}
MyComponent.prototype.render = function () {
var AnyComponent = this.props.AnyComponent;
return (React.createElement(AnyComponent, null));
};
return MyComponent;
}(React.Component));
// Stateless Component As Props
React.createElement(MyComponent, {AnyComponent: function () { return React.createElement("button", null, "test"); }});
// Component Class as Props
var MyButtonComponent = (function (_super) {
__extends(MyButtonComponent, _super);
function MyButtonComponent() {
_super.apply(this, arguments);
}
return MyButtonComponent;
}(React.Component));
React.createElement(MyComponent, {AnyComponent: MyButtonComponent});
tests/baselines/reference/tsxUnionTypeComponent1.symbols
+58
View File
@@ -0,0 +1,58 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : Symbol(React, Decl(file.tsx, 0, 0))
interface ComponentProps {
>ComponentProps : Symbol(ComponentProps, Decl(file.tsx, 1, 32))
AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
>AnyComponent : Symbol(ComponentProps.AnyComponent, Decl(file.tsx, 3, 26))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>StatelessComponent : Symbol(React.StatelessComponent, Decl(react.d.ts, 139, 5))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>ComponentClass : Symbol(React.ComponentClass, Decl(react.d.ts, 150, 5))
}
class MyComponent extends React.Component<ComponentProps, {}> {
>MyComponent : Symbol(MyComponent, Decl(file.tsx, 5, 1))
>React.Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
>ComponentProps : Symbol(ComponentProps, Decl(file.tsx, 1, 32))
render() {
>render : Symbol(MyComponent.render, Decl(file.tsx, 7, 63))
const { AnyComponent } = this.props;
>AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 9, 15))
>this.props : Symbol(React.Component.props, Decl(react.d.ts, 122, 30))
>this : Symbol(MyComponent, Decl(file.tsx, 5, 1))
>props : Symbol(React.Component.props, Decl(react.d.ts, 122, 30))
return (<AnyComponent />);
>AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 9, 15))
}
}
// Stateless Component As Props
<MyComponent AnyComponent={() => <button>test</button>}/>
>MyComponent : Symbol(MyComponent, Decl(file.tsx, 5, 1))
>AnyComponent : Symbol(ComponentProps.AnyComponent, Decl(file.tsx, 3, 26))
>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 913, 43))
>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 913, 43))
// Component Class as Props
class MyButtonComponent extends React.Component<{},{}> {
>MyButtonComponent : Symbol(MyButtonComponent, Decl(file.tsx, 15, 57))
>React.Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>Component : Symbol(React.Component, Decl(react.d.ts, 114, 55))
}
<MyComponent AnyComponent={MyButtonComponent} />
>MyComponent : Symbol(MyComponent, Decl(file.tsx, 5, 1))
>AnyComponent : Symbol(ComponentProps.AnyComponent, Decl(file.tsx, 3, 26))
>MyButtonComponent : Symbol(MyButtonComponent, Decl(file.tsx, 15, 57))
tests/baselines/reference/tsxUnionTypeComponent1.types
+64
View File
@@ -0,0 +1,64 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : typeof React
interface ComponentProps {
>ComponentProps : ComponentProps
AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
>React : any
>StatelessComponent : React.StatelessComponent<P>
>React : any
>ComponentClass : React.ComponentClass<P>
}
class MyComponent extends React.Component<ComponentProps, {}> {
>MyComponent : MyComponent
>React.Component : React.Component<ComponentProps, {}>
>React : typeof React
>Component : typeof React.Component
>ComponentProps : ComponentProps
render() {
>render : () => JSX.Element
const { AnyComponent } = this.props;
>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
>this.props : ComponentProps
>this : this
>props : ComponentProps
return (<AnyComponent />);
>(<AnyComponent />) : JSX.Element
><AnyComponent /> : JSX.Element
>AnyComponent : React.StatelessComponent<any> | React.ComponentClass<any>
}
}
// Stateless Component As Props
<MyComponent AnyComponent={() => <button>test</button>}/>
><MyComponent AnyComponent={() => <button>test</button>}/> : JSX.Element
>MyComponent : typeof MyComponent
>AnyComponent : any
>() => <button>test</button> : () => JSX.Element
><button>test</button> : JSX.Element
>button : any
>button : any
// Component Class as Props
class MyButtonComponent extends React.Component<{},{}> {
>MyButtonComponent : MyButtonComponent
>React.Component : React.Component<{}, {}>
>React : typeof React
>Component : typeof React.Component
}
<MyComponent AnyComponent={MyButtonComponent} />
><MyComponent AnyComponent={MyButtonComponent} /> : JSX.Element
>MyComponent : typeof MyComponent
>AnyComponent : any
>MyButtonComponent : typeof MyButtonComponent
tests/baselines/reference/tsxUnionTypeComponent2.errors.txt
+17
View File
@@ -0,0 +1,17 @@
tests/cases/conformance/jsx/file.tsx(8,2): error TS2604: JSX element type 'X' does not have any construct or call signatures.
==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
import React = require('react');
type Invalid1 = React.ComponentClass<any> | string;
const X: Invalid1 = "Should fail to construct";
<X />;
~
!!! error TS2604: JSX element type 'X' does not have any construct or call signatures.
tests/baselines/reference/tsxUnionTypeComponent2.js
+18
View File
@@ -0,0 +1,18 @@
//// [file.tsx]
import React = require('react');
type Invalid1 = React.ComponentClass<any> | string;
const X: Invalid1 = "Should fail to construct";
<X />;
//// [file.js]
"use strict";
var React = require('react');
var X = "Should fail to construct";
React.createElement(X, null);
tests/cases/conformance/jsx/tsxUnionTypeComponent1.tsx
+27
View File
@@ -0,0 +1,27 @@
// @filename: file.tsx
// @jsx: react
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface ComponentProps {
AnyComponent: React.StatelessComponent<any> | React.ComponentClass<any>;
}
class MyComponent extends React.Component<ComponentProps, {}> {
render() {
const { AnyComponent } = this.props;
return (<AnyComponent />);
}
}
// Stateless Component As Props
<MyComponent AnyComponent={() => <button>test</button>}/>
// Component Class as Props
class MyButtonComponent extends React.Component<{},{}> {
}
<MyComponent AnyComponent={MyButtonComponent} />
tests/cases/conformance/jsx/tsxUnionTypeComponent2.tsx
+14
View File
@@ -0,0 +1,14 @@
// @filename: file.tsx
// @jsx: react
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
type Invalid1 = React.ComponentClass<any> | string;
const X: Invalid1 = "Should fail to construct";
<X />;