使用 TS 的 Redux DevTools 扩展出错：“属性 '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' 在类型 'Window' 上不存在。”？

Question

我的 index.tsx 上出现此错误。

“窗口”类型上不存在属性“ REDUX_DEVTOOLS_EXTENSION_COMPOSE ”。

这是我的 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。非常感谢您提前提供的任何提示。

原文由 justkeithcarr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这就是您可以在 typescript react 应用程序中使用 redux-dev-tools 的方式。

为 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 在一个额外的文件中创建。

现在您可以像往常一样在 React.js 中使用 Provider 作为：

 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();

原文由 crispengari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是 本题 的特例。 Redux 不为 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 提供类型，因为这个函数是由 Redux DevTools 公开的，而不是 Redux 本身。

它是：

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

要么：

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

这已经由 redux-devtools-extension 包含 TypeScript 类型的包完成。如果已安装，则应使用其导入而不是手动访问 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 。

原文由 Estus Flask 发布，翻译遵循 CC BY-SA 4.0 许可协议