如何在基于内部模块的项目中使用扩展@类型

Question

当我不使用名称空间时，我需要一些指导来做一些基本的事情。在本例中，我使用的是leaflet (映射的javascript)和leaflet.heat (制作热图的传单插件)。在不影响名称空间/模块的情况下，导入它们就像这里指出的那样

import * as L from 'leaflet';
import 'leaflet.heat';

但是，由于我使用的是Power自定义可视化，所以我必须按照他们的方式构建解决方案，即只使用内部模块。因此，为了导入库，我在tsconfig.json中添加了@types tsconfig.json文件引用，在pbiviz.json中添加了.js引用。

在建立了引用之后，我能够访问传单元素，方法是编写名称空间，然后是在它的类型中定义的名称空间。例如L.map()、L.TileLayer等，但我无法访问任何扩展基本传单模块的内容。

我尝试重新排序@types导入，修改文件以某种方式合并到L命名空间中，导入类似于import 'leaflet.heat';，但似乎没有什么能使它识别该类型。

下面的代码使编译器说:名称空间中的ts导入声明不能引用模块。

module powerbi.extensibility.visual {
    import 'leaflet.heat';
    ...
}

另一种方式也会抱怨:除非“--模块”标志是“amd”或“system”，否则ts不能使用“out”选项编译模块。

import 'leaflet.heat';
module powerbi.extensibility.visual {
    ...
}

有什么想法，我可以尝试让它识别类型吗？到目前为止，我找到的解决办法是把它投给任何人，但我不喜欢它。(L as any).heatLayer()

我使用的是类型记录2.7.2，这是我的tsconfig.json

{
"compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
},
"files": [
    ".api/v1.10.0/PowerBI-visuals.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
    "node_modules/powerbi-visuals-utils-tooltiputils/lib/index.d.ts",
    "node_modules/@types/d3/index.d.ts",
    "node_modules/@types/geojson/index.d.ts",
    "node_modules/@types/jquery/index.d.ts",
    "node_modules/@types/leaflet/index.d.ts",
    "node_modules/@types/leaflet.heat/index.d.ts",
    ...
}

链接到相应的@types

• 传单
• leaflet.heat

Answer 1

powerbi-visuals-utils-dataviewutils是一个非常棘手的库。如果您正在编写纯TypeScript，而没有集成外部js文件，我希望您有一个好的计算机椅子，因为您将在计算机前坐一段时间，然后才能找到关于这个问题的连贯对话。您可能会认为会有更多的人分享他们是如何将代码解耦的，这样src/visual.ts al.ts就不会变成一个大泥球……

下面是我最接近于识别扩展类的powerbi：

创建一个新的.ts文件(在类中键入以下内容)：

namespace dev {
    export function foo(): any { }
    export class bar { 
    } 
}

不要忘记更新tsconfig.json：

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ..
    "src/NameOfTsFileHere.ts"
  ]
}

在src/visual.ts al.ts中，名称空间dev现在应该可以通过引用：

module powerbi.extensibility.visual {
    "use strict";

    export class Visual implements IVisual {

        constructor(options: VisualConstructorOptions) {
            let obj: dev.foo();
        }
    }
}

其他要注意的事情:我不认为现在可以从新的.ts文件中引用外部库。如果您使用的是像d3、lodash等库，那么假设"dev“命名空间在编译时是转义的(如果输出是ES5)，那么窗口变量将不可用，因此在如何传递对这些库的引用时，您必须具有创造性。