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

最近在用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