我正在使用 angular 7 和 joint.js 来创建我自己的形状定义。 例如,
joint.shapes.devs.Model.define("devs.Type",
{
size: {
width: 300,
height: "auto"
}
});
joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
attrs: {
body: {
rx: 10, // add a corner radius
ry: 10,
strokeWidth: 1,
fill: 'cornflowerblue'
},
label: {
textAnchor: 'left', // align text to left
refX: 10, // offset text from right edge of model bbox
fill: 'white',
fontSize: 18
}
}
});
var rect2 = new joint.shapes.examples.CustomRectangle();
var a1 = new joint.shapes.devs.Type(node);
编译代码给我两个错误
error TS2339: Property 'Type' does not exist on type 'typeof devs' error TS2341:Property 'examples' does not exist on type 'typeof shapes'.
我该如何解决这个问题?
另外,customerLink定义了一个transitionColor方法,但是在paper.on("link:mouseover",....,错误是不能调用的
Property 'transitionColor' does not exist on type 'Link'.
joint.dia.Link.define(
"devs.Link",
{
attrs: {
line: {
connection: true
},
wrapper: {
connection: true,
strokeWidth: 2,
strokeLinejoin: "round"
}
}
},
{
markup: [
{
tagName: "path",
selector: "wrapper",
attributes: {
fill: "none",
cursor: "pointer",
stroke: "transparent"
}
},
{
tagName: "path",
selector: "line",
attributes: {
fill: "none",
"pointer-events": "none"
}
}
],
transitionAsync: function (...args) {
return new Promise(resolve => {
this.transition(...args);
this.on("transition:end", () => {
resolve();
});
});
},
transitionColor: function (color, { delay = 0, duration = 100 }) {
return this.prop("attrs/line/stroke", color);
},
transitionOpacity: function (opacity, { delay = 0, duration = 100 }) {
return this.prop("attrs/line/opacity", opacity);
}
}
);
paper.on("link:mouseover", (linkView: any) => {
const links = this.graph.getLinks();
links.map(link => {
if (link === linkView.model) {
return;
}
link.transitionColor(theme.colors.line.inactive, {duration:500});
link.toBack()
});
});
最佳答案
您的问题出在 TypeScript 上,而不是 Angular 上,而且可能与库可用的类型有关。
您的错误消息显示为 'Type' does not exist on type 'typeof devs'
。这意味着您的变量 devs
没有类型化,因此 TypeScript 从变量定义中动态推断类型:
// devs is not declared this way, but this is just to make the point
const devs = {
prop1: string;
prop2: number;
};
// you can add extra properties with the JavaScript square brackets access:
devs['Type'] = function() { ... }
devs['Type']() // <- this call works
devs.Type() // <-- compile time exception: Type is not present in the type.
要摆脱这个难题,您可以:
- 了解库的可用类型是否存在问题,并加载适当的类型文件(来自某个库的 .d.ts 文件)。如果其他人费心定义类型签名,这是迄今为止的首选选项,因为您的代码在编译时会被检查。但是,如果您无权访问类型文件,则在最后编译它们是不切实际的。
- 选择退出 TypeScript 类型系统,只使用
any
。如果您了解该库,并且习惯于在纯 JavaScript 中使用它,则可以声明您正在使用的对象不是类型化的:
// this out of any class body declares that somewhere in window, a joint object exists, and we don't know anything about it
declare const joint: any;
// or, when calling a subsection of joint with bad or incomplete typings:
const a1 = new (joint.shapes.devs as any).Type(node);
// same meaning, different syntax:
const a2 = new (<any>joint.shapes.devs).Type(node);
// you can just get an untyped reference to devs and use it:
const untypedDevs: any = joint.shapes.devs;
const a3 = new untypedDevs.Type(node);
一般来说,您应该尝试至少学习一点 TypeScript,因为这是您现在使用的语言。
希望对您有所帮助!
关于angular - 在 jointjs 中创建我自己的形状定义在 angular7 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58459508/