如何將擴展導入到ES6/Typescript模塊

Question

我試圖將一個簡單的Javascript原型寫入單個.html文件，並將嵌入的<script>標籤寫入使用Typescript編譯的模塊。

它使用傳單，我高興地能夠通過

import * as L from 'leaflet'; 

通過

npm install leaflet 

npm install --save @types/leaflet 

進口安裝，並通過例如使用得到。

var map = L.map('map').setView([-43.4175044, 172.185657], 8); 

不過，我也想用這個https://rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js JavaScript文件提供了一些擴展，主要單張大號對象。

我已經試過然而，當我嘗試使用它例如，通過

import 'https://rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js' 

導入此。

var coordinates = L.Polyline.fromEncoded(encoded).getLatLngs(); 

我得到以下錯誤：

我怎樣才能得到這個工作？這僅僅是爲這些擴展提供類型支持的問題嗎？如果是這樣，我該怎麼做？

Answer 1

由於polyline-encoded的工作原理，這很棘手：該插件擴展了Leaflet。因此，如果我們希望它完全像JavaScript一樣工作，我們需要擴展小冊子類型和它的1550行！更有問題的是，每當我們想要更新Leaflet時，我們都需要檢查它的類型是否已經更新，並將它們與polyline-encoded類型合併！

另一個潛在的問題：在你的代碼，Leaflet是一個ES6模塊中使用，但polyline-encoded是基於改變當前Leaflet對象L，混合新舊JavaScript的方式的IIFE。我很想知道它是否有效。

無論如何，一個更安全的選擇，我看到（但還沒有測試）：

• 定義新類型→見下文Leaflet.encoded.d.ts，添加到您的項目。
• 強制轉換L作爲在Leaflet.encoded.d.ts：Lx.L;中定義的擴展類型。
• 使用Lx而不是L擴展名爲polyline-encoded的每次使用。適應

您的代碼：

import * as L from 'leaflet'; 
import 'https://rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js'; 

const Lx = L as any as Lx.L; 

const map = L.map('map').setView([-43.4175044, 172.185657], 8); 

const coordinates = Lx.Polyline.fromEncoded('...').getLatLngs(); 

Leaflet.encoded.d.ts：

// Type definitions for Leaflet polyline-encoded 0.0.8 
// Project: https://github.com/jieter/Leaflet.encoded 
// Definitions by: Romain Deneau <https://github.com/rdeneau> 
// TypeScript Version: 2.5 

import * as Leaflet from 'leaflet'; 

export as namespace Lx; 

export interface L { 
    PolylineUtil: PolylineUtil; 
    Polyline: Polyline; 
    Polygon: Polygon; 
} 

// -- PolylineUtil plugin --------------------------------- 

export interface PolylineUtilOptions { 
    precision: number; 
    factor: number; 
    dimension: number; 
} 

export type LatLngTuple = [number, number]; 

export interface PolylineUtil { 
    /** 
    * Decode the string `encoded` to an array of `[lat, lng]`-arrays. 
    */ 
    decode(encoded: string, options?: number|PolylineUtilOptions): LatLngTuple[]; 

    /** 
    * Encode an array of `L.LatLng` objects, or an array of arrays. 
    */ 
    encode(points: Leaflet.LatLng[]|LatLngTuple[], options?: number|PolylineUtilOptions): string; 
} 

// -- Polyline/Polygon extensions ------------------------- 

export class Polyline extends Leaflet.Polyline { 
    /** 
    * Return an encoded string for the current Polyline. 
    */ 
    encodePath(): string; 

    /** 
    * Construct a new `L.Polyline` from a string, with optional `options` object. 
    * Backslashes in strings should be properly escaped. 
    */ 
    fromEncoded(encoded: string, options?: Leaflet.PolylineOptions): Leaflet.Polyline; 
} 

export class Polygon extends Leaflet.Polygon { 
    /** 
    * Return an encoded string for the current Polygon. 
    */ 
    encodePath(): string; 

    /** 
    * Construct a new `L.Polygon` from a string, with optional `options` object. 
    * Backslashes in strings should be properly escaped. 
    */ 
    fromEncoded(encoded: string, options?: Leaflet.PolylineOptions): Leaflet.Polygon; 
} 

如果它的工作，這類型甚至可以被共享，他們提交給DefinitelyTyped repository。