Error "Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window & typeof globalThis'."?

Question

When configuring Redux Devtools I get the following Typescript error:

Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window & typeof globalThis'.

store ts.

import { applyMiddleware, createStore, Store } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { DevsState } from './ducks/devs/types';
import rootReducer from './ducks/rootReducer';
import rootSaga from './ducks/rootSaga';


export interface ApplicationState {
  devs: DevsState
}
const composeEnhancers =
  typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const sagaMiddleware = createSagaMiddleware();

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware),
);

const store: Store<ApplicationState> = createStore(rootReducer, enhancer);


sagaMiddleware.run(rootSaga);

export default store;

Answer 1

My solution to the problem was :

  const composeEnhancers =
  typeof window === 'object' &&
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
  }) : compose;

Answer 2

This mistake, like me commented, is a compiler/transpilator problem (call as you wish) that runs "out" of the browser, every time the Typescript transpilator notices an update in their sources it will generate scripts again .js, in this the object window does not exist, because the process does not occur in the browser, so as the object does not exist will issue the error:

does not exist on type 'Window & typeof globalThis

The transpilator of TypeScript not necessarily is bound to understand that you will run your scripts in a browser or other environment because the language has no focus on environment.

Knowing this the window will be processed to retrieve the REDUX_DEVTOOLS_EXTENSION_COMPOSE at the time of this transpilation, and as the object did not exist until then, it processes with a "possible" error and to this point.

The solution is to do the following cast: window as any, This in Typescript is forcing a cast from the variable to any, and any can be "anything", so so the "transpilator" nay will wait for an object of the type Window (used in browsers) or type thisGlobal (used in Nodejs), as the cast said it could be anything so it "compiles" normally and at the time of executing the code in the browser it will work normally.

You can do (as in your own answer):

const composeEnhancers =
   typeof window === 'object' &&
   (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
   (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;

Or you can just repurpose it into a variable, something like:

let win: any = window as any;

const composeEnhancers =
   typeof window === 'object' &&
   win.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
   win.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;

And so I could even reuse the variable win in more places of your script, avoiding the repeated casts

It is worth noting that this occurs in other environments such as Angular and Ionic, but this is because they also use TypeScript and the problem has the same origin.