Question

我正在使用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);

编译代码给了我两个错误

错误TS2339：类型“ typeof devs”上不存在属性“类型” 错误TS2341：类型“ typeof”上不存在属性“ examples” 形状”。

我该如何解决这个问题？

此外，客户链接定义了transitionColor方法，但不能在paper.on（“ link：mouseover”，....中调用，错误为

“链接”类型上不存在属性“ transitionColor”。

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()
      });
});

Answer 1

您的问题出在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。如果您知道该库，并且可以轻松地在普通的'ol 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，因为这是您现在正在使用的语言。

希望有帮助！

在jointjs中创建自己的形状定义在angular7中不起作用

1 个答案: