当我不使用名称空间时,我需要一些指导来做一些基本的事情。在本例中,我使用的是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
发布于 2018-10-07 20:36:46
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),那么窗口变量将不可用,因此在如何传递对这些库的引用时,您必须具有创造性。
https://stackoverflow.com/questions/49053319
复制相似问题