背景
在React、Ts项目中,引入tsx文件的React代码,出现下图所示ts错误。
解决方式
在ts配置文件中添加moduleResolution
配置选项即可。
{
"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
。
原文链接:https://juejin.cn/post/7358664464999088166 作者:码上有料