TypeScriptでfabricjs.d.tsを使用する例が必要

Question

私は、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クラスが必要な場所のどこにでもインポートできるように、エクスポートするものは何ですか？

誰もが実際にこれを行う例がありますか？

Answer 1

あなたfabricjs.d.tsを使用しての古い方法は、ファイルの先頭にある：あなたがあなたのtsd.d.tsバンドルファイルを参照する必要がtsdでそれを取得した場合

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

しかし、typescript 1.6.2とvscodeでは、コード内の定義を得るために参照ファイルをtsdでダウンロードするだけで済みます。 d.tsで

を使用すると、2つの方法の署名を発見した可能ファイル：fabric.ObjectとしてインターフェイスIObjectStatictは関数を入力するasignableすることはできませんので

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

createClass(properties?: any): void; 

は、だからあなたのコードは無効と思われます。ファブリックをキャストすることができます。ファンクションとしてのオブジェクト

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

Answer 2

ファブリッククラスを拡張するtypescriptクラスを定義できます。

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

---

！上記のコードは、ブラウザでうまく動作しますが、nodej環境ではうまく動作しません。ブラウザなく、このような実行ユニットテストとして、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); 
    }); 
});