使用javascript扩展typescript库

Question

我正在使用Ionic 3来构建一个简单的地图应用程序,以便使用OpenStreet地图图块呈现我正在使用传单(类型版本)的地图

我想让用户下载和缓存地图的可能性,因此我在这里找到了传单离线 并希望使用它,因为它允许我使用我的本地存储来存储图像.

现在我的问题出现了,我正在尝试将打字稿与javascript混合,我无法弄清楚如何使其正常工作.

我做了什么,问题是什么:

我安装了传单类型版本,然后安装了传单离线javascript版本.

现在我在页面中将它们导入如下:

import * as leaflet from 'leaflet';
import 'leaflet-offline';

现在,如果我尝试按照示例中的说明使用库,我会得到一个打字稿错误,它指示我离线的属性不在对象TileLayer中.

leaflet.tileLayer.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', tilesDb, {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abc',
    minZoom: 13,
    maxZoom: 19,
    crossOrigin: true
}).addTo(this.map);

为了避免这种情况,我补充道

export namespace tileLayer {
function wms(baseUrl: string, options?: WMSOptions, offline?: any): TileLayer.WMS;
function offline(url?: any, tilesDb?: any, options?: any): any;
}

该函数offline位于tileLayer本身的命名空间中.

当前的问题 在我尝试运行应用程序的那一刻,一切正常,除了实际的地图,我看不到它,当我调查它时得到的错误如下:

错误类型错误:无法在NewClass._TateUrl(vendor.js:163489)的NewClass._addTile(vendor.js:79419)的NewClass._update(供应商,js:73419)的NewClass.getTileUrl(vendor.js:163489)中读取null的属性'then' .js:79310)在NewClass._setView(vendor.js:79171)的NewClass._resetView(vendor.js:79129)NewClass.fire(vendor.js:68787)NewClass._move(vendor.js:72343)at at NewClass._catchTransitionEnd中的NewClass._onZoomTransitionEnd(vendor.js:72800)(vendor.js:72732)

我确定我犯了一些愚蠢的错误,但我在这个问题上失去了很多时间.

任何人都有一些关于如何解决这个问题的线索？

Answer 1

无法读取 null 的属性“then”

当 Typescript从应用它的函数then接收数据时，会出现此错误。null因此，如果您的函数是自定义的，请检查您是否缺少 return 语句。

现在，而不是在初始化时直接添加图层到地图。为此，请尝试将现有代码替换为

const offlineLayer = leaflet.tileLayer.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', tilesDb, {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abc',
    minZoom: 13,
    maxZoom: 19,
    crossOrigin: true
});

offlineLayer.addTo(this.map)

检查地图的引用this.map或代码中的任何引用。