TypeScript definition for StoreEnhancer prevents rest parameters

Question

I’m setting up an app with React-Redux and configured the store, similar to the guide shown here

Here is my code:

import { applyMiddleware, compose, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/reducers'

export default function configureStore() {

  const middlewares = [thunkMiddleware];
  const middlewareEnhancer = applyMiddleware(...middlewares);

  const enhancers = [middlewareEnhancer];

  const composedEnhancers = compose(...enhancers);

  const preloadedState = (<any>window).__PRELOADED_STATE__;

  delete (<any>window).__PRELOADED_STATE__;

  const store = createStore(rootReducer, preloadedState, composedEnhancers);

  return store;

}

However, I keep receiving the following Typescript error when I run build

TS2345: Argument of type '(...args: any[]) => {}' is not assignable to parameter of type 'StoreEnhancer<{}, {}>'.

I’m confused. Doesn’t Redux’s declaration file state (shown below) that the StoreEnhancer simply receives the Store and State extensions as empty plain objects?

export type StoreEnhancer<Ext = {}, StateExt = {}> = (next: StoreEnhancerStoreCreator) => StoreEnhancerStoreCreator<Ext, StateExt>

If so, why wouldn’t it accept 'Any' type from the rest parameters, even though I set “noImplicitAny” property to "true" in the config file, as shown below?

(To the best of my knowledge, rest parameters can’t receive a declared type anyway.)

What am I missing?

Also, I’m using the following package versions:

"react": "^16.4.2",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"webpack": "^4.16.5",
"awesome-typescript-loader": "^5.2.0",
"typescript": "^3.0.3"
"@types/react": "^16.4.12",
"@types/redux": "^3.6.0",
"@types/redux-thunk": "^2.1.0"

with the following TS config settings:

"compilerOptions": {
* "outDir": "./dist/",
* "sourceMap": true,
* "noImplicitAny": true,
* "module": "esnext",
* "target": "esnext",
* "jsx": "react",
* "moduleResolution": "node",
* "noUnusedLocals": true,
* "noUnusedParameters": true,
* "strict": true,
* "esModuleInterop": false,
* "noFallthroughCasesInSwitch": true,
* "allowSyntheticDefaultImports": true
}

Matt McCutchen · Accepted Answer · 2018-09-02 03:05:10Z

3

The problem is that the return type of composedEnhancers is {}, while createStore expects it to be StoreEnhancerStoreCreator<{}, {}>. And that return type of {} is coming from your call to compose, which is matching this overload in the type declarations because you are spreading an array of enhancers:

export function compose<R>(...funcs: Function[]): (...args: any[]) => R;

If you don't specify R, it defaults to {}. So either specify R or just use compose(middlewareEnhancer) unless you really need a dynamic array of enhancers.

answered Sep 2, 2018 at 3:05

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Louis Over a year ago

Thanks. It makes, I think. So basically, if I use rest parameters to represent one argument, it causes generic <R> in compose to default to exactly one {} type, while the spread syntax forces createStore to expect more than one {} type from compose?

Matt McCutchen Over a year ago

If you pass a single spread argument to compose, then the return type of the composed function defaults to {}, regardless of the actual number of elements in the spread argument. The {} does not match StoreEnhancerStoreCreator<Ext, StateExt>, which is the expected return type of the function passed as the third argument to createStore. There is no spreading going on in createStore.

Louis Over a year ago

Sorry, I should have said ...more than one {} type as a result of compose instead of ...from compose. Nonetheless, both alternatives worked. Thanks.

Matt McCutchen Over a year ago

FWIW, I still don't understand what you're referring to by "more than one {} type". The expected type is StoreEnhancerStoreCreator<{}, {}>. That has more than one {} in it as a type argument, but it's a single type.

Collectives™ on Stack Overflow

TypeScript definition for StoreEnhancer prevents rest parameters

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related