是否可以阻止 JSX 注释添加"子"元素，这可能会破坏类型？

Question

假设我有这样的第三方库：

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

其中children被定义为React.ReactElement，我不能改变这个事实。

现在，假设我使用它，其中有一个组件<MyComponent />，它恰好生成一个类型错误，我希望暂时抑制这个错误：

<SomeComponentFromLibrary>
{/* @ts-expect-error */}
<MyComponent />
</SomeComponentFromLibrary>

这在SomeComponentFromLibrary的children中创建了两个项(注释{}和<MyComponent(，而SomeComponentFromLibrary的类型定义只需要一个子项，从而产生以下结果：

Type '{ children: any[]; }' is not assignable to type '{ children?: ReactElement.... }'.

是否可以在~~JSX中使用typescript@ts-注释(好吧，或任何其他注释(而不创建实际的子项？~~

编辑：

看起来当我添加注释时，它不会更改生成的JavaScript((React.createElement(SomeComponentFromLibrary, null, React.createElement(MyComponent, null))))——但出于某种原因，TypeScript仍然会抱怨(children就是any[](。我认为这可能是TS中的一个错误——也许它对JSX的解析不同？

Answer 1

Typescript注释指令对JSX不是很友好。但你绝对可以让它发挥作用。

给它一个孩子，用大括号{ }，并用大括号注释。

<SomeComponentFromLibrary>
{/* @ts-expect-error */
<MyComponent />
}
</SomeComponentFromLibrary>

游乐场

---

此外，旁注：SomeComponentFromLibrary的打字可能只是错误。在我见过的几乎所有情况下，children都应该被键入为React.ReactNode。当您这样键入这个函数时，它现在的工作方式与您期望的完全一样。

所以我可能会为这个库创建一个拉请求来解决这个问题。

Answer 2

看起来这是一个错误：https://github.com/microsoft/TypeScript/issues/41125

它固定在这里：https://github.com/microsoft/TypeScript/pull/41166应在4.1或4.2 中发布