Compilation failures with TypeScript 3.2

TypeScript 3.2 contains more stringent type checking for TSX (see Microsoft/TypeScript#27627). This change checks the return type of components against JSX.Element. Unfortunately this means it’s no longer possible to write all kinds of component functions that snabbdom-pragma’s createElement accepts (i.e. anything that returns the CircularChildren type).

This means that, with the following code,

function Comp1(args : any) {
    return <div></div>;
}

function Comp2(args : any) {
    return '';
}

function Comp3(args : any) {
    return ['test', <div></div>];
}

function Comp4(args : any) {
    return [<div></div>];
}

const node = <div className="test"><Comp1 arg="val"/><Comp2 arg="val"/><Comp3 arg="val"/><Comp4 arg="val"/></div>;

only Comp1 works because its return type is actually compatible with Snabbdom’s JSX.Element interface (which, essentially, is just VNode). The other components throw errors like these:

JSX element type '(string | Element)[]' is not a constructor function for JSX elements.

I’ve tried setting type Element = SnabbdomPragma.CircularChildren but this only fixes Comp2. Comp3 says:

error TS2605: JSX element type '(string | number | VNode | Children[])[]' is not a constructor function for JSX elements. Type '(string | number | VNode | Children[])[]' is not assignable to type 'VNode[]'. Type 'string | number | VNode | Children[]' is not assignable to type 'VNode'. Type 'string' is not assignable to type 'VNode'.

while Comp4 says:

error TS2605: JSX element type 'CircularChildren[]' is not a constructor function for JSX elements. Type 'CircularChildren[]' is not assignable to type 'VNode[]'. Type 'CircularChildren' is not assignable to type 'VNode'. Type 'string' is not assignable to type 'VNode'.

The only thing that works for the moment is not declaring JSX.Element (or setting it to any). Maybe @weswigham, whose patch the TypeScript 3.2 change was, has more insights.

Either way: could you remove the JSX.Element interface from snabbdom-pragma.d.ts as a workaround? I know this means less type checking of snabbdom-pragma stateless function components’ return types but it would get rid of the false negatives.

Swizz / snabbdom-pragma

Compilation failures with TypeScript 3.2 #40