How to make custom cypress commands work with typescript

Question

I have set up the following example repo following the example code from the documentation of Cypress both for setting up the project and adding typescript to it to the letter: https://github.com/jacobdo2/cypress-ts-starter

I add the example command in commands.ts:

Cypress.Commands.add("dataCy", (id: string) => cy.get(`[data-cy="${id}"]`));

and the declaration in index.ts:

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(value: string): Chainable<Element>;
  }
}

and I get the following error in index.ts:

and in commands.ts:

Answer 1

Did you try with the following?

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      dataCy(value: string): Chainable<Element>;
    }
  }
}

You should add the namespace inside the global declaration. It is working for me correctly.

I am using Cypress v8.7.0 and Typescript v4.1.3.

This is documented in https://docs.cypress.io/guides/tooling/typescript-support#Types-for-Custom-Commands