diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.js b/tests/baselines/reference/checkJsxChildrenProperty1.js new file mode 100644 index 00000000000..44c1ca8a729 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty1.js @@ -0,0 +1,39 @@ +//// [file.tsx] +import React = require('react'); + +interface Prop { + a: number, + b: string, + children: string | JSX.Element +} + +function Comp(p: Prop) { + return
{p.b}
; +} + +// OK +let k = ; +let k1 = + + hi hi hi! + ; +let k2 = + +
hi hi hi!
+
; + +//// [file.jsx] +"use strict"; +exports.__esModule = true; +var React = require("react"); +function Comp(p) { + return
{p.b}
; +} +// OK +var k = ; +var k1 = + hi hi hi! + ; +var k2 = +
hi hi hi!
+
; diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.symbols b/tests/baselines/reference/checkJsxChildrenProperty1.symbols new file mode 100644 index 00000000000..39b189b7eb4 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty1.symbols @@ -0,0 +1,67 @@ +=== 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)) + + children: string | JSX.Element +>children : Symbol(Prop.children, Decl(file.tsx, 4, 14)) +>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1)) +>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27)) +} + +function Comp(p: Prop) { +>Comp : Symbol(Comp, Decl(file.tsx, 6, 1)) +>p : Symbol(p, Decl(file.tsx, 8, 14)) +>Prop : Symbol(Prop, Decl(file.tsx, 0, 32)) + + return
{p.b}
; +>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45)) +>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14)) +>p : Symbol(p, Decl(file.tsx, 8, 14)) +>b : Symbol(Prop.b, Decl(file.tsx, 3, 14)) +>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45)) +} + +// OK +let k = ; +>k : Symbol(k, Decl(file.tsx, 13, 3)) +>Comp : Symbol(Comp, Decl(file.tsx, 6, 1)) +>a : Symbol(a, Decl(file.tsx, 13, 13)) +>b : Symbol(b, Decl(file.tsx, 13, 20)) +>children : Symbol(children, Decl(file.tsx, 13, 27)) + +let k1 = +>k1 : Symbol(k1, Decl(file.tsx, 14, 3)) + + +>Comp : Symbol(Comp, Decl(file.tsx, 6, 1)) +>a : Symbol(a, Decl(file.tsx, 15, 9)) +>b : Symbol(b, Decl(file.tsx, 15, 16)) + + hi hi hi! + ; +>Comp : Symbol(Comp, Decl(file.tsx, 6, 1)) + +let k2 = +>k2 : Symbol(k2, Decl(file.tsx, 18, 3)) + + +>Comp : Symbol(Comp, Decl(file.tsx, 6, 1)) +>a : Symbol(a, Decl(file.tsx, 19, 9)) +>b : Symbol(b, Decl(file.tsx, 19, 16)) + +
hi hi hi!
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45)) +>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45)) + +
; +>Comp : Symbol(Comp, Decl(file.tsx, 6, 1)) + diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.types b/tests/baselines/reference/checkJsxChildrenProperty1.types new file mode 100644 index 00000000000..821f95d9ae7 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty1.types @@ -0,0 +1,75 @@ +=== 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 + + children: string | JSX.Element +>children : string | JSX.Element +>JSX : any +>Element : JSX.Element +} + +function Comp(p: Prop) { +>Comp : (p: Prop) => JSX.Element +>p : Prop +>Prop : Prop + + return
{p.b}
; +>
{p.b}
: JSX.Element +>div : any +>p.b : string +>p : Prop +>b : string +>div : any +} + +// OK +let k = ; +>k : JSX.Element +> : JSX.Element +>Comp : (p: Prop) => JSX.Element +>a : number +>10 : 10 +>b : string +>children : string + +let k1 = +>k1 : JSX.Element + + +> hi hi hi! : JSX.Element +>Comp : (p: Prop) => JSX.Element +>a : number +>10 : 10 +>b : string + + hi hi hi! + ; +>Comp : (p: Prop) => JSX.Element + +let k2 = +>k2 : JSX.Element + + +>
hi hi hi!
: JSX.Element +>Comp : (p: Prop) => JSX.Element +>a : number +>10 : 10 +>b : string + +
hi hi hi!
+>
hi hi hi!
: JSX.Element +>div : any +>div : any + +
; +>Comp : (p: Prop) => JSX.Element + diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt new file mode 100644 index 00000000000..d3639d6783e --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt @@ -0,0 +1,109 @@ +tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'. + Property 'children' is missing in type '{ a: 10; b: "hi"; }'. +tests/cases/conformance/jsx/file.tsx(17,11): error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten. +tests/cases/conformance/jsx/file.tsx(23,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'. + Types of property 'children' are incompatible. + Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'. + Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'. + Property 'type' is missing in type '(Element | ((name: string) => Element))[]'. +tests/cases/conformance/jsx/file.tsx(29,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'. + Types of property 'children' are incompatible. + Type '(Element | 1000000)[]' is not assignable to type 'string | Element'. + Type '(Element | 1000000)[]' is not assignable to type 'Element'. + Property 'type' is missing in type '(Element | 1000000)[]'. +tests/cases/conformance/jsx/file.tsx(35,11): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'. + Types of property 'children' are incompatible. + Type '(string | Element)[]' is not assignable to type 'string | Element'. + Type '(string | Element)[]' is not assignable to type 'Element'. + Property 'type' is missing in type '(string | Element)[]'. +tests/cases/conformance/jsx/file.tsx(41,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'. + Types of property 'children' are incompatible. + Type 'Element[]' is not assignable to type 'string | Element'. + Type 'Element[]' is not assignable to type 'Element'. + Property 'type' is missing in type 'Element[]'. + + +==== tests/cases/conformance/jsx/file.tsx (6 errors) ==== + import React = require('react'); + + interface Prop { + a: number, + b: string, + children: string | JSX.Element + } + + function Comp(p: Prop) { + return
{p.b}
; + } + + // Error: missing children + let k = ; + ~~~~~~~~~~~~~ +!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'. +!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'. +!!! error TS2322: Property 'children' is missing in type '{ a: 10; b: "hi"; }'. + + let k1 = + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +!!! error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten. + hi hi hi! + ; + + // Error: incorrect type + let k2 = + + ~~~~~~~~~~~~~ +!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. +!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'. +!!! error TS2322: Types of property 'children' are incompatible. +!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'. +!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'. +!!! error TS2322: Property 'type' is missing in type '(Element | ((name: string) => Element))[]'. +
My Div
+ {(name: string) =>
My name {name}
} +
; + + let k3 = + + ~~~~~~~~~~~~~ +!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. +!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'. +!!! error TS2322: Types of property 'children' are incompatible. +!!! error TS2322: Type '(Element | 1000000)[]' is not assignable to type 'string | Element'. +!!! error TS2322: Type '(Element | 1000000)[]' is not assignable to type 'Element'. +!!! error TS2322: Property 'type' is missing in type '(Element | 1000000)[]'. +
My Div
+ {1000000} +
; + + let k4 = + + ~~~~~~~~~~~~~ +!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. +!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'. +!!! error TS2322: Types of property 'children' are incompatible. +!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'string | Element'. +!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element'. +!!! error TS2322: Property 'type' is missing in type '(string | Element)[]'. +
My Div
+ hi hi hi! +
; + + let k5 = + + ~~~~~~~~~~~~~ +!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'. +!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'. +!!! error TS2322: Types of property 'children' are incompatible. +!!! error TS2322: Type 'Element[]' is not assignable to type 'string | Element'. +!!! error TS2322: Type 'Element[]' is not assignable to type 'Element'. +!!! error TS2322: Property 'type' is missing in type 'Element[]'. +
My Div
+
My Div
+
; \ No newline at end of file diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.js b/tests/baselines/reference/checkJsxChildrenProperty2.js new file mode 100644 index 00000000000..3de7333fd6d --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty2.js @@ -0,0 +1,75 @@ +//// [file.tsx] +import React = require('react'); + +interface Prop { + a: number, + b: string, + children: string | JSX.Element +} + +function Comp(p: Prop) { + return
{p.b}
; +} + +// Error: missing children +let k = ; + +let k1 = + + hi hi hi! + ; + +// Error: incorrect type +let k2 = + +
My Div
+ {(name: string) =>
My name {name}
} +
; + +let k3 = + +
My Div
+ {1000000} +
; + +let k4 = + +
My Div
+ hi hi hi! +
; + +let k5 = + +
My Div
+
My Div
+
; + +//// [file.jsx] +"use strict"; +exports.__esModule = true; +var React = require("react"); +function Comp(p) { + return
{p.b}
; +} +// Error: missing children +var k = ; +var k1 = + hi hi hi! + ; +// Error: incorrect type +var k2 = +
My Div
+ {function (name) { return
My name {name}
; }} +
; +var k3 = +
My Div
+ {1000000} +
; +var k4 = +
My Div
+ hi hi hi! +
; +var k5 = +
My Div
+
My Div
+
; diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.js b/tests/baselines/reference/checkJsxChildrenProperty3.js new file mode 100644 index 00000000000..49247925523 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty3.js @@ -0,0 +1,79 @@ +//// [file.tsx] +import React = require('react'); + +interface IUser { + Name: string; +} + +interface IFetchUserProps { + children: (user: IUser) => JSX.Element; +} + +class FetchUser extends React.Component { + render() { + return this.state + ? this.props.children(this.state.result) + : null; + } +} + +// Ok +function UserName0() { + return ( + + { user => ( +

{ user.Name }

+ ) } +
+ ); +} + +function UserName1() { + return ( + + + { user => ( +

{ user.Name }

+ ) } +
+ ); +} + +//// [file.jsx] +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +exports.__esModule = true; +var React = require("react"); +var FetchUser = (function (_super) { + __extends(FetchUser, _super); + function FetchUser() { + return _super !== null && _super.apply(this, arguments) || this; + } + FetchUser.prototype.render = function () { + return this.state + ? this.props.children(this.state.result) + : null; + }; + return FetchUser; +}(React.Component)); +// Ok +function UserName0() { + return ( + {function (user) { return (

{user.Name}

); }} +
); +} +function UserName1() { + return ( + + {function (user) { return (

{user.Name}

); }} +
); +} diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.symbols b/tests/baselines/reference/checkJsxChildrenProperty3.symbols new file mode 100644 index 00000000000..2a1aca621e9 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty3.symbols @@ -0,0 +1,99 @@ +=== tests/cases/conformance/jsx/file.tsx === +import React = require('react'); +>React : Symbol(React, Decl(file.tsx, 0, 0)) + +interface IUser { +>IUser : Symbol(IUser, Decl(file.tsx, 0, 32)) + + Name: string; +>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17)) +} + +interface IFetchUserProps { +>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1)) + + children: (user: IUser) => JSX.Element; +>children : Symbol(IFetchUserProps.children, Decl(file.tsx, 6, 27)) +>user : Symbol(user, Decl(file.tsx, 7, 15)) +>IUser : Symbol(IUser, Decl(file.tsx, 0, 32)) +>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1)) +>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27)) +} + +class FetchUser extends React.Component { +>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1)) +>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)) +>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1)) + + render() { +>render : Symbol(FetchUser.render, Decl(file.tsx, 10, 63)) + + return this.state +>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44)) +>this : Symbol(FetchUser, Decl(file.tsx, 8, 1)) +>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44)) + + ? this.props.children(this.state.result) +>this.props.children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20)) +>this.props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37)) +>this : Symbol(FetchUser, Decl(file.tsx, 8, 1)) +>props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37)) +>children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20)) +>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44)) +>this : Symbol(FetchUser, Decl(file.tsx, 8, 1)) +>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44)) + + : null; + } +} + +// Ok +function UserName0() { +>UserName0 : Symbol(UserName0, Decl(file.tsx, 16, 1)) + + return ( + +>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1)) + + { user => ( +>user : Symbol(user, Decl(file.tsx, 22, 13)) + +

{ user.Name }

+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47)) +>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17)) +>user : Symbol(user, Decl(file.tsx, 22, 13)) +>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17)) +>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47)) + + ) } +
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1)) + + ); +} + +function UserName1() { +>UserName1 : Symbol(UserName1, Decl(file.tsx, 27, 1)) + + return ( + +>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1)) + + { user => ( +>user : Symbol(user, Decl(file.tsx, 33, 13)) + +

{ user.Name }

+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47)) +>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17)) +>user : Symbol(user, Decl(file.tsx, 33, 13)) +>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17)) +>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47)) + + ) } +
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1)) + + ); +} diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.types b/tests/baselines/reference/checkJsxChildrenProperty3.types new file mode 100644 index 00000000000..7fbb91bee00 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty3.types @@ -0,0 +1,116 @@ +=== tests/cases/conformance/jsx/file.tsx === +import React = require('react'); +>React : typeof React + +interface IUser { +>IUser : IUser + + Name: string; +>Name : string +} + +interface IFetchUserProps { +>IFetchUserProps : IFetchUserProps + + children: (user: IUser) => JSX.Element; +>children : (user: IUser) => JSX.Element +>user : IUser +>IUser : IUser +>JSX : any +>Element : JSX.Element +} + +class FetchUser extends React.Component { +>FetchUser : FetchUser +>React.Component : React.Component +>React : typeof React +>Component : typeof React.Component +>IFetchUserProps : IFetchUserProps + + render() { +>render : () => JSX.Element + + return this.state +>this.state ? this.props.children(this.state.result) : null : JSX.Element +>this.state : any +>this : this +>state : any + + ? this.props.children(this.state.result) +>this.props.children(this.state.result) : JSX.Element +>this.props.children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement)[]) +>this.props : IFetchUserProps & { children?: React.ReactNode; } +>this : this +>props : IFetchUserProps & { children?: React.ReactNode; } +>children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement)[]) +>this.state.result : any +>this.state : any +>this : this +>state : any +>result : any + + : null; +>null : null + } +} + +// Ok +function UserName0() { +>UserName0 : () => JSX.Element + + return ( +>( { user => (

{ user.Name }

) }
) : JSX.Element + + +> { user => (

{ user.Name }

) }
: JSX.Element +>FetchUser : typeof FetchUser + + { user => ( +>user => (

{ user.Name }

) : (user: IUser) => JSX.Element +>user : IUser +>(

{ user.Name }

) : JSX.Element + +

{ user.Name }

+>

{ user.Name }

: JSX.Element +>h1 : any +>user.Name : string +>user : IUser +>Name : string +>h1 : any + + ) } +
+>FetchUser : typeof FetchUser + + ); +} + +function UserName1() { +>UserName1 : () => JSX.Element + + return ( +>( { user => (

{ user.Name }

) }
) : JSX.Element + + +> { user => (

{ user.Name }

) }
: JSX.Element +>FetchUser : typeof FetchUser + + { user => ( +>user => (

{ user.Name }

) : (user: IUser) => JSX.Element +>user : IUser +>(

{ user.Name }

) : JSX.Element + +

{ user.Name }

+>

{ user.Name }

: JSX.Element +>h1 : any +>user.Name : string +>user : IUser +>Name : string +>h1 : any + + ) } +
+>FetchUser : typeof FetchUser + + ); +} diff --git a/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt new file mode 100644 index 00000000000..d12c557102c --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt @@ -0,0 +1,61 @@ +tests/cases/conformance/jsx/file.tsx(24,28): error TS2339: Property 'NAme' does not exist on type 'IUser'. +tests/cases/conformance/jsx/file.tsx(32,9): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & IFetchUserProps & { children?: ReactNode; }'. + Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'. + Types of property 'children' are incompatible. + Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'. + Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'. + + +==== tests/cases/conformance/jsx/file.tsx (2 errors) ==== + import React = require('react'); + + interface IUser { + Name: string; + } + + interface IFetchUserProps { + children: (user: IUser) => JSX.Element; + } + + class FetchUser extends React.Component { + render() { + return this.state + ? this.props.children(this.state.result) + : null; + } + } + + // Error + function UserName() { + return ( + + { user => ( +

{ user.NAme }

+ ~~~~ +!!! error TS2339: Property 'NAme' does not exist on type 'IUser'. + ) } +
+ ); + } + + function UserName1() { + return ( + + ~~~~~~~~~~~ +!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & IFetchUserProps & { children?: ReactNode; }'. +!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'. +!!! error TS2322: Types of property 'children' are incompatible. +!!! error TS2322: Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'. +!!! error TS2322: Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'. + + + + { user => ( +

{ user.Name }

+ ) } + { user => ( +

{ user.Name }

+ ) } +
+ ); + } \ No newline at end of file diff --git a/tests/baselines/reference/checkJsxChildrenProperty4.js b/tests/baselines/reference/checkJsxChildrenProperty4.js new file mode 100644 index 00000000000..d163ffb0f41 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty4.js @@ -0,0 +1,87 @@ +//// [file.tsx] +import React = require('react'); + +interface IUser { + Name: string; +} + +interface IFetchUserProps { + children: (user: IUser) => JSX.Element; +} + +class FetchUser extends React.Component { + render() { + return this.state + ? this.props.children(this.state.result) + : null; + } +} + +// Error +function UserName() { + return ( + + { user => ( +

{ user.NAme }

+ ) } +
+ ); +} + +function UserName1() { + return ( + + + + + { user => ( +

{ user.Name }

+ ) } + { user => ( +

{ user.Name }

+ ) } +
+ ); +} + +//// [file.jsx] +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +exports.__esModule = true; +var React = require("react"); +var FetchUser = (function (_super) { + __extends(FetchUser, _super); + function FetchUser() { + return _super !== null && _super.apply(this, arguments) || this; + } + FetchUser.prototype.render = function () { + return this.state + ? this.props.children(this.state.result) + : null; + }; + return FetchUser; +}(React.Component)); +// Error +function UserName() { + return ( + {function (user) { return (

{user.NAme}

); }} +
); +} +function UserName1() { + return ( + + + + {function (user) { return (

{user.Name}

); }} + {function (user) { return (

{user.Name}

); }} +
); +} diff --git a/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt new file mode 100644 index 00000000000..1890bc732d1 --- /dev/null +++ b/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt @@ -0,0 +1,62 @@ +tests/cases/conformance/jsx/file.tsx(20,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'. + Property 'children' is missing in type '{ a: 10; b: "hi"; }'. +tests/cases/conformance/jsx/file.tsx(24,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'. + Types of property 'children' are incompatible. + Type 'Element' is not assignable to type 'Button'. + Property 'render' is missing in type 'Element'. +tests/cases/conformance/jsx/file.tsx(28,11): error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'IntrinsicAttributes & Prop'. + Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'Prop'. + Types of property 'children' are incompatible. + Type 'typeof Button' is not assignable to type 'Button'. + Property 'render' is missing in type 'typeof Button'. + + +==== tests/cases/conformance/jsx/file.tsx (3 errors) ==== + import React = require('react'); + + interface Prop { + a: number, + b: string, + children: Button; + } + + class Button extends React.Component { + render() { + return (
My Button
) + } + } + + function Comp(p: Prop) { + return
{p.b}
; + } + + // Error: no children specified + let k = ; + ~~~~~~~~~~~~~ +!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'. +!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'. +!!! error TS2322: Property 'children' is missing in type '{ a: 10; b: "hi"; }'. + + // Error: JSX.element is not the same as JSX.ElementClass + let k1 = + + ~~~~~~~~~~~~~ +!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'. +!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'. +!!! error TS2322: Types of property 'children' are incompatible. +!!! error TS2322: Type 'Element' is not assignable to type 'Button'. +!!! error TS2322: Property 'render' is missing in type 'Element'. +