背景
在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 作者：码上有料
