Definitelytyped: TypeScript errors in react-redux typings file

[domgee]

• [x] I tried using the latest react-redux.d.ts file in this repo and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [ ] I want to talk about react-redux.d.ts.
  
  
  
  • The authors of that type definition are cc/ @....
  
  

The TypeScript compiler is reporting errors in the react-redux typings file, even though I have excluded the typings directory in tsconfig.

TypeScript version: 1.8.10

Here are the errors I'm getting

ERROR in /home/me/dev/proj/typings/main/ambient/react-redux/index.d.ts (64,16): error TS2314: Generic type 'Dispatch' requires 1 type argument(s).

ERROR in /home/me/dev/proj/typings/main/ambient/react-redux/index.d.ts (68,21): error TS2314: Generic type 'ActionCreator' requires 1 type argument(s).

ERROR in /home/me/dev/proj/typings/main/ambient/react-redux/index.d.ts (95,13): error TS2314: Generic type 'Store' requires 1 type argument(s).

typings.json:

{
    "ambientDependencies": {
        "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
        "material-ui": "registry:dt/material-ui#0.15.0+20160602140214",
        "query-string": "registry:dt/query-string#3.0.0+20160331065456",
        "react": "github:DefinitelyTyped/DefinitelyTyped/react/react.d.ts#f407264835650f5f38d4bb2c515a79e7a835916b",
        "react-addons-css-transition-group": "registry:dt/react-addons-css-transition-group#0.14.0+20160316155526",
        "react-addons-transition-group": "registry:dt/react-addons-transition-group#0.14.0+20160417134118",
        "react-dom": "github:DefinitelyTyped/DefinitelyTyped/react/react-dom.d.ts#ca5bfe76d2d9bf6852cbc712d9f3e0047c93486e",
        "react-redux": "registry:dt/react-redux#4.4.0+20160501125835",
        "react-tap-event-plugin": "registry:dt/react-tap-event-plugin#0.0.0+20160226083632",
        "require": "registry:dt/require#2.1.20+20160316155526",
        "socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654"
    }, 
    "dependencies": {
        "es6-promise": "registry:npm/es6-promise#3.0.0+20160211003958",
        "radium": "registry:npm/radium#0.16.6+20160310030142",
        "redux-thunk": "registry:npm/redux-thunk#2.0.0+20160525185520",
        "webpack": "registry:npm/webpack#1.12.9+20160418172948"
    }
}

tsconfig.json:

{
    "version": "1.8.10",
    "compileOnSave": false,
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    "exclude": [
        "node_modules",
        "typings"
    ]
}

Why is it reporting errors from an excluded directory? How can I eliminate these errors?

Thank you in advance

[raineorshine]

This fixed it for me:

It looks like the dt definitions for react-redux have a dependency on the dt definitions for redux, these differ from the ones bundled with the redux npm module, which it looks like you may be relying on.
Installing the ambient (global) definitions of redux from dt should resolve the issue.
typings install dt~redux --global --save
The TS typing space is messy.
The fact that when you install dt type definitions for react-redux it strips any dependencies forcing you to install each yourself makes things that bit more confusing.

http://www.mzan.com/article/37714658-typescript-errors-in-react-redux-typings-file.shtml

[kenchengch]

I've got the same issue. BTW, I am using tsd not typeings. i tried install typings but not work.

[schickling]

@raineorshine thanks for the workaround 👍

Is there any progress about this issue?

[schickling]

_ping_

[nostalgiaz]

+1

[radu-porumb]

+1

[maksimluzik]

+1

Having similar issues also with react and react-form

[philoUK]

+1

[jhukdev]

+1 Getting this now with redux-thunk and react-redux. Fixed by moving away from typings all together and using the new @types/*

[waynebrantley]

With @types everything works as expected. This should probably be closed?

[RainingNight]

+1

[7mllm7]

+1

[7mllm7]

TL;DR

If you change (even manually, just for trial) in the file my-project/node_modules/@types/react-redux/index.d.ts everywhere there is Dispatch or Store to Dispatch<any> and Store<any> respectively, it will solve it.

My check

My dependencies (from package.json, created with Create React App):

"dependencies": {
  "react": "^16.4.1",
  "react-dom": "^16.4.1",
  "react-redux": "^5.0.7",
  "react-scripts-ts": "2.16.0",
  "redux-logger": "^3.0.6",
  "redux-thunk": "^2.3.0"
},
"scripts": {
  "start": "react-scripts-ts start",
  "build": "react-scripts-ts build",
  "test": "react-scripts-ts test --env=jsdom",
  "eject": "react-scripts-ts eject",
  "lint": "./node_modules/.bin/tslint --project . -c tslint.json"
},
"devDependencies": {
  "@types/jest": "^23.3.1",
  "@types/node": "^10.5.4",
  "@types/react": "^16.4.7",
  "@types/react-dom": "^16.0.6",
  "@types/react-redux": "^6.0.5",
  "@types/redux-logger": "^3.0.6",
  "typescript": "^2.9.2"
},

And the errors I received looked like this:

• my-project/node_modules/@types/react-redux/index.d.ts (195,16): Generic type 'Dispatch<S>' requires 1 type argument(s).
• my-project/node_modules/@types/react-redux/index.d.ts (326,12): Generic type 'Store<S>' requires 1 type argument(s).

So I went to the file above, inside @types/react-redux and noticed around line 195:

interface MapDispatchToPropsFunction<TDispatchProps, TOwnProps> {
    (dispatch: Dispatch, ownProps: TOwnProps): TDispatchProps;
}

Note that Dispatch has no generic definition (such as Dispatch<any>).
The import in the same file is:

import {
    Action,
    ActionCreator,
    AnyAction,
    Dispatch,
    Store
} from 'redux';

Checking in my-project/node_modules/redux/index.d.ts showed that Dispatch is indeed defined with 1 generic type parameter:

export interface Dispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): T;
}

So it looks like we just need to update https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-redux/index.d.ts to provide generic types to Dispatch, Store and other types imported from redux.

Now two questions:

1. Do you think that's the solution? If so, then we'd need to create a PR, right?
2. I only encountered problems with Dispatch and Store, and I think that Dispatch<any> is not ideal, for example maybe Dispatch<Action> is more suitable. We'd need to know what we're doing in order to fix it properly without breaking anything.

[7mllm7]

Created https://github.com/DefinitelyTyped/DefinitelyTyped/pull/27724, let's see what the world thinks...

[6farer]

This is blocking for me, is there an ETA on the merge?

[michal-ciechan]

FWIW

For me it was because I was using redux 4.0.0, but it was picking up another @types/{some package}/node_modules/redux which was 3.6.0.

More info can be found here.

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/27724#issuecomment-419677019

[maxkostow]

Cross posting this comment:
I think #27724 prevents you from using redux-thunk actions in mapDispatchToProps since you cannot control the Dispatch type

[VKobeliatsky]

I think the problem is that current overrides for Connect are parametrized by State but not Dispatch. In reality the Store that is being connected can have any enhancers applied. Those enhancers are allowed to change target Stores Dispatch signature.

I suggest that corresponding Connect overrides should be parametrized by Store parameter, instead of the State. This way it would be possible to extract both State (ReturnType<Store['getState']>) and Dispatch (Store['dispatch']) types.

This way you would be able to define store creation like this:

// ./store.ts
import {applyMiddleware, createStore} from 'redux';
import thunk, {ThunkMiddleware, ThunkAction} from 'redux-thunk';

import {AppAction} from './actions';
import reducer from './reducers';

export interface AppState {
    foo: string;
}

export function createAppStore() {
    return createStore(
        reducer,
        {},
        applyMiddleware(thunk as ThunkMiddleware<AppState, AppAction>)
    );
}

export type AppStore = ReturnType<typeof createAppStore>;
export type AppThunk = ThunkAction<void, AppState, void, AppAction>;

```js
// ./thunks.ts
import {AppThunk} from './store'
export function thunkAction(): AppThunk {
return (dispatch, getState) => {
// launch missiles
};
}

And when connecting a component:
```js
// ./some-container.ts
import {AppStore} from './store';
import {thunkAction} from './thunks'

export const Connected = connect<
    {foo: string},
    {onClick(): void},
    {},
    AppStore
>(
    state => ({foo: 'bar'}), // state is inferred correctly to AppState
    dispatch => ({ // dispatch is inferred correctly to AppStore['dispatch']
        onClick() {
            dispatch(thunkAction());
        }
    })
)(SomeComponent);

[chengtie]

I cloned a react project in my Mac which was probably developed under Windows.

I did yarn add react-scripts and yarn install, package.json is as follows. Then PORT=8000 ./node_modules/.bin/react-scripts start returned the following error.

My npm view redux version returned 4.0.5.

Does anyone know how to fix this?

    Failed to compile.

    /Users/chengtie/Startup/PRODSERVER/tmp/10Studio/frontend/src/components/NoAuthLoginRedirect/index.tsx
    TypeScript error in /Users/chengtie/Startup/PRODSERVER/tmp/10Studio/frontend/src/components/NoAuthLoginRedirect/index.tsx(18,13):
    Generic type 'Dispatch<S>' requires 1 type argument(s).  TS2314

        16 | import { getAppSubscribePage } from '../../services/app-utils';
        17 | export interface INoAuthLoginRedirectProps {
      > 18 |   dispatch: Dispatch;
           |             ^
        19 |   onDissmiss?: Function;
        20 |   next?: string;
        21 |   subscription?: Subscription;

package.json:

    {
      "name": "frontend",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@material-ui/core": "^4.9.8",
        "@microsoft/office-js-helpers": "^1.0.2",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "@types/react-stripe-elements": "^6.0.4",
        "@uifabric/react-cards": "^0.109.49",
        "axios": "^0.19.2",
        "color": "^3.1.2",
        "cross-storage": "^1.0.0",
        "dva": "^2.4.1",
        "dva-model-creator": "^0.4.3",
        "formik": "^2.1.4",
        "lodash": "^4.17.15",
        "moment": "^2.24.0",
        "monaco-editor": "^0.20.0",
        "node-sass": "^4.13.1",
        "office-ui-fabric-react": "^7.105.4",
        "query-string": "^6.11.1",
        "react": "^16.13.1",
        "react-app-polyfill": "^1.0.6",
        "react-dom": "^16.13.1",
        "react-monaco-editor": "^0.35.0",
        "react-scripts": "^3.4.1",
        "react-stripe-elements": "^6.1.1",
        "redux-devtools-extension": "^2.13.8",
        "start": "^5.1.0",
        "styled-components": "^5.0.1",
        "typescript": "^3.8.3",
        "yup": "^0.28.3"
      },
      "scripts": {
        "start": "SET PORT=8000 && react-scripts start",
        "build": "react-scripts --max_old_space_size=8096 build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "@types/color": "^3.0.1",
        "@types/cross-storage": "^0.8.29",
        "@types/jest": "^25.1.4",
        "@types/lodash": "^4.14.149",
        "@types/node": "^13.9.5",
        "@types/query-string": "^6.3.0",
        "@types/react": "^16.9.27",
        "@types/react-dom": "^16.9.5",
        "@types/react-redux": "^7.1.7",
        "@types/styled-components": "^5.0.1",
        "@types/yup": "^0.26.33"
      }
    }

Here is a part of that index.tsx:

import React from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';
import { push } from 'react-router-redux';

import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dialog, getId, DialogType, Stack, Text } from 'office-ui-fabric-react';

import { State } from '../../store/reducer';
import { getNextPath } from '../../selectors/header';
import { getSubscription, getTrial } from '../../selectors/subscription';
import { Subscription } from '../../services/subscription';
import { getIsSubscriptionActive, getPlanProductName } from '../Plans/utils';
import { selectAppName } from '../../selectors/app';
import { AppName } from '../../models/app';
import { getAppSubscribePage } from '../../services/app-utils';
export interface INoAuthLoginRedirectProps {
  dispatch: Dispatch;
  onDissmiss?: Function;
  next?: string;
  subscription?: Subscription;
  trial: Subscription;
  feature: string;
  app: AppName;
}