typescript 遗留 js lib 扩展问题答案

【问题标题】：typescript legacy js lib extension issuetypescript 遗留 js lib 扩展问题
【发布时间】：2017-09-13 15:48:19
【问题描述】：

我需要一些关于导入的帮助，我正在使用定义类型的@types/leaflet

export namespace Icon {
    interface DefaultIconOptions extends BaseIconOptions {
        imagePath?: string;
    }

    class Default extends Icon<DefaultIconOptions> {
        static imagePath?: string;
        constructor(options?: DefaultIconOptions);
    }
}

现在，我想使用以下扩展图标行为的 libreray：https://www.npmjs.com/package/leaflet-fa-markers 问题是它是纯 JS 并且类型未在 @types 中定义... node_modules/leaflet-fa-markers/L.Icon.FontAwesome.js

L.Icon.FontAwesome = L.Icon.extend({

    options: {
        popupAnchor: [0, -50]
    },

    createIcon: function () {

        var div = document.createElement('div');
...

到目前为止，我已经在 .angular-cli.json 中导入了 js 和 css，但不知道如何在我的服务中导入它...到目前为止，我已经导入了 js lib

import 'leaflet-fa-markers';
//...
        let marker = new L.Marker([ lat, lng], {
          icon: L.icon.fontAwesome({
            iconClasses: 'fa fa-info-circle', // you _could_ add other icon classes, not tested.
            markerColor: '#00a9ce',
            iconColor: '#FFF'
          }),
          draggable: true});

但我得到了错误：

src/app/_services/canimap.service.ts (99,24): Property 'fontAwesome' does not exist on type '(options: IconOptions) => Icon<IconOptions>'.

【问题讨论】：

标签： angular typescript types

【解决方案1】：

我发现是为了让它工作修改一点代码

将js文件转换成typescript文件
添加导入

从“传单”导入 { Icon, IconOptions }; 从“传单”导入 * 作为 L；

导出类 FontAwesomeIcon 扩展图标 { // 在此处添加您的 JS 代码 }
添加 index.ts 文件：

从 './fontAwesomeIcon' 导出 { FontAwesomeIcon, FontAwesomeOptions };

我已在此处发布代码：https://github.com/mylen/ngx-leaflet-fa-markers

【讨论】：