fabric.js中ILineOptions类型不存在class属性的报错原因咨询

问题原因 #

• 纯JavaScript为弱类型语言，允许你向fabric.Line的配置对象传入任意自定义属性，运行时会正常挂载到实例上，因此纯JS的演示代码没有报错。
• TypeScript为强类型语言，fabric官方的TS类型定义中，ILineOptions接口没有预先定义class字段，你传入未声明的属性就会触发类型校验错误。

解决方案 #

你可以根据自己的需求选择任意一种方案解决：

1. 临时绕过类型校验
   创建实例时用类型断言把配置对象标记为any即可跳过校验：

const line = new fabric.Line(points, {
  strokeWidth: 2,
  fill: '#999999',
  stroke: '#999999',
  originX: 'center',
  originY: 'center',
  selectable: false,
  hasBorders: false,
  hasControls: false,
  evented: false,
  class:'line'
} as any)

2. 扩展fabric全局类型定义
   在项目中新增一个.d.ts声明文件，给fabric的基础配置接口补充class属性定义，后续所有fabric对象实例都可以合法使用该属性：

declare module 'fabric' {
  interface IObjectOptions {
    class?: string;
  }
}

3. 使用fabric原生支持的自定义数据字段
   fabric的类型定义原生预留了data字段用于存储自定义数据，你可以把自定义标识放到该字段下，无需额外修改类型：

const line = new fabric.Line(points, {
  // 其余原有配置不变
  data: {
    class: 'line'
  }
})
// 后续取值用 line.data.class 即可

内容的提问来源于stack exchange，提问作者naoval luthfi