Definitelytyped: @types/react-redux: @connect class decorator is broken

[haizz]

• [x] I tried using the @types/xxxx package 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).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @tkqubo @seansfkelley @thasner @kenzierocks @clayne11 @tansongyang
  
  

  "devDependencies": {
    "typescript": "^2.4.2"
  },
  "dependencies": {
    "@types/react-redux": "5.0.3",
    "react": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }

import * as React from 'react';
import { connect } from 'react-redux';

@connect()
class MyComponent extends React.Component<any, any> {
    get property(): string { return "value" }
}

Error on @connect line:

Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<any, any>>' is not assignable to type 'typeof MyComponent'.
    Type 'Component<Pick<any, any>, ComponentState>' is not assignable to type 'MyComponent'.
      Property 'property' is missing in type 'Component<Pick<any, any>, ComponentState>'.

It does not even work with just simple render() either:

@connect()
class MyComponent extends React.Component<any, any> {
    render() {
        return (<div></div>);
    }
}

Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<any, any>>' is not assignable to type 'typeof MyComponent'.
    Type 'Component<Pick<any, any>, ComponentState>' is not assignable to type 'MyComponent'.
      Types of property 'render' are incompatible.
        Type '() => false | Element' is not assignable to type '() => Element'.
          Type 'false | Element' is not assignable to type 'Element'.
            Type 'false' is not assignable to type 'Element'.

It works with an empty Component class (which is covered by a test case) but it's just an useless trivial situation.

[thasner]

this is a duplicate of https://github.com/DefinitelyTyped/DefinitelyTyped/issues/9951

decorator usage is not supported

[zheeeng]

+1

[Lazarencjusz]

It is duplicated but I can't see it is fixed...

[GaryGolf]

try
const { connect } = require('react-redux');

[bdteo]

Any updates on this?

[xahon]

The thing that makes us to define props interfaces before class and define export below the class. So if you want to add another thing in your connect you must jump around file instead of making it in one place
Also it ruins GoToSource navigation that moves you to the bottom of the class instead of the top as in another OOP languages
Also it makes us name component classes with some suffix like NodeComponent or NodeClass to avoid name duplication export const Node = connect(...
Also it makes us to create stairs if you want to use multiple HOCs on single component

let decoratedComponent = connect(...)(NodeComponent); 
decoratedComponent = someDecorator(decoratedComponent);
decoratedComponent = anotherOne(decoratedComponent); 
export const Node = decoratedComponent;