使用 javascript 扩展 typescript 库答案

【问题标题】：Extends typescript library with javascript使用 javascript 扩展 typescript 库
【发布时间】：2018-10-09 00:34:41
【问题描述】：

我正在使用 Ionic 3 构建一个简单的地图应用程序，以便展示我正在使用 leaflet（打字版）和 的地图>OpenStreet 地图图块

我想给用户下载和缓存地图的可能性，因此我找到了 leaflet-offline here 并想使用它，因为它允许我使用我的 localstorage 来存储图片。

现在我的问题是我试图将 typescript 与 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本身的命名空间中。

当前问题 目前，当我尝试运行该应用程序时，除了实际地图外，一切正常，我看不到它，当我查看它时出现以下错误：

错误类型错误：无法读取属性 'then' of null at NewClass.getTileUrl (vendor.js:163411) 在 NewClass.createTile (vendor.js:163389) 在 NewClass._addTile (vendor.js:79419) 在 NewClass._setView 上的 NewClass._update (vendor.js:79310) (vendor.js:79171) 在 NewClass._resetView (vendor.js:79129) 在 NewClass.fire (vendor.js:68787) 在 NewClass._move (vendor.js:72343) 在 NewClass._onZoomTransitionEnd (vendor.js:72800) 在 NewClass._catchTransitionEnd (vendor.js:72732)

我确定我犯了一些愚蠢的错误，但我在这个问题上浪费了很多时间。

有人知道如何解决这个问题吗？

【问题讨论】：

标签： javascript typescript leaflet ionic3

【解决方案1】：

在源码中可以看到https://github.com/robertomlsoares/leaflet-offline/blob/master/src/TileLayer.Offline.js

你失败了：

    var resultPromise = this._tilesDb.getItem(dbStorageKey).then(function (data) {

所以调用

_tilesDb.getItem(dbStorageKey)

正在返回 null，此时代码会尝试在 null 上调用 'then'。

由于您应该自己提供tilesDB，您可以在getItem 函数中放置一个断点来查看发生了什么。在某些时候，您会从 getItem 函数返回 null。

getItem 应该做什么：

// return Promise that has the image Blob/File/Stream.

提供给 getItem 的键是您提供的 url，并对其应用了正则表达式替换（请参阅同一源文件中的 _getStorageKey）

【讨论】：

【解决方案2】：

无法读取 null 的属性 'then'

当then 从应用它的函数接收到null 时，Typescript 会出现此错误。因此，如果您的函数是自定义的，请检查您是否缺少 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 或代码中的任何引用。

【讨论】：