I am trying to provide typescript type definitions for a library built with webpack that registers itself in the global window scope. The library is built for direct integration into the browser via CDN.
I read, that defining a Window
interface and adding the library to it should do the trick and the IDE should merge my definition with its global Window
definition.
This works if I integrate the *.d.ts
file as a library in WebStrom but it doesn't work with VSCode.
Here is a simple example: my-lib.d.ts
export interface Window {
mylib: MyLib
}
export class MyLib {
foo(): string;
bar: number;
}
and the way I would like to access it: consuming-script.js
/// <reference path="my-lib.d.ts"/>
const result = window.mylib.foo();
While the import reference works, (I can access the MyLib
class) IntelliSense doesn't show the additional property mylib
on the window
object.
Using a global declaration in the my-lib.d.ts
works, however this makes mylib
available under the global scope and not the window
object which is no alternative.
What am I doing wrong? Is there something I have to change in the visual studio code settings? - I can't believe that it's so easy in WebStorm and such a hassle in VSCode which actually is a Microsoft IDE importing a Microsoft TS Type Definition.
Titian Cernicova-Dragomir was right, the important part is defining the interface in the global scope.
once changed to this it worked:
declare global {
interface Window {
mylib: MyLib
}
}
export class MyLib {
foo(): string;
bar: number;
}