Cypress adding Custom commands

Question

I got this file Cypress\cypress\support\commands\Selector_Commands.ts

  Cypress.Commands.add('getInputByLabel', { prevSubject: ['optional'] }, (subject: string | null, labelText: string) => {
    return subject ? cy.wrap(subject).find(`label:contains("${labelText}")`) : cy.get(`label:contains("${labelText}")`);
  });
  

And this file Cypress\cypress\index.d.ts

// eslint-disable-next-line @typescript-eslint/no-unused-vars
namespace Cypress {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface Chainable<Subject> {
      getInputByLabel(label: string): Chainable<JQuery<HTMLElement>>;
      getButtonByText(buttonText: string): Chainable<JQuery<HTMLElement>>;
    }
}

But on this line:

(subject: string | null, labelText: string) => {

I receive errors:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '(subject: string | null, labelText: string) => Cypress.Chainable<JQuery<HTMLElement>>' is not assignable to parameter of type 'CommandFnWithSubject<"getInputByLabel", void>'.
      Types of parameters 'subject' and 'prevSubject' are incompatible.
        Type 'void' is not assignable to type 'string | null'.ts(2769)
cypress.d.ts(616, 7): The last overload is declared here.

How would I fix it? I had similar code on Linux and it worked fine.

Answer 1

At Cypress.Commands.add you have specified two parameters (subject, labelText), while at Chainable only one (label).

I believe that you need:

getInputByLabel(subject: string, labelText: string): Chainable<JQuery<HTMLElement>>;