Redux DevTools Extension using TSでのエラー：「プロパティ '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' はタイプ 'Window' に存在しません」?

質問内容

index.tsxでこのエラーが発生しました。

プロパティに' redux_devtools_extension_compose（レデュースデバイスツールエクステンションコンポーズ）。 ' はタイプ 'Window' に存在しません。

以下は私の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();

私は@types/npm install --save-dev redux-devtools-extensionをインストールし、create-react-app-typescriptを使用しているのです。事前に何が起こっているのかのヒントをたくさんありがとうございます。

どのように解決するのですか？

このように redux-dev-tools をtypescriptのreactアプリケーションで使用する方法です。

のグローバルInterfaceを作成します。 Window オブジェクトを作成します。

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

次に composeEnhancers を以下のように作成します。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

次に store .

const store = createStore(rootReducers, composeEnhancers());

rootReducers - というのは、私の場合 combinedReducers を参照しています。

これで Provider の中で、いつものように React.js のように

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

の中のすべてのコードは index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import rootReducers from "./reducers";

import { Provider } from "react-redux";
import { createStore, compose, applyMiddleware } from "redux";

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducers, composeEnhancers());

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
reportWebVitals();