有没有人在使用redux dev工具在TS中遇到这个错误？ “'窗口'类型中不存在”属性'__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'。“？

Question

我在index.tsx上收到此错误。

“Window”类型中不存在“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。非常感谢您提前提供的任何提示。

Answer 1

这是this question的一个特例。 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;

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

Answer 2

我对这个问题的处理方法如下：

export const composeEnhancers =
  (window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

Answer 3

如果同样的问题发生了变化，我就改变了

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

至

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

使用undefined时，要通过createStore(reducer, initial state, compose(applyMiddleware应用问题