Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript errors in react-redux typings file #9611

Closed
3 of 4 tasks
domgee opened this issue Jun 9, 2016 · 21 comments
Closed
3 of 4 tasks

TypeScript errors in react-redux typings file #9611

domgee opened this issue Jun 9, 2016 · 21 comments

Comments

@domgee
Copy link

domgee commented Jun 9, 2016

  • I tried using the latest react-redux.d.ts file in this repo and had problems.
  • I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
  • 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
Copy link
Contributor

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
Copy link

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

@schickling
Copy link
Contributor

schickling commented Jul 27, 2016

@raineorshine thanks for the workaround 👍

Is there any progress about this issue?

@schickling
Copy link
Contributor

ping

@nostalgiaz
Copy link
Contributor

+1

1 similar comment
@radu-porumb
Copy link

+1

@maksimluzik
Copy link

maksimluzik commented Jan 18, 2017

+1

Having similar issues also with react and react-form

@philoUK
Copy link

philoUK commented Jan 18, 2017

+1

@jahilldev
Copy link
Contributor

jahilldev commented Jan 19, 2017

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

@waynebrantley
Copy link
Contributor

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

@RainingNight
Copy link

+1

@rcanessa89
Copy link

rcanessa89 commented Jul 31, 2018

I have the same issue using @types.

This is my dev dependencies
"devDependencies": { "@types/history": "^4.6.2", "@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/react-router-dom": "^4.3.0", "@types/redux": "^3.6.0", "@types/redux-actions": "^2.3.0", "@types/redux-logger": "^3.0.6", "redux-logger": "^3.0.6", "typescript": "^2.9.2", "why-did-you-update": "^0.1.1" }

Errors:

(195,16): Generic type 'Dispatch' requires 1 type argument(s).

(202,16): Generic type 'Dispatch' requires 1 type argument(s).

(270,16): Generic type 'Dispatch' requires 1 type argument(s).

(326,12): Generic type 'Store' requires 1 type argument(s).

@7mllm7
Copy link
Contributor

7mllm7 commented Jul 31, 2018

+1

@7mllm7
Copy link
Contributor

7mllm7 commented Jul 31, 2018

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
Copy link
Contributor

7mllm7 commented Jul 31, 2018

Created #27724, let's see what the world thinks...

7mllm7 added a commit to 7mllm7/DefinitelyTyped that referenced this issue Aug 6, 2018
@6farer
Copy link

6farer commented Aug 9, 2018

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

@michal-ciechan
Copy link

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.

#27724 (comment)

@maxkostow
Copy link

maxkostow commented Nov 6, 2018

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

@VKobeliatsky
Copy link

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>;
// ./thunks.ts
import {AppThunk} from './store'
export function thunkAction(): AppThunk  {
    return (dispatch, getState) => {
        // launch missiles
    };
}

And when connecting a component:

// ./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
Copy link

chengtie commented Apr 8, 2020

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;
}

@orta orta closed this as completed Jun 7, 2021
@orta
Copy link
Collaborator

orta commented Jun 7, 2021

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests