javascript - 何时在 TypeScript 中使用脚本标签包含 JS 库？

Question

我在使用 import 使 TypeScript 正常工作时遇到了很多问题。声明。

例如，我目前正在使用 Leaflet 构建 Angular2 应用程序。我已经设法正确加载了一些库，例如 Lodash 和 Leaflet，但是现在我正在努力让 Leaflet 插件 Leaflet.MarkerCluster 正常工作。

我导入的方式如下:

import L from 'markercluster';

我的 SystemJS 定义中有以下内容:

markercluster: 'node_modules/leaflet.markercluster/dist/leaflet.markercluster'

这会导致加载和附加 MarkerCluster 文件，我可以从 L.MarkerClusterGroup 访问它例如，当我在控制台中对其进行测试时。

但是，当我在 TypeScript 模块中运行它时，出现错误。我做了一些挖掘，这似乎是由于生成的 JavaScript 的运行方式所致。生成的 JavaScript 实际上并没有尝试访问 L(传单全局对象)，而是访问:

var m = new markercluster_1.default.MarkerClusterGroup();

检查 markercluster_1.default ，我可以看到它是一个空对象。不确定如何解决这个问题，但我在想在这种情况下是否值得使用 import 语句？简单地包含在页面顶部的 a 并使用 ///<reference path='....'> 是否更有意义？在我尝试访问模块的 TypeScript 文件中？

Answer 1

Not sure how to work around this, but I'm thinking if it's even worth using import statements in this situation

我的意见

• 远离 systemjs。只需使用网络包。
• 使用要求

示例:

import * as leaflet from "leaflet"; 
// Augment leaflet
require('./leaflet.markercluster/dist/leaflet.markercluster');

// use new feature
(leaflet as any).MarkerClusterGroup;

派对 🎉 🌹