如何使用 TypeScript 将自定义属性添加到 FabricJS 对象？

Question

使用自定义属性创建新的 FabricJS 对象时，将导致 TypeScript 错误，指出 IRectOptions 扩展自的 IObjectOptions 中不存在自定义属性。我如何全局使用自定义属性扩展 IObjectOptions？

const workarea = new fabric.Rect({
  id: "workarea",
  width: 250,
  height: 150,
});

当我将鼠标悬停在“id：工作区”上时，会出现以下错误：

类型参数 '{ id: string;宽度：数量；高度：数字； }' 不可分配给“IRectOptions”类型的参数。 对象字面量只能指定已知属性，并且“IRectOptions”类型中不存在“id”。

Answer 1

id

不是

IRectOptions

上可识别的属性：矩形的构造函数对象选项参数。

但是，您可以使用

Object.assign()

将自定义属性分配给

Rect

的实例。这是一个例子：

TS游乐场

import {fabric} from 'fabric';

const workarea = Object.assign(
  new fabric.Rect({
    width: 250,
    height: 150,
  }),
  {id: "workarea"},
);

workarea;
//^? const workarea: fabric.Rect & { id: string; }

workarea.id;
       //^? (property) id: string

---

另请参阅：fabricjs/fabric.js#6917 - 如何向 Fabric 对象添加自定义属性并在对象转换为 JSON 时保留我的新属性？

Answer 2

使用 Typescript 模块增强

declare module 'fabric/fabric-impl' {
    export interface IObjectOptions {
        id?: string;
    }
}