javascript - نیاز به نمونهای از استفاده از fabricjs.d.ts با TypeScript

من از fabricjs در پروژهای استفاده میکنم که قصد دارم آن را به TypeScript تبدیل کنم اما نمیتوانم بفهمم چگونه از آن استفاده کنم. قبلاً من اشیاء سفارشی خودم را با انجام کارهای زیر ایجاد میکردم:

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

در پروژه جدیدم، فایل TypeDefinition را از اینجا نصب کردهام اما نمیتوانم بفهمم چگونه باید از آن استفاده کنم؟

با نگاهی به فایل .d.ts، به نظر نمیرسد که fabric.Object یک تابع باشد بنابراین اجازه داده نمیشود که آن را به createClass منتقل کرد، و خود createClass مقدار void را برمیگرداند، بنابراین نمیتوانم این مقدار را به یک متغیر اختصاص دهم.

حتی اگر همه این کارها جواب دهد، چگونه باید این را قالببندی کنم تا به روش TypeScript کار کند؟ یعنی، چه چیزی را صادر کنم تا بتوانم آن را در جای دیگری که کلاس Control لازم است وارد کنم؟

واقعا کسی نمونهای از انجام این کار دارد؟

پاسخ شماره ۱

شما میتوانید به سادگی یک کلاس تایپاسکریپت تعریف کنید که از یک کلاس فبریک ارثبری میکند.

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

!!! کد بالا در مرورگر به خوبی کار میکند، اما در محیط Node.js کار نمیکند.

برای کار کردن در محیط Node.js، مانند اجرای تستهای واحد بدون مرورگر، شما نیاز دارید به:

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

پاسخ شماره ۲

روش قدیمی استفاده از فایل fabricjs.d.ts شما در بالای فایل شما است :

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

اگر آن را با tsd دریافت کنید، باید به فایل بسته tsd.d.ts خود ارجاع دهید

اما حالا با تایپاسکریپت 1.6.2 و ویاسکد شما فقط نیاز دارید که فایل مرجع را از طریق tsd دانلود کنید تا تعاریف را در کد خود داشته باشید.

در فایل d.ts میتوانید دو امضای متد را بیابید:

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

createClass(properties?: any): void;

پس کد شما به نظر نادرست میآید زیرا fabric.Object به عنوان رابط IObjectStatict نمیتواند به نوع Function اختصاص داده شود. شما میتوانید fabric.Object را به عنوان یک Function تبدیل کنید با انجام

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