使用 Redux Dev Tools 扩展和 Typescript

Question

我正在将我的项目转换为 Typescript。

这在 JS 中一直对我有用。

/* ##################### */
/* #### REDUX STORE #### */
/* ##################### */

const store = createStore(rootReducer, {
  // INITIAL STATE GOES HERE
},window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

但是在 Typescript 中我遇到了这些错误：

我该如何解决这个问题？

Answer 1

TS 编译器抛出错误，因为它不知道 Window 对象上的 REDUX_DEVTOOLS_EXTENSION 属性。您可以扩展 Window 接口并添加让 TS 编译器满意的接口。或者你可以这样做：

createStore(rootReducer,{//INITIAL STATE GOES HERE},composeWithDevTools());

引用：https://redux.js.org/recipes/configuring-your-store#integrating-the-devtools-extension

Answer 2

我找到的最简单的解决方案是将 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 显式添加到 window 对象

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

使用 Redux Dev Tools 扩展和 Typescript

Working with Redux Dev Tools extension and Typescript

typescript

redux

redux-devtools

redux-devtools-extension