原文發(fā)表于我的技術(shù)博客本文分享了在Ionic2 TypeScript 項目中導(dǎo)入第三方 JS 庫的方法供參考。原文發(fā)表于我的技術(shù)博客1. Typings 的方式因在 TypeScript 中引用之前的 JS 庫還需要引入對應(yīng)的類型定義也就是 .d.ts 文件。對于一些流行的 JS 庫相應(yīng)地有了一個 Typings 庫。Typings 庫的作用就是將一些現(xiàn)有的 JS 庫生成好了對應(yīng)的定義文件可以通過 Typings 直接加載到項目中。詳細可見 Typings for NPM Packages 。2. 其他第三方 JS 庫的引用這里以國內(nèi)的百度地圖庫作為示例進行說明。百度地圖在 TypeScript 中是不存在的所以本文就看看如何在 Ionic2 的 TypeScript 項目中引用。3. 項目中引用 JS 庫和一般的引用 JS 庫一樣直接在項目的 index.html 中引用即可。這里申請好百度地圖的 key 并引入百度地圖的 JS SDK 文件。4. 全局對應(yīng)的定義與使用在引用了百度地圖 SDK 后在 console 中發(fā)現(xiàn)已經(jīng)可以讀取到百度地圖中的全局參數(shù)定義了。那么只需要在對應(yīng)的 TS 文件中定義一個參數(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)建地圖實例var point new BMap.Point(116.404, 39.915); // 創(chuàng)建點坐標(biāo)map.centerAndZoom(point, 15); // 初始化地圖設(shè)置中心點坐標(biāo)和地圖級別//創(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 %}對應(yīng)的 HTML 頁面代碼如下。{% codeblock lang:html%}Ionic - 地圖div #container idcontainer classmapContainer