将ReactDomServer.renderToString与Typescript一起使用的正确方法是什么

Question

我正在开发一个可在服务器端进行渲染的Typescript应用程序，但我无法理解ReactDomServer.renderToString和ReactDom.hydrate的用法，尤其是他们必须接收的参数类型。

我发现了几个示例（使用JS），它们通过以下方式将JSX标记作为参数传递：

ReactDomServer.renderToString(<ExampleComponent exampleProp="anyValue" />);

但是当我在Typescript上尝试此操作时，出现以下错误：

将“ RegExp”类型转换为“ ExampleComponent”类型可能是一个错误，因为这两个类型都没有足够的重叠。如果这是故意的，请先将表达式转换为“未知”。

我可以通过在组件上调用React.createElement来使它起作用：

ReactDomServer.renderToString(
  React.createElement(ExampleComponent, {exampleProp: anyValue})
)

是否需要在要渲染的组件上调用React.createElement（如果是，为什么）？还是我这边的错误/错误配置？

Answer 1

我的问题是文件扩展名为.ts，为了使打字稿能够正确编译JSX，文件扩展名必须为.tsx。