Convert to TypeScript and add public types

[jackjocross]

There have been a few issues related to TypeScript types (#13, #72), updating the source code to TypeScript would make future changes easier and give consumers better type support.

[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.

[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.

[makeupsomething]

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

[jackjocross]

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

[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.

[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>'.

[Lukaszli]

Any solution? How to use this plugin with typescript?

[edupeeth]

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

[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!

[Svish]

@Keysox Think the options are missing Cypress.ScreenshotOptions

[Keysox]

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