在Angular 2项目中使用Typescript 2导入并使用无类型的传单JS插件

Question

我在Angular 2应用程序中使用LeafletJS库。库本身工作正常，因为我已经包含了类型定义（leaflet.d.ts），当然还有传单节点模块。

我试图导入一个名为“leaflet-canvasicon”的传单库的插件，并且没有可用的类型定义，因为每当我试图包含它时，它都用ES5编写，编译器很满意，但我收到在控制台上出现以下错误：

leaflet-src.js:314 
Uncaught TypeError: this.callInitHooks is not a function 
    at Object.NewClass (http://localhost:2080/main.bundle.js:58716:8) 
    at http://localhost:2080/main.bundle.js:77650:180 
    at Object.<anonymous> (http://localhost:2080/main.bundle.js:77652:3) 
    at __webpack_require__ (http://localhost:2080/inline.js:53:30) 
    at Object.<anonymous> (http://localhost:2080/main.bundle.js:54476:18) 
    at __webpack_require__ (http://localhost:2080/inline.js:53:30) 
    at Object.<anonymous> (http://localhost:2080/main.bundle.js:54411:90) 
    at __webpack_require__ (http://localhost:2080/inline.js:53:30) 
    at Object.<anonymous> (http://localhost:2080/main.bundle.js:54600:70) 
    at __webpack_require__ (http://localhost:2080/inline.js:53:30) 

我认为许多解决方案的：

• 创建一个新的类型定义的插件（leaflet-canvasicon.d.ts）和u se Typescript中的命名空间声明合并功能为了仍然使用该插件作为L.CanvasIcon

• 使用typescript重写插件，扩展namespace L中的现有接口。使用类型化的“传单”，只是导入写在ES5的节点模块，然后在角度的typings.d.ts文件是添加L-声明

• 停止：declare var L: any;

但每次我面对的编译器的问题。我认为我做错了。我怎样才能包括插件，使编译器满意，并能够使用它作为L.CanvasIcon

这里是package.json文件：

"dependencies": { 
     "@angular/common": "2.1.2", 
     "@angular/compiler": "2.1.2", 
     "@angular/compiler-cli": "2.1.2", 
     "@angular/core": "2.1.2", 
     "@angular/forms": "2.1.2", 
     "@angular/http": "2.1.2", 
     "@angular/platform-browser": "2.1.2", 
     "@angular/platform-browser-dynamic": "2.1.2", 
     "@angular/platform-server": "2.1.2", 
     "@angular/router": "3.1.2", 
     "@types/leaflet": "^1.0.36", 
     "core-js": "^2.4.1", 
     "leaflet": "^1.0.1", 
     "leaflet-canvasicon": "^0.1.6", 
     "leafletjs-canvas-overlay": "^1.0.1", 
     "rxjs": "5.0.0-rc.1", 
     "ts-helpers": "^1.1.2", 
     "zone.js": "^0.6.26" 
     }, 
     "devDependencies": { 
     "angular-cli": "1.0.0-beta.19-3", 
     "ts-node": "1.6.1", 
     "tslint": "3.15.1", 
     "typescript": "2.0.6", 
     "typings": "^1.5.0" 
     } 
    } 

Answer 1

这是不相关的缺失分型运行时错误。该问题与leaflet版本不匹配有关。

leaflet-canvasicon似乎是为旧版leaflet设计的。尝试回退到leaflet版本0.7.x。

"dependencies": { 
     "@angular/common": "2.1.2", 
     "@angular/compiler": "2.1.2", 
     "@angular/compiler-cli": "2.1.2", 
     "@angular/core": "2.1.2", 
     "@angular/forms": "2.1.2", 
     "@angular/http": "2.1.2", 
     "@angular/platform-browser": "2.1.2", 
     "@angular/platform-browser-dynamic": "2.1.2", 
     "@angular/platform-server": "2.1.2", 
     "@angular/router": "3.1.2", 
     "@types/leaflet": "0.7.x", 
     "core-js": "^2.4.1", 
     "leaflet": "0.7.x", // note the change 
     "leaflet-canvasicon": "^0.1.6", 
     "leafletjs-canvas-overlay": "^1.0.1", 
     "rxjs": "5.0.0-rc.1", 
     "ts-helpers": "^1.1.2", 
     "zone.js": "^0.6.26" 
     }, 
     "devDependencies": { 
     "angular-cli": "1.0.0-beta.19-3", 
     "ts-node": "1.6.1", 
     "tslint": "3.15.1", 
     "typescript": "2.0.6", 
     "typings": "^1.5.0" 
     } 
    } 

对于未来，你可以记住this.callInitHooks is not a function是单张后加载旧扩展leaflet版本> = 1

Answer 2

导入此文件，如果您需要在打字稿使用单张插件后典型问题。

declare module L { 
    // plugins that extend Class i.e L.MyClass 
    export let MyClass:any; 
    // plugins that uses class factory i.e myClass 
    export let myClass:any; 

    //plugins that extend Control comes here i.e L.Control.Navbar 
    export namespace Control { 
     export let Navbar: any; 
    } 
    // plugins that have control factories come here i.e. L.control.navbar 
    export namespace control { 
    export let navbar: any; 
    } 

    //plugins that extend Layer comes here i.e L.Layer.NewLayer 
    export namespace Layer { 
     export let NewLayer: any; 
    } 
    // plugins that have layer factories come here i.e. L.layer.newLayer 
    export namespace layer { 
    export let newLayer: any; 
    } 
    //plugins that extend Handler comes here i.e. L.Handler.NewHandler 
    export namespace Handler { 
     export let NewHandler: any; 
    } 
    // plugins that have handler factories come here i.e. L.Handler.newHandler 
    export namespace handler { 
    export let newHandler: any; 
    } 
} 

如果您愿意，您可以明确指出类型。