如何将类型导入/使用到 Angular 2 组件中答案

【问题标题】：How to import / use typings into angular 2 component如何将类型导入/使用到 Angular 2 组件中
【发布时间】：2016-12-11 20:06:23
【问题描述】：

我真的很想了解如何正确地将依赖项导入组件。

我已将Leaflet 库及其类型安装到项目中（packages.json sn-p）：

    "@types/leaflet": "^1.0.38"
...
    "leaflet": "^1.0.2"

@types/leaflet/index.d.ts 出口：

declare module 'leaflet' {
    export = L;
}

在我的组件文件中，得到所有人的投诉：

import leaflet from 'leaflet';
//import L from 'leaflet';

export class AppComponent {
  mymap = leaflet.map('mapid').setView([51.505, -0.09], 13);
}

模块“传单”没有默认导出。在第 3 行第 8 行

正确的导入语句是什么？（我承认这是我对 angular cli / webpack / typescript / blackhole 理解的一个大漏洞）

【问题讨论】：

【解决方案1】：

您可以像这样导入所有导出：

import * as L from "leaflet";

let m = L.map(...);

或者您可以像这样单独导入它们：

import { map } from "leaflet";

let m = map(...);

【讨论】：

谢谢。这是直接从原始传单中提取的吗，甚至是否考虑到了@types？
它正在使用@types/leaflet - 版本 1.0.38 - 根据您的问题。我在 leaflet 包本身中看不到任何 TypeScript 定义。如果它仍然不适合您，您可能希望在您的问题中包含您的 tsconfig.json。

【解决方案2】：

Leaflet 似乎与 ES2015 模块不兼容。试试这个语法：

import * as L from 'leaflet'

并像这样使用它：

let marker = L.marker(...)

【讨论】：