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

Posted jimaww

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在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

以上是关于在react typescript项目中如何使用没有@type定义的npm包的主要内容,如果未能解决你的问题,请参考以下文章

深入浅出TypeScript- 在React项目中使用TypeScript

如何在 React 和 TypeScript 项目中使用 types.d.ts 文件

如何在带有 Typescript 的 React 项目中组织类型定义

如何在带有 typescript 项目的 react js 中使用 .env 文件?

如何在 React+Typescript 中使用微数据?

如何使用 ESLint 检查 React/Typescript 项目中的 prop 错误?