Typescript definitions broken for 3.2.3 release and TypeScript 3.3.3

[emlynmac]

I just pulled the latest version for a new project - I've been using konva 2.x on a previous project.

First issue - types are missing for the filters in index-types.d.ts. I've got a fix for that and will make a PR for it shortly. Filters need explicit types to make things happy it seems:

 export const Filters: {
    Blur: typeof Blur;
    Brighten: typeof Brighten;
    Contrast: typeof Contrast;
    Emboss: typeof Emboss;
    Enhance: typeof Enhance;
    Grayscale: typeof Grayscale;
    HSL: typeof HSL;
    HSV: typeof HSV;
    Invert: typeof Invert;
    Kaleidoscope: typeof Kaleidoscope;
    Mask: typeof Mask;
    Noise: typeof Noise;
    Pixelate: typeof Pixelate;
    Posterize: typeof Posterize;
    RGB: typeof RGB;
    RGBA: typeof RGBA;
    Sepia: typeof Sepia;
    Solarize: typeof Solarize;
    Threshold: typeof Threshold;
  };

Second issue is

Property 'children' in type 'Stage' is not assignable to the same property in base type 'Container'.
  Type 'Collection<BaseLayer>' is not assignable to type 'Collection<Node<NodeConfig>>'.
    Types of property 'push' are incompatible.
      Type '(item: BaseLayer) => void' is not assignable to type '(item: Node<NodeConfig>) => void'.
        Types of parameters 'item' and 'item' are incompatible.
          Type 'Node<NodeConfig>' is not assignable to type 'BaseLayer'.
            Property 'canvas' is missing in type 'Node<NodeConfig>'.ts(2416)

Stage.ts redefines the children property to be of a different type. Container, which defines children as Collection<Child extends Node>
Stage extends Container, which defines children as Collection<BaseLayer>.

These two types are incompatible and so TS throws up the error message.

[lavrton]

How to reproduce these errors? I don't see them.

[emlynmac]

You need to tighten up the typescript compiler options.
My options prior to finding a workaround:

{
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2018"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "strict": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  }

In order to suppress the warnings, I added:

    "skipLibCheck": true,

I see that there's much of the library that isn't really typed yet. I can help out with this, as I'm using this library a fair amount on my current project.

[gabberr]

When you upgraded from version 2 to 3, did you change the way you import Konva?

ver2: import Konva from 'konva'
ver3: import Konva from 'konva/lib/Core'

[emlynmac]

@gabberr This is a fresh use, not an upgrade.

From what I can tell from here: https://www.npmjs.com/package/konva, what you're suggesting is only to reduce imports, not anything to do with the version of konva at all.

Using the import from konva/lib/Core fails with TypeScript completely:

Could not find a declaration file for module 'konva/lib/Core'. '/node_modules/konva/lib/Core.js' implicitly has an 'any' type.
  Try `npm install @types/konva` if it exists or add a new declaration (.d.ts) file containing `declare module 'konva/lib/Core';`

[lavrton]

@gabberr import Konva from 'konva' should work just fine.

konva/lib/Core is for partial import. I didn't find a good solution to organize types for that case yet.

[JOU-amjs]

@emlynmac @lavrton Yes,I got the same problems.Once I import the Konva by import Konva from 'konva',it would throw the 2 problem by TypeScript.So how to resolve them?

[emlynmac]

@JOU-amjs I resolved this in my post above.

[JOU-amjs]

@emlynmac Thanks!😁

[lavrton]

Just published version 3.2.5. It should work ok in strict mode. Please try it and let me know how it works for you.

[strikerdev]

Guys I am still seeing this issue on 3.4.1, I upgraded from 2 to 3.4.1 and seeing lots of type errors. Tried solutions mentioned above nothing worked out.

[lavrton]

@strikerdev what kind of type errors? Can you post them?

[strikerdev]

@lavrton I am sorry for my comment, it was due to ts version mismatch, which is fixed after upgrading ts version. thanks 👍

[HazyFish]

import Konva from 'konva/lib/Core'; gives following error with TypeScript 4.0.3 & Konva 7.1.4

Could not find a declaration file for module 'konva/lib/Core'. './node_modules/konva/lib/Core.js' implicitly has an 'any' type.
  Try `npm install @types/konva` if it exists or add a new declaration (.d.ts) file containing `declare module 'konva/lib/Core';`ts(7016)

[tosandeepgarg]

I am still getting same error. Konva =7.2.5 and TypScript=3.8.3

[lavrton]

I hope to fix it with the new konva@8.

[wikywin]

I hope to fix it with the new konva@8.

@lavrton
I have upgraded to version 8.1.3, and I want to use that Minimal bundle. so I change all import Konva from 'konva' to import Konva from 'konva/lib/Core'.

but so much error pop up: TS2503: Cannot find namespace 'Konva'.