如何将扩展导入到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。