Need an example using fabricjs.d.ts with TypeScript

Question

I am using fabricjs in a project that I am trying to convert to use TypeScript, but I cannot figure out how to use it. I used to create my own custom objects by doing the following:

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

In my new project, I installed the TypeDefinition file from here , but I cannot figure out how should I use it?

Looking at the .d.ts file, fabric.Object is not a function, therefore it is not allowed to pass to createClass, and createClass itself returns void, therefore I cannot assign a value to a variable.

Even if all of this worked, how do I format it so that it works with TypeScript? i.e., what am I exporting so that I can import it to another place where the Control class is needed?

Does anyone really have examples of this?

Answer 1

The old way to use your fabricjs.d.ts file is at the top of your file:

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

If you get it with tsd , you need to refer to your batch file tsd.d.ts

But now with typescript 1.6.2 and vscode you need to download the link file via tsd to get the definitions in your code.

In the d.ts file you can find the signature of 2 methods:

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

Thus, your code seems to be invalid because fabric.Object as an IObjectStatict interface cannot be function type. You can use the fabric.Object function as a function that executes

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

Answer 2

You can simply define a typescript class that extends the fabric class.

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

---

!!! The above code works fine in the browser, but not in the enjiornment node.

---

To work in a nodejs environment, for example, run tests without a browser, you need:

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