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 --save

然后看到ES6中的使用方法

import jQuery from ‘jquery‘;
import initFontIconPicker from ‘@fonticonpicker/fonticonpicker‘;

// Initiate the jQuery plugin
initFontIconPicker( jQuery );

jQuery( ‘.selector‘ ).fontIconPicker( {
    // Options
} );

在编译时, 首先会得到如下错误

ERROR in error TS2688: Cannot find type definition file for ‘jquery‘.

可以看到是 TSxxx 的错误,也就是说ts识别不到jquery;因此想到安装 @types/jquery

 npm install @types/jquery --save-dev

此时,如果你的tsconfig.json里面配置了"types"属性,那么你需要将jquery加入到列表里面,以供 全局使用。当然,如果你使用的是import导入jquery,不加也是没有关系的。但建议加上

// tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "types": ["jquery", "node"],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

然后再次启动项目 npm start,发现错误信息变了, 但依旧是TSxxx的error;

ERROR in src/app/components/dashboard/dashboard.component.ts(29,26): error TS2339: Property ‘fontIconPicker‘ does not exist on type ‘JQuery<HTMLElement>

也就是说,现在编译器可以识别到jquery了,但是在jquery方法里面找不到 fontIconPicker. 根据上面的原理,我们也可以知道是declaration的问题,我们需要declaration告诉ts编译器 fontIconPicker是jquery里面的方法。通常的写法如下(当然也需要看该方法的使用)

//   src/typings.d.tsinterface JQuery {
    fontIconPicker(options?: any) : any;
}

之后,再次启动项目,发现成功启动,大功告成。

总结: 如果引入一个js库,但typescript编辑器识别不了,首先应该想到查看该库是否有typings file; 如果有,那么万事大吉,直接安装即可;如果没有,那我们就需要将其declare在 xxx.d.ts文件里面。通常是在src下面的typings.d.ts;编辑器在编译时会自动寻找typings.d.ts文件

原文地址:https://www.cnblogs.com/juliazhang/p/10103985.html

时间: 2024-10-31 01:20:45

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

转 mvc项目中,解决引用jquery文件后智能提示失效的办法

mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常会引用jquery, 但是由于路由的关系,最终访问页面的地址相对js文件来说,是不固定的. 为了在view中能够引用到jquery文件,我们通常都是用如下的代码 <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")

在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 modu

androidstudio导入外部库文件,以及将项目中module引用依赖

一:导入如百度地图等的外部类. 步骤:1.首先 将androidstudio项目显示切换到 project 状态显示项目 2.然后添加.jar文件,将所有的.jar文件放入libs文件夹内(libs文件夹就在项目文件夹下),然后在引入的.jar文件上右键然后点击 Add As Library... OK jar文件引入. 3.添加.so文件,在项目下的src目录下的main目录下新建jniLibs文件夹,然后将so文件连带着他外面的文件夹整个复制到jniLibs文件夹下(注意:so文件不能直接存

BIZTALK项目中WEB引用WEBSERVICES服务时候报错

最近工作中需要完成通过BIZTALK完成调用WEBLOGIC发布的WebServices服务,环境搭建好后,打开VS开发工具新建一个BIZTALK项目,添加WEB引用将对方发布的地址拷贝上去,可以正常浏览到,然后点击添加引用按钮,这个时候意外发生了,Visual Studio 报了个错误,弹出了个对话框见下图 开始觉得很奇怪,然后我新建了一个WINFORM程序,添加WEB引用这个时候居然正常引用上了,看来是BIZTALK的问题,我在网上也查了一下相关资料,一种我认为是BIZTALK对WEBSER

纯AS3项目中如何引用fl包中的类

fl包在Flash IDE中是独立的类库,在Flex中是无法直接引用的,那么如果Flex想要使用Flash IDE中fl包该怎么办呢? 需要在Flash IDE安装路径下,找到下面的flash.swc文件添加到Flex项目的libs中 C:\Program Files\Adobe\Adobe Flash CC 2015\Common\Configuration\ActionScript 3.0\libs\flash.swc 或者在文件 C:\Program Files\Adobe\Adobe F

vue项目中正确引用jquery

1.安装jquery依赖 npm install jquery --save 2.修改两处配置文件 a.引入webpack b.配置jquery插件 3.在页面中使用jquery 完毕! 原文地址:https://www.cnblogs.com/lewis-messi/p/8375921.html

Java并发编程:Callable、Future和FutureTask及在项目中的引用

在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果. 如果需要获取执行结果,就必须通过共享变量或者使用线程通信的方式来达到效果,这样使用起来就比较麻烦. 而自从Java 1.5开始,就提供了Callable和Future,通过它们可以在任务执行完毕之后得到任务执行结果. 今天我们就来讨论一下Callable.Future和FutureTask三个类的使用方法.以下是本文的目录

多线程在项目中的引用(CountDownLatch)

<bean id="exportThreadPoolExecutor" class="org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor"> <property name="corePoolSize" value="5" /> <property name="maxPoolSize" value=&q

在项目中使用TypeScript

新版本的Visual Studio对TypeScript已经有了很好的支持,我们可以直接添加TypeScript文件到项目中,IDE会在编写TypeScript代码的同时自动生成js文件到ts文件的同级目录下(注意只是生成,需要手动添加到项目里面来). 然而在TypeScript中使用项目中已有的类库例如jQuery,则需要添加声明文件(*.d.ts)至项目目录中,否则IntelliSense是无法正常工作的. 除了自己编写声明文件以外,网上也有开源的项目例如definitelytyped,提供