在react typescript项目中如何使用没有@type定义的npm包

Posted 2021-02-12 jimaww

最近在用react重构我们的Angularjs项目，我使用的是create react-app 构建的 使用typescript的react项目

其中遇到一个问题就是有的npm包比如: react-loadable 在npm上是没有@types/react-loadable的那么我们如何在符合TS语法的基础上引入这个包呢？

首先正常npm install react-loadable --save 然后在项目中找到react-app-env.d.ts 加上以下代码即可：

declare module ‘react-loadable‘ {
  const classes: any;
  export default classes;
}

然后正常引入即可：

import Loadable from ‘react-loadable‘;

如果你不知道 node_module里的react-loadable export 的是什么，你也懒得去node_module里看一眼

像这样引入也可以（但是不推荐）

import * as Loadable from ‘react-loadable‘;

 

关于：react-app-env.d.ts  文件的解释：https://juejin.im/post/5c6ad288e51d457fd6233821#heading-6

其实在项目中还有一个ts的types.d.ts文件但是我们已经是用create react-app 构建的typescript项目，所以改写react-app-env.d.ts文件就足够了。

关于 *.d.ts  声明文件的解释：https://ts.xcatliu.com/basics/declaration-files.html