React项目从Javascript到Typescript的迁移经验总结

出现这个原因是因为你的typescript配置文件tsconfig.json中的module参数设置不对，两种情况会导致这个问题：

• module设置成了“commonjs”
• target设置"ES5"但是并未设置module（当target不为“ES6”时，module默认为“commonjs”）

解决这个办法就是把module设置为“esNext”便可解决这个问题。

{  
    "compilerOptions":{  
        "module":"esNext"  
    }  
}  

可能会有小伙们说设置成“ES6”或者“ES2015”也是可以的，至于我为什么选择“esNext”而不是“ES6”或者“ES2015”，主要原因是设置成“ES6”或者“ES2015”之后，就不能动态导入了，因为项目使用了react-loadable这个包，要是设置成“ES6”或者“ES2015”的话，会报如下这个错误：

typescript提示我们需要设置成“commonjs”或者“ESNext”才可动态导入，所以保险起见，我是建议大家设置成ESNext。完成之后我们的页面就可以正常显示了。

说到module参数，这里要再多提一嘴说一下moduleResolution这个参数，它决定着typescript如何处理模块。当我们把module设置成“esNext”时，是可以不用管moduleResolution这个参数，但是大家项目里要是设置成“ES6”的话，那就要设置一下了。先看一下moduleResolution默认规则：

module === "AMD" or "System" or "ES6" ? "Classic" : "Node" 

当我们module设置为“ES6”时，此时moduleResolution默认是“Classic”，而我们需要的是“Node”。为什么要选择“node”,主要是因为node的模块解析规则更符合我们要求，解析速度会更快，至于详情的介绍，可以参考Typescript的文档。

https://www.tslang.cn/docs/ha...

同样为了保险起见，我是建议大家强行将moduleResolution设置为“node”。

总结

以上就是我自己在迁移过程中遇到的问题，可能无法覆盖大家在迁移过程中所遇到的问题，如果出现我上面没有涉及的报错，欢迎大家在评论区告诉我，我会尽可能地完善这篇文章。最后再强调一下，本篇文章仅仅只是介绍了我个人在迁移至typescript的经验总结，并未完全覆盖tsconfig.json的所有配置项，文章未涉及到的配置项，还需大家多花点时间看看typescript的文档。最后附上我已迁移到typescript的项目的地址：

项目地址： https://github.com/ruichengpi...

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!