Closed
Description
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: