如何包含 TypeScript OpenLayers 3 外部模块？

Question

我希望尝试使用TypeScript在openlayers中设置一个简单地图：

https://github.com/borisyankov/DefinitelyTyped/blob/master/openlayers/openlayers.d.ts

我将该文件放入......

/typings/openlayers/openlayers.d.ts

我在根目录下有一个app.ts文件，其中包含以下内容：

import { Map } from "olx";

在我的tsconfig.json文件中，我已经将路径添加到了openlayers.d.ts文件。但是当我使用npm的typescript包中的tsc命令时，会出现"olx未定义"的错误。

我只是想绘制一个简单的openlayers3地图，如果可能的话，希望不要偏离javascript太远。

- Rolando

Answer 1

首先安装openlayers：

npm install openlayers

然后在您的开发环境中安装OpenLayers类型：

npm install --save-dev @types/openlayers

我尝试了以下方法导入:

import * as ol from 'openlayers';

然后，您可以像这样调用openlayers中的任何内容：

new ol.Map();

- Willie Z

Answer 2

导入 { Map } from "olx";

这段代码行不通，因为没有名为"olx"的外部模块。在NPM上，olx指的是其他东西https://www.npmjs.com/package/olx，因此建议不要使用此名称。

推荐：https://www.npmjs.com/package/openlayers

使用扩展为以下内容的定义文件：

declare module "openlayers" {
    export = olx;
}

- basarat

---

为什么定义部分不包含 "export = olx" 或任何 "export"？ - Rolando

因为它是为 script 标签包含而设计的，而不是 ES6 模块排除。我猜想，如果在定义时使用外部模块加载器，该模块将被称为什么还没有确定。请参见测试文件 https://github.com/borisyankov/DefinitelyTyped/blob/master/openlayers/openlayers-tests.ts 以获取预期的用法。 - basarat

我对TypeScript还不熟悉，您能详细解释一下什么是脚本标签包含和不包含ES6模块吗？您的意思是指有人会独立编译openlayers.ts.d文件，然后通过脚本标签将其包含在HTML页面中，或者使用此问题中的内容：https://dev59.com/6GYr5IYBdhLWcg3wBlvp。如果是这样，您的答案是否应该是手动添加export = olx到当前定义的最佳实践/当前做法？或者，我是否有更好的方法在没有TypeScript ts.d文件的情况下使用openlayers？（似乎有很多过时的东西） - Rolando