Typescript: .d.ts file not recognized

Question

This one's probably extremely simple but I'm going nuts trying to figure it out.

I have a very simple self-executing function in an outer index.ts file that needs to register a global variable on the window object. I want to assign it like so:

(() => {
  window.myCustomGlobal = new MyCustomGlobal();
})()

I created index.d.ts alongside index.ts:

import { MyCustomGlobal} from './classes';

declare interface Window {
  myCustomGlobal: MyCustomGlobal;
}

No errors in the above, all looks good. The application compiles fine.

In the IDE, however, I get an error: ts2339: Property 'myCustomGlobal' does not exist on type 'Window'

I can't for the life of me figure out what exactly makes Typescript "figure out" what .d.ts file to include. In certain libs, having a .d.ts file alongside a .js file causes it to get picked up, and it works fine. In fact, I used the exact same interface as above with a global third-party lib and it worked great; it just seems like my IDE won't pick it up.

I've tried adding index.d.ts to tsconfig.json in include as well as files with no luck.

Can somebody explain, as if to a child, what causes TS to pick up declaration files? Some days I feel like I get it, and then in stupid simple examples like this I feel like an idiot.

Thanks

Answer 1

There might be two issues here:

1.) You need to augment Window interface in global scope.

Either remove all import/export keywords to make the containing file a non-module/script. Or you can use declare global in a module to mark everything wrapped in it as global declaration:

import { MyCustomGlobal} from './classes';

declare global {
  interface Window {
    myCustomGlobal: MyCustomGlobal;
  }
}

2.) Equally named files, that only differ in their .ts/.d.ts extension, don't work. To quote the docs:

Please note that the compiler does not include files that can be possible outputs; e.g. if the input includes index.ts, then index.d.ts and index.js are excluded. In general, having files that differ only in extension next to each other is not recommended.

Make sure to give a different name to index.d.ts (like global.d.ts), so the compiler doesn't only pick index.ts. global.d.ts will included automatically, if placed somewhere in the TS project marked by tsconfig.json and if "files" and "include" config options are left unspecified.

Answer 2

We declared "include": ["src"] in our tsconfig.json and this caused declarations.d.ts in root ("/") to not be detected.