typescript 有没有人在使用 redux 开发工具的 TS 中遇到过这个错误？“属性 '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' 在类型 'Window' 上不存在。”？

Has anyone came across this error in TS with redux dev tools? "Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'."?

提问by justkeithcarr

I'm getting this error on my index.tsx.

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

Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window'.

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

Here is my index.tsx 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();

I've installed @types/npm install --save-dev redux-devtools-extension and I'm using create-react-app-typescript. Thanks alot for any tips for what's going on in advance.

我已经安装了 @types/npm install --save-dev redux-devtools-extension 并且我正在使用 create-react-app-typescript。非常感谢您提前提供有关正在发生的事情的任何提示。

回答by Estus Flask

This is a special case of this question. Redux doesn't provide types for __REDUX_DEVTOOLS_EXTENSION_COMPOSE__because this function is exposed by Redux DevTools, not Redux itself.

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

It's either:

它是：

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

Or:

或者：

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

This is already done by redux-devtools-extensionpackage that contains TypeScript typings. If it's installed, its imports should be used instead of accessing __REDUX_DEVTOOLS_EXTENSION_COMPOSE__manually.

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

回答by Austris Cirulnieks

My approach to the issue was the following:

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

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

回答by Arturas

Working as a charm:

作为魅力工作：

const store = createStore(
    rootReducer,
    initialState,
    compose(
        applyMiddleware(...middleware),
        (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()
    )       

);

回答by atconway

The most streamlined way to make this work with TypeScriptis to use the redux-devtools-extensionand install as a dev dependency as follows:

使其工作的最简化方法TypeScript是使用redux-devtools-extension并作为开发依赖项安装，如下所示：

npm install --save-dev redux-devtools-extension

The next step for those new to reduxand these developer tools was confusing and unclear. The docs all have code like the following:

对于那些新手redux和这些开发人员工具来说，下一步是令人困惑和不清楚的。文档都有如下代码：

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

The problem is I don't have any middleware configured so this wasn't working. In it's most primitive usage, this is all you need:

问题是我没有配置任何中间件，所以这不起作用。在最原始的用法中，这就是您所需要的：

import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(myReducer, composeWithDevTools());

At this point if you click the extension in the browser and there is a valid redux store, you will be able to inspect the state.

此时，如果您在浏览器中单击扩展程序并且存在有效的 redux 存储，您将能够检查状态。

This is an alternative approach to using (window as any)and also clears up just exaclty howto use the redux-devtools-extensionin its minimal form.

这是使用的另一种方法，(window as any)并且还明确了如何以redux-devtools-extension最小形式使用 。

回答by Danial

if any one still stuck into this issue I fixed it and this is my final store.js file with following packages 1- Redux Thunk 2- Connected React Router 3- History

如果有人仍然遇到这个问题，我修复了它，这是我的最终 store.js 文件，其中包含以下包 1- Redux Thunk 2- Connected React Router 3- History

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import thunk from 'redux-thunk';
import {createBrowserHistory} from 'history';
import rootReducer from '../redux/reducers';
export const history = createBrowserHistory();
const initialState = {}
const enhancers = []
const middleware = [
    thunk,
    routerMiddleware(history)
]

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__() || compose;
    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension)
    }
}

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
);

export default createStore(
    rootReducer,
    initialState,
    composedEnhancers
);

回答by mmunier44

Had same issue changed I just changed

有同样的问题改变了我只是改变了

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

to

到

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

to get past an undefinedapply issue when using createStore(reducer, initial state, compose(applyMiddleware

让过去的undefined使用时，适用问题createStore(reducer, initial state, compose(applyMiddleware

回答by Ghausc1

For anyone struggling with getting concurrently to work, the general advice I found is to replace your "client" script in package.json with: "client": "cd client && npm start",

对于任何努力同时工作的人，我发现的一般建议是将 package.json 中的“client”脚本替换为：“client”：“cd client && npm start”，

I tried this and I still got an error, so then I tried: "client": "cd client && cd my-app && npm start",

我试过了，但仍然出现错误，所以我尝试了：“client”：“cd client && cd my-app && npm start”，

This worked for me! The problem is that when you use create-react-app inside the "client" folder, there is an added level in between the client folder and your public and src folders which is called "my-app" by default. Using Brad's code, npm misses this folder so can't find the react files it needs to start your app.

这对我有用！问题是，当您在“client”文件夹中使用 create-react-app 时，在 client 文件夹与您的 public 和 src 文件夹之间有一个附加级别，默认情况下称为“my-app”。使用 Brad 的代码，npm 错过了这个文件夹，因此无法找到启动应用程序所需的 react 文件。