Импортируйте и используйте JS-плагин нетипизированной листовки с Typescript 2 в проекте Angular 2

Я использую библиотеку LeafletJS в приложении Angular 2. Сама библиотека работает нормально, так как я включил определение типа (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.

  • Перепишите плагин, используя машинописный текст, расширив существующие интерфейсы в namespace L.

  • Прекратите использовать типизированную «листовку» и просто импортируйте модуль узла, написанный на ES5, затем добавьте объявление L в файл typings.d.ts angular: 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"
      }
    }

typescript angular typescript-typings leaflet
person Ahmed Abdelrahman    schedule 14.11.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это ошибка времени выполнения, не связанная с отсутствующими типизациями. Проблема связана с несоответствием версии 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.

person rzelek    schedule 15.11.2016
comment
да, это работает после возврата к версии leaflet 0.7. однако определение типа по-прежнему необходимо для его использования в том же пространстве имен, что и L.CanvasIcon. - person Ahmed Abdelrahman; 15.11.2016
comment
Как вы управляли определением типа, необходимым для использования плагина? - person ackuser; 15.03.2017

arrow_upward
0
arrow_downward

Импортируйте этот файл после листовки, если вам нужно использовать плагины листовок в машинописном тексте.

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

Вы можете быть явными с типами, если хотите.

person Jonas Tomanga    schedule 23.05.2017