Convert to TypeScript and add public types

[jaredpalmer]

Convert to TypeScript and add public types

[Keysox]

I went ahead and added typings for folks to use: DefinitelyTyped/DefinitelyTyped#41222

Now, all you need to do is yarn add @types/cypress-image-snapshot -D for this plugin to work with TypeScript!

[jackjocross]

Yep that makes sense! So if we add an index.d.ts to the root of cypress-image-snapshot and publish to NPM again, everyone will receive types without having to touch their node_modules directly.

I think what would be even better is if we rewrite to use TypeScript and then generate index.d.ts from our source, similar to how Formik does.

But creating types manually is definitely useful if we want to start there.

[Keysox]

@Svish -- options have been added if you upgrade to 3.1.1 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/41897/files#diff-603108fb86a139bc0934ce518b4267eeR10

[jackjocross]

@makeupsomething for sure give it a shot! I'm happy to review any PRs.

[anujpunia]

So admittedly I am a TS amateur. I was just playing around with things and I did get it to config a bit easier if I added index.d.ts directly to the node_modules/cypress-image-snapshot/ with

import 'cypress';

declare global {
  namespace Cypress {
    interface Chainable {
      matchImageSnapshot: (options?: any) => void;
    }
  }
}

Obviously hacking a node_modules folder is a no no but I thought that might be a way to go though im not sure how much different it is from having a custom types folder somewhere else. I have seen a few other plugins use this sort of pattern and thought I would give it a shot.

Adding index.d.ts as you said still gives me error in the .ts spec file-
Property 'matchImageSnapshot' does not exist on type 'Chainable<undefined>'.

[edupeeth]

I shifted to Percy. They have a free version as well and much smoother. Had no luck here.

[jordandlaman]

So admittedly I am a TS amateur. I was just playing around with things and I did get it to config a bit easier if I added index.d.ts directly to the node_modules/cypress-image-snapshot/ with

import 'cypress';

declare global {
  namespace Cypress {
    interface Chainable {
      matchImageSnapshot: (options?: any) => void;
    }
  }
}

Obviously hacking a node_modules folder is a no no but I thought that might be a way to go though im not sure how much different it is from having a custom types folder somewhere else. I have seen a few other plugins use this sort of pattern and thought I would give it a shot.

[makeupsomething]

Im pretty new to typescript but would like to have a go at this issue if it is ok?

[lemcii]

import "cypress";
import "jest.d.ts";

import * as JestImageSnapshot from "jest-image-snapshot";

declare global {
    namespace Cypress {
        interface Chainable {
            matchImageSnapshot: (
                options?:
                    | string
                    | (Partial<
                          JestImageSnapshot.MatchImageSnapshotOptions &
                              Loggable &
                              Timeoutable &
                              ScreenshotOptions
                      >),
            ) => void;
        }
    }
}

Just based on what I understood from the readme, just a good stop gap for now.

[Lukaszli]

Any solution? How to use this plugin with typescript?

[Svish]

@Keysox Think the options are missing Cypress.ScreenshotOptions