Javascript 需要将fabricjs.d.ts与TypeScript一起使用的示例

我在一个试图转换为使用TypeScript的项目中使用fabricjs，但我不知道如何使用它。之前，我会通过执行以下操作创建自己的自定义对象：

my.namespace.Control = fabric.util.createClass(fabric.Object, {
    id: "",
    type: 'Control',
    color: "#000000", 
    ...
});

在我的新项目中，我已经从安装了TypeDefinition文件，但我不知道应该如何使用它

查看.d.ts文件，fabric.Object似乎不是函数，因此不允许传递给createClass，createClass本身返回void，因此我无法将该值分配给变量

即使所有这些都有效，我应该如何格式化它，使其以打字脚本的方式工作？也就是说，我应该导出什么以便在需要控制类的其他地方导入它

---

有人真的有这样做的例子吗？

使用fabricjs.d.ts的旧方法位于文件的顶部：

/// <reference path="path/to/your/fabricjs.d.ts" />

因此，您的代码似乎无效，因为作为接口IObjectStatict的fabric.Object不能作为类型函数。您可以将fabric.Object作为函数进行强制转换

my.namespace.Control = fabric.util.createClass(<Function>fabric.Object, {
  id: '',
  type: 'Control',
  color: '#000000', 
  ...
});

my.namespace.Control=fabric.util.createClass（fabric.Object{
id:“”，
键入：“控件”，
颜色：'#000000'，
...
});

您只需定义一个扩展fabric类的typescript类

export interface IMindObjectOptions {
    item: IMindItem;
}

export interface IMindExpanderOptions  extends IMindObjectOptions {
    x: number;
    y: number;
    radius: number;
    isExpanded: boolean;
}

export class MindExpander extends fabric.Circle implements IMindObjectOptions {

    public constructor(options: IMindExpanderOptions) {
        const circleOptions: ICircleOptions = {
            originX: "center",
            originY: "center",
            left: options.x,
            top: options.y,
            radius: options.radius,
            stroke: "#000000",
            fill: options.isExpanded ? "#00FFFF": "#00FF00",
            selectable: false
        };
        super(circleOptions);
        this.item = options.item;
    }

    public readonly item: IMindItem;
}

---

！！！上面的代码在浏览器中运行良好，但在nodejs环境中不起作用

---

要在nodejs环境中工作，例如在没有浏览器的情况下运行单元测试，您需要：

import {assert} from "chai";
import * as f from 'fabric';
import {ITextOptions} from "fabric";

declare function require(s: string): any;
declare const __dirname: string;

const fabric = require("fabric").fabric;

interface ITextConstructor {
    new(text: string, options: ITextOptions): f.Text;
}
function getTextConstructor(): ITextConstructor {
    return fabric.Text;
}

describe("nodejs setup", function () {
    it("fabric is imported correctly", function () {
        const x = fabric.Text as f.Text;
        assert.equal(typeof x, "function");
    });
    it("fabric class is extensible", function () {
        class SubText extends getTextConstructor() {
            public constructor(text: string, options: fabric.ITextOptions) {
                super(text, options);
            }
        }

        const c = new SubText("Hello", {left: 100, top: 100});
        assert.equal(c.text, "Hello");
        assert.isNotNull(c);
    });
});

---

我理解上面的答案，但是从那以后有什么变化吗？另外，为了使用fabric，我不确定.ts文件中导入声明的格式。

import {assert} from "chai";
import * as f from 'fabric';
import {ITextOptions} from "fabric";

declare function require(s: string): any;
declare const __dirname: string;

const fabric = require("fabric").fabric;

interface ITextConstructor {
    new(text: string, options: ITextOptions): f.Text;
}
function getTextConstructor(): ITextConstructor {
    return fabric.Text;
}

describe("nodejs setup", function () {
    it("fabric is imported correctly", function () {
        const x = fabric.Text as f.Text;
        assert.equal(typeof x, "function");
    });
    it("fabric class is extensible", function () {
        class SubText extends getTextConstructor() {
            public constructor(text: string, options: fabric.ITextOptions) {
                super(text, options);
            }
        }

        const c = new SubText("Hello", {left: 100, top: 100});
        assert.equal(c.text, "Hello");
        assert.isNotNull(c);
    });
});