javascript - Trenger eksempel på bruk av fabricjs.d.ts med TypeScript

Jeg bruker fabricjs i et prosjekt jeg prøver å konvertere til å bruke TypeScript, men jeg får ikke til å bruke det. Tidligere lagde jeg mine egne tilpassede objekter ved å gjøre følgende:

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

I mitt nye prosjekt har jeg installert TypeDefinition-filen herfra, men jeg får ikke helt til å finne ut hvordan jeg skal bruke den?

Ser man på .d.ts-filen, ser det ut til at fabric.Object ikke er en funksjon, så det er ikke tillatt å sende det til createClass, og createClass selv returnerer void, så jeg kan ikke tilordne verdien til en variabel.

Selv om alt dette fungerte, hvordan bør jeg formatere dette slik at det fungerer på TypeScript-måten? Altså, hva eksporterer jeg slik at jeg kan importere det andre steder hvor Control-klassen trengs?

Har noen egentlig noen eksempler på å gjøre dette?

Svar #1

Du kan bare definere en TypeScript-klasse som utvider en Fabric-klasse.

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

!!! Koden ovenfor fungerer fint i nettleser, men ikke i Node.js-miljø.

For å arbeide i Node.js-miljø, for eksempel kjøre enhetstester uten en nettleser, trenger du:

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

Svar #2

Den gamle måten å bruke fabricjs.d.ts på er øverst i filen din :

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

Hvis du får det med tsd, må du referere til tsd.d.ts-buntfilen din

Men nå med TypeScript 1.6.2 og VSCode trenger du bare å laste ned referansefilen via tsd for å få definisjonene i koden din.

I d.ts-filen kan du finne signaturen til de 2 metodene:

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

createClass(properties?: any): void;

Så koden din ser ut til å være ugyldig fordi fabric.Object som grensesnitt IObjectStatic ikke kan tilordnes typen Function. Du kan caste fabric.Object som en Function ved å gjøre

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

Relaterte artikler