在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

原文地址:https://www.cnblogs.com/jimaww/p/10496487.html

时间: 2024-10-03 17:59:08

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

Angular6 + Typescript 项目中怎么引用包装到jquery里面的插件

Angular6 + Typescript项目中用到了一个包含到jquery里面的插件 fontIconPicker https://github.com/fontIconPicker/fontIconPicker https://codeb.it/fonticonpicker/ 首先根据github上面的readme 安装 jquery 和 fonticonpicker npm install [email protected] @fonticonpicker/fonticonpicker -

java框架-----spring框架------在自己的项目中如何用maven管理spring相关jar包

1.文章内容概述: spring框架是支持maven的,因为spring框架的所有模块打包而成的jar包以及spring所依赖的其他jar包都被存放了一份在maven的中央仓库中,如果你的项目使用maven进行管理,那么你就可以在你的项目中通过maven来引入你的项目所依赖的spring相关的jar包或其他依赖库. 2.spring框架中maven相关的东西: 概述:使用maven管理spring相关的jar包,需要在pom.xml中配置groupId.artifactId之类的东西,只有在po

vue-cli 项目中绝对路径引用的相关资源 npm run build 后 打开页面报404错误

在项目中.通过vue-cli 搭建的项目,npm run dev时,以绝对路径引用的相关资源在npm run build 后,页面打开报相关资源404错误: 解决方法如下: 打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可. 原文地址:https://www.cnblogs.com/xzma/p/9162584.html

组装者模式在React Native项目中的一个实战案例

前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模式? 就是在一个类中封装一些共有特性,然后使得在使用的组件中,可以动态的去添加一些属性或者行为,相比较于继承来说,组装者模式会更加的灵活. 实例演示 /** * AboutCommon.js * 组装者模式 模仿一些生命周期函数 */ export default class AboutCommon

在typeScript+vue项目中使用ref

因为vue项目是无法直接操作dom的,但是有时候开发需求迫使我们去操作dom. 两个办法,一个是很low的再引入jq,然后通过jq来操作,但是这样就失去了我们使用vue的意义, 可惜的是我曾经这样干过,而且当时觉得我就是个天才. 另一个就是添加ref属性,对ref进行操作. 好了完美解决. 很不巧,新项目用的是vue还是vue+typeScript的,直接,单纯的this.$refs.xxx不好用了,报错,识别不了,很尴尬. 经过不懈努力终于找到了在typeScript+vue(不要在意这两个前

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

转:如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美

在tomcat或许项目中引进最新版的C3P0的

一.JNDI(项目比较常用,最简单,与代码无相关) 1)在tomcat或许项目中引进最新版的C3P0的JAR包(我是用的是c3p0-0.9.2.1.jar) 假如发动时报类没有找到:Caused by: java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector, 则需求参加mchange-commons-java-0.2.3.4.jar. 2)修改tomcat中的数据源装备,如下: <Resource name="jdbc/

VS项目中使用Nuget还原包后编译生产还一直报错?

Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的,但是其他朋友加个一个项目,我获取最新后,编译始终报错,说是这个项目缺少Nuget包引用,可是我在编译时明明已经还原了该项目引用的nuget包,同时也手动就行了nuget的包还原都不行,百思不得其解.报错如下: 报错信息说是:本计算机上面缺少此项目Seagull2.YuanXin.WebApi引用的