Typescript: Adding a jsx comment causes TypeScript to identify children type as any[], even though generated javascript doesn't change

Created on 4 Nov 2020 · 4Comments · Source: microsoft/TypeScript

TypeScript Version: 3.3.3 - 4.0.5

Search Terms:

Typescript jsx comment any[] children

Code

import * as React from 'react';

declare var SomeComponent: React.FC<{
    children?: React.ReactElement
}>;

function Good () {
    // Yields React.createElement(SomeComponent, null, React.createElement("div", null)));
    // This satisfies TypeScript
    return <SomeComponent>
        <div />
    </SomeComponent>
}

function Bad () {
    // Still yields React.createElement(SomeComponent, null, React.createElement("div", null)));
    // This does NOT satisfy TypeScript type checking:
    // Type '{ children: any[]; }' is not assignable to type '{ children?: ReactElement<...'.
    return <SomeComponent>
        {/* Comment */}
        <div />
    </SomeComponent>
}

Expected behavior:

The case without a JSX comment and the case with a comment both yield the same JavaScript (e.g. the comment does not count as an extra child). TypeScript should understand that the type of <div /> matches the expected signature React.ReactElement

Actual behavior:

However, when the JSX comment is present, even though the resulting JS is the same, TypeScript now assumes the type to be any[] which no longer satisfies React.ReactElement.

Playground Link: Link

Related Issues:

Duplicate

Source