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

背景

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

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

解决方式

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

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

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

原因

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

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

可用的 moduleResolution 选项有:

  • classic:TypeScript 最古老的模块解析模式,不幸的是,当 module 设置为 commonjsnode16 或 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 和 nodenextmodule 和 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

原文链接:https://juejin.cn/post/7358664464999088166 作者:码上有料

(0)
上一篇 2024年4月18日 上午10:53
下一篇 2024年4月18日 上午11:04

相关推荐

发表回复

登录后才能评论