DefinitelyTyped / DefinitelyTyped/DefinitelyTyped

[@types/react-redux] `connect` incorrectly infers `never` for arrow function arguments

Open
#46,396 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
51.4k
Forks
30.4k
Avg merge
3d 21h
Merged PRs (30d)
108

Description

  • I tried using the @types/xxxx package 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).

  • Mention the authors (see Definitions by: in index.d.ts) so they can respond.

  • Authors: @tkqubo @clayne11 @tansongyang @nicholasboll @mdibyo @pdeva @val1984 @jrakotoharisoa @apapirovski @surgeboris @soerenbf

Potentially related to #30946 #19989 #37414 #31363

Problem

When using connect(...)(<arrow function>), the args to the arrow function are incorrectly inferred as never type.

import React from 'react'
import { connect } from 'react-redux'

import { RootState } from '../app/rootReducer'

const MyComp = connect((state: RootState) => {
  const a = 1
  const { comments } = state
  return {
    comments,
    a
  }
})(({ a, comments }) => {
  // `a` and `comments` are both inferred as `never` here!
  return (
    <div>
      <span>{a}</span>
      <pre>{comments}</pre>
    </div>
  )
})

export default MyComp
Screen Shot 2020-07-28 at 8 14 18 AM

See Codesandbox.

Process

I forked this codesandbox from the "Redux Toolkit: Advanced Tutorial" to make my sandbox demonstrating the problem.

The only changes are:

  • Adding the src/components/MyComp.tsx file
  • Adding the hoist-non-react-statics and @types/hoist-non-react-statics dependencies (to see if its the same issue as #37414)

Questions

I have a large codebase with > 250 occurrences of this issue popping up when I try to upgrade from react-redux@5 to @7.

  • Is there some solution/workaround that would not require manually editing all 250 occurrences?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the inference failure using the linked CodeSandbox and the example in src/components/MyComp.tsx, then inspect the @types/react-redux declarations involved in connect. Done means the arrow function arguments are inferred from the connected props instead of becoming never, while the demonstrated usage type-checks correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, redux, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.