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

Posted 2023-03-25

【中文标题】需要将 fabricjs.d.ts 与 TypeScript 一起使用的示例

【英文标题】：Need example of using fabricjs.d.ts with TypeScript

【发布时间】：2016-02-09 08:21:29

【问题描述】：

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

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

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

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

即使所有这些都有效，我应该如何格式化它以便它以 TypeScript 的方式工作？即，我要导出什么以便可以在需要 Control 类的其他地方导入它？

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

【参考方案1】：

你可以定义一个 typescript 类来扩展一个 fabric 类。

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

【参考方案2】：

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

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

如果您使用 tsd 获取它，则必须引用您的 tsd.d.ts 捆绑文件

但现在使用 typescript 1.6.2 和 vscode 您只需要通过 tsd 下载参考文件即可获取代码中的定义。

在 d.ts 文件中，您可以找到 2 个方法签名：

createClass(parent: Function, properties?: any): void;

createClass(properties?: any): void;

所以你的代码似乎无效，因为作为接口 IObjectStatic 的 fabric.Object 不能分配给类型函数。你可以将 fabric.Object 作为一个函数来做

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

【讨论】：

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