在 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) 并使用 Typescript 中的命名空间声明合并功能，以便仍将插件用作 L.CanvasIcon
使用 typescript 重写插件，扩展 namespace L 中的现有接口。
停止使用类型化的'leaflet'，只导入用ES5编写的节点模块，然后在angular的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 设计的。尝试使用 0.7.x.

版本退回到 leaflet

 "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

如果需要在 typescript 中使用 leaflet 插件，请在 leaflet 之后导入此文件。

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;
  }
}

如果需要，您可以明确指定类型。

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

Import and use untyped leaflet JS plugin with Typescript 2 in Angular 2 project

leaflet

typescript

typescript-typings

angular