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 设置为 commonjsnode16nodenext以外的任何值时,这是默认模式。它可能是为了为各种 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 所设置的 模块格式检测规则 所确定。(对于 node16nodenextmodulemoduleResolution 是齐头并进的:将一个设置为 node16nodenext,同时将另一个设置为其他值会产生不受支持的行为,并且将来可能会出现错误。)
  • nodenext:当前与 node16 相同,它是 --module nodenext 的对应项,并且默认使用 module 设置进行设置。它旨在成为一种前瞻性模式,支持新添加的 Node.js 模块解析功能。
  • bundler:Node.js v12 引入了一些用于导入 npm 包的新模块解析功能(package.json"exports""imports" 字段),许多打包器采用了这些功能,但没有采用更严格的 ESM 导入规则。此模块解析模式为针对打包器的代码提供了基本算法。默认情况下它支持 package.json "exports""imports",但可以配置为忽略它们。它需要将 module 设置为 esnext
相关推荐
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
Misha韩4 小时前
React Native 一些API详解
react native·react.js
小李飞飞砖4 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖4 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js