Typescript: how to declare namespace with import statement?

Question

I'm using cypress and declaring namespace to infer type of custom commands.

index.d.ts

declare namespace Cypress {
  interface Chainable {
    commandA: typeof commandA;
  }
}

commands.ts

const commandA = ...;

Cypress.commands.add('commandA', commandA);

In this context, I have to use CyHttpMessages type in cypress/types/net-stubbing package. So I imported that type in commands.ts file.

commands.ts (with import)

import { CyHttpMessages } from 'cypress/types/net-stubbing';

...

But, after importing that type index.d.ts file was broken with red lines. This file couldn't find type of commandA function. I think import statement is cause of this problem.

How can I use import statement with declare namespace ? What is the problem? Thanks for your reading.

Answer 1

You need to use the declare global {} when setting up the Typescript definition for custom Cypress commands.

The documentation provides an example but based on the provided information it should look like this:

index.d.ts

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

declare global {
  namespace Cypress {
    interface Chainable {
      commandA(): Chainable<Element>
    }
  }
}