react+ts：类型“Element”的参数不能赋给类型“ReactNode”的参数。ts(2345)

背景

在React、Ts项目中，引入tsx文件的React代码，出现下图所示ts错误。

解决方式

在ts配置文件中添加moduleResolution配置选项即可。

json 复制代码

{
  "compilerOptions": {                              /* Specify what module 
    "moduleResolution": "node",                     /* 指定TypeScript如何从给定的模块说明符中查找文件。 */
  }
}

原因

如果没有为运行时模块解析算法的内置知识，TypeScript 将不知道要为某个文件导入分配什么类型。

moduleResolution选项指定宿主用于将模块说明符解析为文件的算法。

可用的 moduleResolution 选项有：

classic：TypeScript 最古老的模块解析模式，不幸的是，当 module 设置为 commonjs、node16 或 nodenext以外的任何值时，这是默认模式。它可能是为了为各种 RequireJS 配置提供尽力而为的解析。它不应该用于新项目（甚至不使用 RequireJS 或其他 AMD 模块加载器的旧项目），并且计划在 TypeScript 6.0 中弃用。
node10：以前称为 node，当 module 设置为 commonjs 时，这是不幸的默认值。这是早于 v12 的 Node.js 版本的一个非常好的模型，有时它是大多数打包程序如何进行模块解析的一个还算可以的近似。它支持从 node_modules查找包、加载目录 index.js 文件以及在相关模块说明符中省略 .js 扩展名。不过，由于 Node.js v12 为 ES 模块引入了不同的模块解析规则，因此它是现代版本 Node.js 的一个非常糟糕的模型。它不应该用于新项目。
node16：这是 --module node16 的对应项，默认情况下使用 module 设置进行设置。Node.js v12 及更高版本同时支持 ESM 和 CJS，每种都使用自己的模块解析算法。在 Node.js 中，导入语句和动态 import() 调用中的模块说明符不允许省略文件扩展名或 /index.js 后缀，而 require 调用中的模块说明符可以。此模块解析模式在必要时理解并强制执行此限制，如 --module node16 所设置的模块格式检测规则所确定。（对于 node16 和 nodenext、module 和 moduleResolution 是齐头并进的：将一个设置为 node16 或 nodenext，同时将另一个设置为其他值会产生不受支持的行为，并且将来可能会出现错误。）
nodenext：当前与 node16 相同，它是 --module nodenext 的对应项，并且默认使用 module 设置进行设置。它旨在成为一种前瞻性模式，支持新添加的 Node.js 模块解析功能。
bundler：Node.js v12 引入了一些用于导入 npm 包的新模块解析功能（package.json 的 "exports" 和 "imports" 字段），许多打包器采用了这些功能，但没有采用更严格的 ESM 导入规则。此模块解析模式为针对打包器的代码提供了基本算法。默认情况下它支持 package.json "exports" 和 "imports"，但可以配置为忽略它们。它需要将 module 设置为 esnext。