You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import*asReactfrom'react';declarevarSomeComponent: React.FC<{children?: React.ReactElement}>;functionGood(){// Yields React.createElement(SomeComponent, null, React.createElement("div", null)));// This satisfies TypeScriptreturn<SomeComponent><div/></SomeComponent>}functionBad(){// 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.
TypeScript Version: 3.3.3 - 4.0.5
Search Terms:
Typescript jsx comment any[] children
Code
Playground
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 signatureReact.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 satisfiesReact.ReactElement
.Playground Link: Link
Related Issues:
// @ts-ignore
#27552 (comment)The text was updated successfully, but these errors were encountered: