Better errors for JSX children

[DanielRosenwasser]

Today, error messages on JSX children are reported in a broad way - the type checker relies on reporting using the effective props given against the expected props.

import * as React from "react";

interface Props {
  children: (x: number) => string;
}

export function Blah(props: Props) {
  return <></>;
}

var a = <Blah>
  {x => x}
</Blah>

// ERROR:
// Type '{ children: (x: number) => number; }' is not assignable to type 'Props'.
//   Types of property 'children' are incompatible.
//     Type '(x: number) => number' is not assignable to type '(x: number) => string'.
//       Type 'number' is not assignable to type 'string'.

Instead, much like we report on individual elements of an array literal, we can try to report errors on individual child elements. Here's a few examples where we can specialize:

import * as React from "react";

interface Props {
  children: (x: number) => string;
}

export function Blah(props: Props) {
  return <></>;
}

// Incompatible child.
var a = <Blah>
  {x => x}
</Blah>

// Blah components don't accept text as child elements
var a = <Blah>
  Hello unexpected text!
</Blah>

// Blah components don't accept multiple children.
var a = <Blah>
  {x => "" + x}
  {x => "" + x}
</Blah>

[weswigham]

Uhhhh @DanielRosenwasser we may want to revise some of our jsx children checking rules while we update this. Some stuff we do seems real strange.

[DanielRosenwasser]

Oh... uh, good! That sounds non-ominous.