原文發(fā)表于我的技術(shù)博客本文分享了在Ionic2 TypeScript 項(xiàng)目中導(dǎo)入第三方 JS 庫(kù)的方法供參考。原文發(fā)表于我的技術(shù)博客1. Typings 的方式因在 TypeScript 中引用之前的 JS 庫(kù)還需要引入對(duì)應(yīng)的類型定義也就是 .d.ts 文件。對(duì)于一些流行的 JS 庫(kù)相應(yīng)地有了一個(gè) Typings 庫(kù)。Typings 庫(kù)的作用就是將一些現(xiàn)有的 JS 庫(kù)生成好了對(duì)應(yīng)的定義文件可以通過(guò) Typings 直接加載到項(xiàng)目中。詳細(xì)可見(jiàn) Typings for NPM Packages 。2. 其他第三方 JS 庫(kù)的引用這里以國(guó)內(nèi)的百度地圖庫(kù)作為示例進(jìn)行說(shuō)明。百度地圖在 TypeScript 中是不存在的所以本文就看看如何在 Ionic2 的 TypeScript 項(xiàng)目中引用。3. 項(xiàng)目中引用 JS 庫(kù)和一般的引用 JS 庫(kù)一樣直接在項(xiàng)目的 index.html 中引用即可。這里申請(qǐng)好百度地圖的 key 并引入百度地圖的 JS SDK 文件。4. 全局對(duì)應(yīng)的定義與使用在引用了百度地圖 SDK 后在 console 中發(fā)現(xiàn)已經(jīng)可以讀取到百度地圖中的全局參數(shù)定義了。那么只需要在對(duì)應(yīng)的 TS 文件中定義一個(gè)參數(shù)即可。{% codeblock lang:js%}declare var BMap;{% endcodeblock %}定義好后在文件中就可以直接使用百度地圖 JS SDK 的所有功能了。{% codeblock lang:js%}import {Component, ViewChild, ElementRef} from angular/core;import {NavController} from ionic-angular;declare var BMap;Component({templateUrl: build/pages/map/map.html})export class MapPage {ViewChild(container) mapElement: ElementRef;container: any;constructor(private navCtrl: NavController) {}ionViewLoaded() {this.loadMap();}loadMap() {var map new BMap.Map(this.mapElement.nativeElement); // 創(chuàng)建地圖實(shí)例var point new BMap.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point, 15); // 初始化地圖設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別//創(chuàng)建小狐貍var pt new BMap.Point(116.404, 39.915);var myIcon new BMap.Icon(http://developer.baidu.com/map/jsdemo/img/fox.gif, new BMap.Size(300, 157));var marker2 new BMap.Marker(pt, { icon: myIcon }); // 創(chuàng)建標(biāo)注map.addOverlay(marker2); // 將標(biāo)注添加到地圖中}}{% endcodeblock %}對(duì)應(yīng)的 HTML 頁(yè)面代碼如下。{% codeblock lang:html%}Ionic - 地圖div #container idcontainer classmapContainer