Question

我不确定这个极端的边缘情况或其他什么，但我似乎无法找到关于如何做到这一点的直接文档（或者我真的不理解可用的东西）：

我正在开发离子应用程序，作为其中的一部分，我需要使用ALKMaps JavaScript库（类似于Google Maps API）。为此，我创建了一个本地npm模块，并在其中创建了https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html#objects-with-properties建议的alkmaps.d.ts文件。但是，我似乎无法弄清楚如何将其正确导入我的角度代码。同一文档表明使用<reference path=''>标签并不好，但这是唯一似乎满足tsc编译器的东西。

我的声明文件alkmaps.d.ts看起来像（为简洁而排除在内）：

declare namespace ALKMaps {
    export class Map { ... }
    ...
}

我试图将其导入如下文件：

import { ALKMaps } from 'alkmaps';  // Error: File '.../alkmaps.d.ts' is not a module

我也尝试了以下但是也遇到了同样的错误。

import ALKMaps = require('alkmaps');

使用引用标记似乎在此模块中工作，但是使用此模块的项目仍然会抛出“不是模块”错误（这可能需要单独的问题）

从https://github.com/Microsoft/TypeScript/issues/11420我发现使用export = ALKMaps或export as namespace ALKMaps的想法，但将其添加到我的声明文件中会导致不同的错误。

任何人都可以直接解释如何在打字稿节点模块中使用表示外部JS库的声明文件吗？

Answer 1

这就是我能够将alkMaps导入我的Angular 2应用程序

的方法

将脚本插入index.html文件。

在要添加地图的组件中声明一个ALKMaps变量

imports .....

declare let ALKMaps : any;
@Component({
   selector: 'show-map',
   templateUrl: 'show-map.component.html'
})

export class ShowMapComponent implements Oninit{
   map : any;

   constructor() {
   }

   ngOnInit() {
      ALKMaps.APIKey = "apiKey";
      this.map = new ALKMaps.Map("map", {displayProjection: new ALKMaps.Projection("EPSG:4326")});
   }
}

这将显示地图，您可以在地图上放置不同的图层，但地图无法正确显示。 @Mike，如果你能比这更进一步，请你评论一下吗？

编辑：图像上的图块被拉长而没有连接。在检查了css main.css之后，在构建之后，将img元素的全局属性设置为：

img { 
   max-width:100%
}

地图的图块最初设置为宽度的256％。为了更正元素，我在样式表中更改了img的属性。

show-map {
    img {
       max-width: 256%
    }
}

对外部JavaScript库使用TypeScript声明

1 个答案: