In V6 Beta typescript has multiple type errors

[StringKe]

"fabric": "^6.0.0-beta15" A lot of typescript types are incorrect in this version, in my local project there are up to 200 type checking errors in fabric!

Codesanbox

✔ Browser application bundle generation complete.

Error: node_modules/fabric/dist/src/filters/HueRotation.d.ts:14:22 - error TS2417: Class static side 'typeof HueRotation' incorrectly extends base class static side 'typeof ColorMatrix'.
  The types of 'defaults.mainParameter' are incompatible between these types.
    Type 'keyof HueRotation | undefined' is not assignable to type 'keyof ColorMatrix | undefined'.

14 export declare class HueRotation extends ColorMatrix {
                        ~~~~~~~~~~~


Error: node_modules/fabric/dist/src/shapes/Path.d.ts:39:17 - error TS2300: Duplicate identifier 'path'.

39     constructor(path: TComplexPathData | string, { path, left, top, ...options }?: Partial<Props>);
                   ~~~~


Error: node_modules/fabric/dist/src/shapes/Path.d.ts:39:52 - error TS2300: Duplicate identifier 'path'.

39     constructor(path: TComplexPathData | string, { path, left, top, ...options }?: Partial<Props>);
                                                      ~~~~

Codesanbox https://codesandbox.io/p/devbox/charming-williams-4qrkfz

Local angular 16.2.10

Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/Pattern/Pattern.ts:177:34 - error TS2339: Property 'width' does not exist on type 'CanvasImageSource'.
  Property 'width' does not exist on type 'VideoFrame'.

177           : ifNaN((patternSource.width as number) / width, 0),
                                     ~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/Pattern/Pattern.ts:181:34 - error TS2339: Property 'height' does not exist on type 'CanvasImageSource'.
  Property 'height' does not exist on type 'VideoFrame'.

181           : ifNaN((patternSource.height as number) / height, 0);
                                     ~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/Pattern/Pattern.ts:185:50 - error TS2339: Property 'width' does not exist on type 'CanvasImageSource'.
  Property 'width' does not exist on type 'VideoFrame'.

185       `<image x="0" y="0" width="${patternSource.width}" height="${
                                                     ~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/Pattern/Pattern.ts:186:23 - error TS2339: Property 'height' does not exist on type 'CanvasImageSource'.
  Property 'height' does not exist on type 'VideoFrame'.

186         patternSource.height
                          ~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/Canvas.ts:112:11 - error TS2564: Property '_isClick' has no initializer and is not definitely assigned in the constructor.

112   private _isClick: boolean;
              ~~~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/Canvas.ts:1599:3 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'SelectableCanvas<CanvasEvents>'.

1599   clear() {
       ~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/Canvas.ts:1607:3 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'SelectableCanvas<CanvasEvents>'.

1607   destroy() {
       ~~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/DOMManagers/CanvasDOMManager.ts:92:3 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'StaticCanvasDOMManager'.

92   setDimensions(size: TSize, retinaScaling: number) {
     ~~~~~~~~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/DOMManagers/CanvasDOMManager.ts:98:3 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'StaticCanvasDOMManager'.

98   setCSSDimensions(size: Partial<CSSDimensions>): void {
     ~~~~~~~~~~~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/DOMManagers/CanvasDOMManager.ts:104:3 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'StaticCanvasDOMManager'.

104   cleanupDOM(size: TSize) {
      ~~~~~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/DOMManagers/CanvasDOMManager.ts:116:3 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'StaticCanvasDOMManager'.

116   dispose() {
      ~~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/SelectableCanvas.ts:274:10 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'StaticCanvas<EventSpec>'.

274   static ownDefaults: Record<string, any> = canvasDefaults;
             ~~~~~~~~~~~


Error: node_modules/.pnpm/[email protected]/node_modules/fabric/src/canvas/SelectableCanvas.ts:276:10 - error TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'StaticCanvas<EventSpec>'.

[ShaMan123]

a very quick google search: https://stackoverflow.com/questions/45267500/exclude-node-modules-from-problems

tsconfig.cmpilerOptions "skipLibCheck": true

https://codesandbox.io/p/devbox/vigorous-dirac-2g4vmp?file=%2Ftsconfig.json%3A23%2C5-23%2C25

[Smrtnyk]

@ShaMan123 I am mostly successful
One thing I noticed is that I cannot do this.canvas.interactive = true; anymore
this.canvas is instance of new Canvas() imported from fabric.
Is there a replacement for this?

[Smrtnyk]

Second thing I noticed is that this is now throwing ts error

toObject() {
        return {
            ...super.toObject(),
            objectCaching: true,
        };
    }

I have a custom class that extends Group from fabric

[ShaMan123]

Weird
interactice is gone, use StaticCanvas

[StringKe]

@ShaMan123 I really shouldn't be importing paths under src, what if I need the TCanvasOptions type? Importing from under dist/src also gives me an error.

demo:

class Artboard extend Canvas {
    // parent type is TCanvasOptions
    construct(canvas:HtmlCanvasElement, options: ??) {
       super()
    }
}

I ended up using it this way and it wasn't convenient enough.

import type { Canvas, Path } from 'fabric';

export declare type CanvasOptions = ConstructorParameters<typeof Canvas>[1];
export declare type PathCommand = ConstructorParameters<typeof Path>[0];

[ShaMan123]

Open a pr/issue for missing exported types