L.Class.include() 与 TypeScript 的等价物答案

【问题标题】：Equivalent of L.Class.include() with TypeScriptL.Class.include() 与 TypeScript 的等价物
【发布时间】：2018-02-24 17:48:27
【问题描述】：

在 JavaScript（带有 Leaflet）中，我可以使用文档中所写的 L.Class.include() 实现一些自定义功能：

使用 L.Class.include() 在现有类中包含更多功能添加新方法和选项改变一些方法使用 addInitHook 运行额外的构造函数代码。

这行得通：

 L.Rectangle.include({
    contains: function (markers: L.Marker[]) {
      const markersContained: boolean[] = [];
      markers.forEach(marker => {
        console.log(marker);
        markersContained.push(this.getBounds().contains(marker.getLatLng()));
      })
      return markersContained;
    }
  });

现在我正在尝试使用 TypeScript 在 Angular4 应用程序中实现相同的功能，但 include() 函数似乎没有在 @types/leaflet 中输入

问题是我的代码在为Leaflet.Draw 插件量身定制的.ts 文件中，所以我必须以这种方式初始化文件：

declare const L: any;
import 'leaflet-draw/dist/leaflet.draw-src';

而不是常规的

import * as L from 'leaflet';

由于Leaflet.Draw 插件没有@types，因此我无法导入常规的传单类型（否则new L.Control.Draw() 会产生编译错误）。

这会在编译时中断：

  map.on(L.Draw.Event.CREATED, (geometry: L.LayerEvent) => {
    const layer = geometry.layer;
    drawnItems.addLayer(layer);

    // Set an array containing all the markers
    const markers = LeafletService.prototype.jsonToArray(layerGroup.getLayers());

    // ===> Property 'contains' does not exist on type 'Layer'.
    const result = geometry.layer.contains(markers);
    console.log('result => ', result);
  });

显然，如果我将几何类型设置为 any，这将有效，但如果可能，我想使用 L.LayerEvent 类型，并且想知道如何使用 TypeScript 语法来使用 Leaflet @987654335 @方法正确吗？

【问题讨论】：

标签： angular typescript leaflet typescript-typings leaflet.draw

【解决方案1】：

TL;DR :我必须使用any，除非他们输入Leaflet.Draw...

好吧，所以最后很明显......

由于Leaflet.Draw 没有类型，所以在将Leaflet.Draw 插件与Leaflet 集成时，我必须declare const L: any 以避免编译错误。

很明显，当我调用 L.Rectangle 时，由于 L 的类型为 any，我不可能使用来自 Leaflet 的类型化 include() 方法（我确实在运行时使用实际方法，但我无法让 TypeScript 在编译时意识到它）。

从 Leaflet.Draw 事件返回的几何图形不知道我添加的新 contains() 方法是合乎逻辑的，因为它没有链接到实际的 L.Rectangle 传单类型。

【讨论】：