TypeScript : `'cornerRadius'` does not exist on type `Shape<RectConfig>`

[Mouarius]

The error

Typescript throws an error when using the cornerRadius property of a variable types Shape<RectConfig> :

Error message :

error TS2339: Property 'cornerRadius' does not exist on type 'Shape<RectConfig>'.

Context

package.json

{
  "name": "project",
  "version": "0.0.0",
  "scripts": {...},
  "dependencies": {
    "konva": "^9.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-konva": "^18.2.10",
    "use-image": "^1.1.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@vitejs/plugin-react": "^1.3.0",
    "@vitest/coverage-c8": "^0.24.0",
    "vite": "^2.9.9",
  },
}

Description

I'm trying to use a custom styling function for <Transformer> anchors using the anchorStyleFunc method property. According to the type definition of this property we should have :

anchorStyleFunc: (anchor: Shape<ShapeConfig>) => void

But according to the documentation for complex styling on the Transformer, the type of the anchor property is an instance of a Konva.Rect. As written in the provided example, we can call cornerRadius() on it :

      // create new transformer
      var tr = new Konva.Transformer({
        anchorStyleFunc: (anchor) => {
          // anchor is Konva.Rect instance
          // you manually change its styling
          anchor.cornerRadius(10);
          if (anchor.hasName('top-center') || anchor.hasName('bottom-center')) {
            anchor.height(6);
            anchor.offsetY(3);
            anchor.width(30);
            anchor.offsetX(15);
          }
          if (anchor.hasName('middle-left') || anchor.hasName('middle-right')) {
            anchor.height(30);
            anchor.offsetY(15);
            anchor.width(6);
            anchor.offsetX(3);
          }
          // you also can set other properties
          // e.g. you can set fillPatternImage to set icon to the anchor
        },
        nodes: [circle],
      });
      layer.add(tr);

But on the React counterpart, the type of anchor is not a Konva.Rect instance, but a Shape<ShapeConfig> which prevents us from using cornerRadius.

Maybe I'm using those properties the wrong way, or didn't understand correctly the whole library and types. But it seems wrong for me that we cannot call cornerRadius on a Shape<RectConfig>

Note: I tried to type it to a Konva.Rect but then there is a conflict with the expected type of the anchorStyleFunc

Thank you very much for your help !

Minimal example

I've just made a code sandbox with a minimal example : here

[lavrton]

Use Konva.Rect for anchor argument.

[Mouarius]

Use Konva.Rect for anchor argument.

Thank you for your answer ! That's why I thought, but then, as I mentioned there is also an error with the type TransformerConfig that expects a (anchor: Shape) => void for the anchorStyleFunc function. Do you have the same error ?

[lavrton]

I see what you mean now, I will change config to match that.

[Mouarius]

Perfect ! Thank you very much !