Skip to content

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

Closed
@lxe

Description

@lxe

TypeScript Version: 3.3.3 - 4.0.5

Search Terms:

Typescript jsx comment any[] children

Code

Playground

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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already created

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions