Quelqu'un a-t-il rencontré cette erreur dans TS avec des outils de développement redux? "La propriété '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' n'existe pas sur le type 'Fenêtre'."?

Question

Je reçois cette erreur sur mon index.tsx.

La propriété 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' n'existe pas sur le type 'Window'.

Voici mon code index.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

import { Provider } from 'react-redux';

import { createStore, compose, applyMiddleware } from 'redux';
import rootReducer from './store/reducers';

import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

 const store = createStore(rootReducer, composeEnhancers(
     applyMiddleware(thunk)
 ));

ReactDOM.render(  <Provider store={store}><App /></Provider>, document.getElementById('root'));

registerServiceWorker();

J'ai installé @ types/npm install --save-dev redux-devtools-extension et j'utilise create-react-app-TypeScript. Merci beaucoup pour tous les conseils à l'avance.

Answer 1

Ceci est un cas particulier de cette question . Redux ne fournit pas de types pour __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ car cette fonction est exposée par Redux DevTools, pas par Redux lui-même.

C'est soit:

const composeEnhancers = window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] as typeof compose || compose;

Ou:

declare global {
    interface Window {
      __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Cela est déjà fait par redux-devtools-extension package contenant des typages TypeScript. S'il est installé, ses importations doivent être utilisées au lieu d'accéder à __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ manuellement.

Answer 2

Si le même problème avait changé, je venais de changer

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

à

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() || compose

pour contourner un undefined problème d'application lors de l'utilisation de createStore(reducer, initial state, compose(applyMiddleware