I setup global namespaces for my objects by explicitly setting a property on window
.
window.MyNamespace = window.MyNamespace || {};
TypeScript underlines MyNamespace
and complains that:
The property 'MyNamespace' does not exist on value of type 'window' any"
I can make the code work by declaring MyNamespace
as an ambient variable and dropping the window
explicitness but I don't want to do that.
declare var MyNamespace: any;
MyNamespace = MyNamespace || {};
How can I keep window
in there and make TypeScript happy?
As a side note I find it especially funny that TypeScript complains since it tells me that window
is of type any
which by definitely can contain anything.
This question is related to
typescript
I wanted to use this in an Angular (6) library today and it took me a while to get this to work as expected.
In order for my library to use declarations I had to use the d.ts
extention for the file that declares the new properties of the global object.
So in the end, the file ended up with something like:
/path-to-angular-workspace/angular-workspace/projects/angular-library/src/globals.d.ts
Once created, don't forget to expose it in your public_api.ts
.
That did it for me. Hope this helps.
If you are using Typescript 3.x, you may be able to omit the declare global
part in the other answers and instead just use:
interface Window {
someValue: string
another: boolean
}
This worked with me when using Typescript 3.3, WebPack and TSLint.
typescript prevent accessing object without assigning type that has the desired property or
already assigned to any
so you can use optional chaining window?.MyNamespace = 'value'
.
For reference (this is the correct answer):
Inside a .d.ts
definition file
type MyGlobalFunctionType = (name: string) => void
If you work in the browser, you add members to the browser's window context by reopening Window's interface:
interface Window {
myGlobalFunction: MyGlobalFunctionType
}
Same idea for NodeJS:
declare module NodeJS {
interface Global {
myGlobalFunction: MyGlobalFunctionType
}
}
Now you declare the root variable (that will actually live on window or global)
declare const myGlobalFunction: MyGlobalFunctionType;
Then in a regular .ts
file, but imported as side-effect, you actually implement it:
global/* or window */.myGlobalFunction = function (name: string) {
console.log("Hey !", name);
};
And finally use it elsewhere in the codebase, with either:
global/* or window */.myGlobalFunction("Kevin");
myGlobalFunction("Kevin");
I don't need to do this very often, the only case I have had was when using Redux Devtools with middleware.
I simply did:
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
Or you could do:
let myWindow = window as any;
and then myWindow.myProp = 'my value';
Using create-react-app v3.3 I found the easiest way to achieve this was to extend the Window
type in the auto-generated react-app-env.d.ts
:
interface Window {
MyNamespace: any;
}
For those who want to set a computed or dynamic property on the window
object, you'll find that not possible with the declare global
method. To clarify for this use case
window[DynamicObject.key] // Element implicitly has an 'any' type because type Window has no index signature
You might attempt to do something like this
declare global {
interface Window {
[DyanmicObject.key]: string; // error RIP
}
}
The above will error though. This is because in Typescript, interfaces do not play well with computed properties and will throw an error like
A computed property name in an interface must directly refer to a built-in symbol
To get around this, you can go with the suggest of casting window
to <any>
so you can do
(window as any)[DynamicObject.key]
Make a custom interface extends the Window and add your custom property as optional.
Then, let the customWindow that use the custom interface, but valued with the original window.
It's worked with the [email protected].
interface ICustomWindow extends Window {
MyNamespace?: any
}
const customWindow:ICustomWindow = window;
customWindow.MyNamespace = customWindow.MyNamespace {}
To keep it dynamic, just use:
(window as any).MyNamespace
Using Svelte or TSX? None of the other answers were working for me.
Here's what I did:
(window as any).MyNamespace
Here's how to do it, if you're using TypeScript Definition Manager!
npm install typings --global
Create typings/custom/window.d.ts
:
interface Window {
MyNamespace: any;
}
declare var window: Window;
Install your custom typing:
typings install file:typings/custom/window.d.ts --save --global
Done, use it! Typescript won't complain anymore:
window.MyNamespace = window.MyNamespace || {};
For those using the Angular CLI it's straightforward:
src/polyfills.ts
declare global {
interface Window {
myCustomFn: () => void;
}
}
my-custom-utils.ts
window.myCustomFn = function () {
...
};
If you're using IntelliJ, you also needed to change the following setting in the IDE before your new polyfills pick up:
> File
> Settings
> Languages & Frameworks
> TypeScript
> check 'Use TypeScript Service'.
The accepted answer is what I used to use, but with TypeScript 0.9.* it no longer works. The new definition of the Window
interface seems to completely replace the built-in definition, instead of augmenting it.
I have taken to doing this instead:
interface MyWindow extends Window {
myFunction(): void;
}
declare var window: MyWindow;
UPDATE: With TypeScript 0.9.5 the accepted answer is working again.
Create a file called global.d.ts
e.g /src/@types/global.d.ts
then define an interface like:
interface Window {
myLib: any
}
ref: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html
Using
window["MyNamespace"] = window["MyNamespace"] || {};
should be alright as using string property, but if you really want to have a separated window and organised your code, you can extends window object:
interface MyNamespacedWindow extends Window {
MyNamespace: object;
}
declare var window: MyNamespacedWindow;
Most of the other answers are not perfect.
I also encounter the similar problem this morning. I tried so many "solutions" on StackOverflow, but none of them produced absolutely no type errors and enabled triggering type jumping in IDE(webstorm or vscode).
Finally, from here
https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512
I found a reasonable solution to attach typings for a global variable that acts as interface/class and namespace both.
Example is below:
// typings.d.ts
declare interface Window {
myNamespace?: MyNamespace & typeof MyNamespace
}
declare interface MyNamespace {
somemethod?()
}
declare namespace MyNamespace {
// ...
}
The code above merges the typings of namespace MyNamespace
and interface MyNamespace
into the global variable myNamespace
(the property of window).
After finding answers around, I think this page might be helpful. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Not sure about the history of declaration merging, but it explains why the following could work.
declare global {
interface Window { MyNamespace: any; }
}
window.MyNamespace = window.MyNamespace || {};
AS OF TYPESCRIPT ^3.4.3 THIS SOLUTION NO LONGER WORKS
Or...
you can just type:
window['MyNamespace']
and you wont get a compile error and it works the same as typing window.MyNamespace
Typscript does not perform typecheck on string properties.
window["newProperty"] = customObj;
Ideally, the global variable scenario should be avoided. I use it sometimes to debug an object in browser console.
If you need to extend the window
object with a custom type that requires the use of import
you can use the following method:
window.d.ts
import MyInterface from './MyInterface';
declare global {
interface Window {
propName: MyInterface
}
}
See 'Global Augmentation' in the 'Declaration Merging' section of the Handbook: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation
From version 3.4, TypeScript has supported globalThis
.
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#type-checking-for-globalthis
// in a global file:
var abc = 100;
// Refers to 'abc' from above.
globalThis.abc = 200;
A "global" file is the file which does not have an import/export statement. So declaration var abc;
can be written in .d.ts.
Global are "evil" :), i think the best way to have also the portability is:
First you export the interface: (eg: ./custom.window.ts)
export interface CustomWindow extends Window {
customAttribute: any;
}
Second you import
import {CustomWindow} from './custom.window.ts';
Third cast global var window with CustomWindow
declare let window: CustomWindow;
In this way you don't have also red line in different IDE if you use with existent attributes of window object, so at the end try:
window.customAttribute = 'works';
window.location.href = '/works';
Tested with Typescript 2.4.x and newest!
First you need to declare the window object in current scope.
Because typescript would like to know the type of the object.
Since window object is defined somewhere else you can not redefine it.
But you can declare it as follows:-
declare var window: any;
This will not redefine the window object or it will not create another variable with name window
.
This means window is defined somewhere else and you are just referencing it in current scope.
Then you can refer to your MyNamespace object simply by:-
window.MyNamespace
Or you can set the new property on window
object simply by:-
window.MyNamespace = MyObject
And now the typescript won't complain.
Source: Stackoverflow.com