adding custom attribute to fabric.js Object using Angular

Question

As told in the question I'm trying to add a custom property to a Fabric.js object.

I've tried

rect.customAttribute = value

but this stucks the compilation I get the following error:

Object literal may only specify known properties, and 'customAttribute' does not exist in type 'IRectOptions'.

I've also tried the function toObject() but couldn't find back my attribute and set it. Also after using toObject() then trying to set my added attribute with the previous method I logically get the same error.

let rect = new fabric.Rect(
    {
        left:0,
        top: 0,
        width: 60
        height:60,
        fill: 'orange',
        selectable: true,
        evented: true,
        name: 'rect',
        cornerColor:'red',
        cornerSize:5,
        borderColor:'red',
        borderScaleFactor: 5,
        noScaleCache:false,
        customAttribute:false
    })
rect.toObject(['customAttribute'])

Answer 1

You can simply create an interface which inherit from the original one. For instance , if i want to add an id to a rectangle :

interface IRectWithId extends fabric.IRectOptions {
    id: number;
}

And then use it as a parameter of your rect

const opt = {
    left: left,
    top: top,
    strokeWidth: 1,
    width: width,
    height: height,
    fill: 'rgba(98,98,98,0.8)',
    stroke: 'rgba(98,98,98,1)',
    hasControls: true,
    id: this.masks.length
} as IRectWithId;

const rect = new fabric.Rect(opt);