导出全局声明会破坏现有的自定义模块声明

Question

In my NextJS web app, I have an existing set of custom typings for packages I've installed that do not have types available. I needed to extend my window with a module from a third party script.

So I extended and exported the Window interface in my global.d.ts file. Once I did that, one of the packages that I've declared any types globally for started giving me the infamous Could not find a declaration file for module but it exists (TS7016) error. When I removed the new export of the new global window type, TS7016 went away`.

How can I have both custom typings for 3rd party modules along with a exported custom global type?

// global.d.ts
declare module '@package-maintainer/*';
declare module '@package-maintainer-2/*';
declare module 'some-package';
declare module 'some-package-2';

export declare global {
  interface Window {
    thirdPartyModule: {
      aMethod: () => void
    };
  }
}

Answer 1

After a handful of testing, what I believe the issue was was the exporting of a module, which turned the global.d.ts file itself into a module, and that is not compatible with declare module . I'm not exactly sure the reasoning behind this. I'd have to dig into this further.

The solution here was to separate the custom type definitions into two files, one for global definitions and one for module definitions:

// global.d.ts
export declare global {
  interface Window {
    thirdPartyModule: {
      aMethod: () => void
    };
  }
}

// modules.d.ts
declare module '@package-maintainer/*';
declare module '@package-maintainer-2/*';
declare module 'some-package';
declare module 'some-package-2';

With these separated, but both included in my tsconfig , I was able to extend my window object and keep my custom coercion to any for my third-party packages.