javascript - Angular.ioでLeaflet Bingレイヤーを使用/実装するにはどうすればよいですか？

Bingマッププロバイダーを使ったコンポーネントで使用するためのLeafletサービスを構築しようとしています。JavaScriptでは問題なく動作させることができます。しかし、TypeScriptではオブジェクトに新しいプロパティを定義することができません。'any' にキャストしても解決になりません。

私が使っているJavaScriptの拡張機能はこちらです: https://github.com/digidem/leaflet-bing-layer

コンポーネントコードの該当部分は以下の通りです（JavaScript版はサービスを使用せず、スクリプトを含めるだけです）：

import * as L  from 'leaflet';

// ...

    var leafletHelperService = new LeafletHelperService();

    (L.TileLayer as any).Bing = L.TileLayer.extend(
        leafletHelperService.getExtensionObject(options)); // --> returns object with options, initialize(), getQuadKey, etc.

    (L.tileLayer as any).bing = function(options) {
        return new L.TileLayer.Bing(options); // --> property 'Bing' does not exist on type L.TileLayer
    }
    L.tileLayer
        .bing(options) // --> property 'bing' does not exist...
        .addTo(this.map);

主な問題は、新しいプロパティを追加することができないということです。L.TileLayerを拡張するインターフェースを定義しようとしましたが、うまくいきませんでした:

interface IBing extends L.TileLayer {
    Bing:Function;
}

leafletの型定義ファイル（.d.ts）を直接修正する必要がありますか？それとも、このような場合は、.jsスクリプトをAngular/TypeScriptにインポートするだけでよいのでしょうか（私はそれもすでに動作させましたが、見た目は醜い回避策のように見えます）？

他人のポート、例えばこちらのようなものは使わない方が良いことに注意してください: https://github.com/Asymmetrik/ngx-leaflet

ありがとうございます！

回答 #1

このコードをプロジェクトの typings.d.ts に追加することで、Leaflet の型を拡張できます:

import { tileLayer } from 'leaflet';

declare module 'leaflet' {
  namespace tileLayer {
    interface BingOptions extends TileLayerOptions {
      bingMapsKey?: string;
      imagerySet?: 'Aerial'|'AerialWithLabels'|'AerialWithLabelsOnDemand'|'CanvasDark'|'CanvasLight'|'CanvasGray'|'Road'|
        'RoadOnDemand'|'OrdnanceSurvey';
      culture?: string;
      style?: string;
    }

    export function bing(options: string|BingOptions): TileLayer;
  }
}