Ionic开发文档

如何在TypeScript项目中引入JavaScript包

发布时间 2018-5-23 15:57:22   浏览量()   收藏(1)

一、一般方法

其实大家在引入js文件时可以先搜索下有没有开源库,直接npm 安装 ,皆大欢喜,这里介绍下没有开源库的几种解决办法

方法一:全局安装typings进行查找并用typings进行安装

1.npm install -g typings //全局安装typings

2.typings search xx.js

3.搜索到以后 npm install xx.js  然后 typings install xx.js

4.在ts 文件中引入时,import * as XX form 'xx.js'

方法二: 如果typings搜索不到文件,可以尝试用npm search 相关ts文件(必须是ts),然后进行安装

方法三: 如果以上两种办法都没有搜索到,那么我们就要自己手动加了

1.在app目录下建立plugin文件夹,建立相关js名称文件夹xx , 建立文件xx.d.ts 

xx.d.ts内容 declare xx: any

在www文件夹下建立plugin文件夹,建立xx文件夹,将xx.js放进xx文件夹内

在 index.html中引用

<script src = "plugin/xx/xx.js">

在相关ts文件中引用

///<refrence path="plugin/xx/xx.d.ts">

注意这里有///   是必须的  并且这句话需要放在ts页面的最顶端。

这样就ok啦 

二、操作步骤

[1]放置文件

       把引入的文件放到www下的assets目录下,这里引入的文件在重新编译过程中是不会被覆盖的,所以引入文件放到这里

[2]引入文件

        在index.html下引入文件,注意修改的是src目录下的index.html,不是www目录下的,如果修改成www下的,会被src下重新编译的index.html覆盖掉.

       举例引入jquery(注意:文件路径是assets/)

<script src="assets/jquery-1.7.2.min.js"></script>

[3]声明文件

        (1)在src目录下建一个services(名字随意)文件夹,新建文件jquery.d.ts,后缀是.d.ts,注意这个,名字随意

        (2)编辑该文件,写入(注意:这里的"$",其实用的是jquery的关键词,有时候引其他js的时候你不知道关键词是什么,没关系,请继续往下)

declare var $:any;

[4]页面使用

        (1)页面引入:(

               注意:第一句就是引入,,注意是"///" ,看你文件自己位置,我的页面ts是在src/pages/home/下;

                          第二个点,重要,引入这句话一定要放在ts文件内容最顶上,其他位置不起作用

          )

///<reference path="../../services/jquery.d.ts"/>  
import { Component } from '@angular/core';

        (2)页面使用$(function(){}),就能随意用,不会报错

[5]关键词选取问题


       引入你的js后,写入声明后,在ts中调用你引入的文件中相关逻辑的时候,看看什么对象报错了,就把该文件声明关键词设置为该对象

例:引了一份pinchzoom.js的文件,但是使用的时候我这里RTP报错了,那么就是说该文件需要的关键词有RTP,那么我在编写它的声明文件.d.ts的时候就要把它写成   declare var RTP:any;就可以了.这类引入第三方js一般封装好对象应该只有一个,多个的话大家自行研究哈


广告会让浏览体验不好,可这是网站的唯一收入,请点击下面的百度广告,支持老高的开源行动吧!