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

【问题标题】：Need example of using fabricjs.d.ts with TypeScript需要将 fabricjs.d.ts 与 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 类的其他地方导入它？

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

【问题讨论】：

标签： javascript angularjs typescript fabricjs

【解决方案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 文件中导入声明的格式以便使用织物。