Создать новый элемент управления Leaflet в Angular 2+

Question

Я использую листовку , редактируемую листовку и Angular в проекте. Я хочу создать элементы управления для рисования многоугольника на карте (очень похоже на приведенный пример на странице github). Мой код в моем компоненте выглядит следующим образом:

import 'leaflet';
import 'leaflet-editable';

...

this.map = L.map('map', {editable: true}).setView([-0.163360, 13.053125], 3).addLayer(osm);
L.NewPolygonControl = L.Control.extend({
  options: {
    position: 'topleft'
  },
  onAdd: function (map) {
    const container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
      link = L.DomUtil.create('a', '', container);
    link.title = 'Create a new polygon';
    link.innerHTML = '▱';
    L.DomEvent.on(link, 'click', L.DomEvent.stop)
      .on(link, 'click', function () {
        map.editTools.startPolygon();
      });
    container.style.display = 'block';
    map.editTools.on('editable:enabled', function (e) {
      container.style.display = 'none';
    });
    map.editTools.on('editable:disable', function (e) {
      container.style.display = 'block';
    });
    map.editTools.on('editable:drawing:move', function (e) {

    });
    return container;
  }
});
L.AddPolygonShapeControl = L.Control.extend({
  options: {
    position: 'topleft'
  },
  onAdd: function (map) {
    const container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
      link = L.DomUtil.create('a', '', container);
    link.title = 'Create a new polygon';
    link.innerHTML = '▱▱';
    L.DomEvent.on(link, 'click', L.DomEvent.stop)
      .on(link, 'click', function () {
        if (!map.editTools.currentPolygon) return;
        map.editTools.currentPolygon.editor.newShape();
      });
    container.style.display = 'none';
    map.editTools.on('editable:enabled', function (e) {
      container.style.display = 'block';
    });
    map.editTools.on('editable:disable', function (e) {
      container.style.display = 'none';
    });
    return container;
  }
});
this.map.addControl(new L.NewPolygonControl());
this.map.addControl(new L.AddPolygonShapeControl());

Элементы управления работают нормально, но после компиляции появляется сообщение об ошибке:

ERROR in src/app/pages/countryEdit/country/country.component.ts(84,7):         
error TS2339: Property 'NewPolygonControl' does not exist on type         
'typeof L'.
src/app/pages/countryEdit/country/country.component.ts(110,7): error 
TS2339: Property 'AddPolygonShapeControl' does not exist on type 
'typeof L'.
src/app/pages/countryEdit/country/country.component.ts(134,31): error 
TS2339: Property 'NewPolygonControl' does not exist on type 'typeof 
L'.
src/app/pages/countryEdit/country/country.component.ts(135,31): error 
TS2339: Property 'AddPolygonShapeControl' does not exist on type 
'typeof L'.

Мои знания угловаты, а машинопись еще ограничена, и я не знаю, как исправить эту ошибку компиляции. Я добавил типы для листовок и редактируемых листовок.

Answer 1

Для тех, кто приезжает сюда с такой же проблемой. Я просто создал новую переменную вместо создания нового свойства для L. Поэтому вместо L.NewControl = 'bla bla' я просто написал const newControl = 'bla bla'. Я использовал новую переменную так же, как и L.NewControl, и все работало нормально, без ошибок компиляции.