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

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

编译代码给我两个错误

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

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.

要摆脱这个难题，您可以:

1. 了解库的可用类型是否存在问题，并加载适当的类型文件(来自某个库的 .d.ts 文件)。如果其他人费心定义类型签名，这是迄今为止的首选选项，因为您的代码在编译时会被检查。但是，如果您无权访问类型文件，则在最后编译它们是不切实际的。
2. 选择退出 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，因为这是您现在使用的语言。

希望对您有所帮助!