Question

我正在尝试将带有嵌入式<script>标记的单个.html文件中编写的简单Javascript原型转换为使用Typescript编译的模块。

它正在使用Leaflet，我很高兴能够通过

安装

npm install leaflet

npm install --save @types/leaflet

通过

导入

import * as L from 'leaflet';

并使用via eg。

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

但是我也想使用这个https://rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js Javascript文件，该文件为主Leaflet L对象提供了一些扩展。

我尝试通过

导入此内容

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

然而，当我尝试使用它时，例如

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

我收到以下错误：

error TS2339: Property 'fromEncoded' does not exist on type 'typeof Polyline'.

我怎样才能使这个工作？这只是为这些扩展提供类型支持的问题吗？如果是这样，我该怎么做？

Answer 1

由于polyline-encoded的工作原理，这很棘手：此插件扩展了Leaflet。因此，如果我们希望它与JavaScript完全一样，我们需要扩展传单类型及其1550行！更有问题的是，每当我们想要更新Leaflet时，我们都需要检查其类型是否已更新并将其与polyline-encoded类型合并！

另一个潜在问题：在您的代码中，Leaflet用于ES6模块，但polyline-encoded基于更改当前Leaflet对象L的IIFE，混合新旧的JavaScript方式。我很想知道它是否有效。

无论如何，我看到一个更安全的选项（但还没有测试）：

定义新类型→请参阅下面的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。

如何将扩展导入ES6 / Typescript模块

1 个答案: