react-redux types give errors when used as decorators

[pdeva]

• I tried using the @types/react-redux package and had problems.
  • Authors: @tkqubo @thasner @kenzierocks @clayne11 @tansongyang @NicholasBoll @mDibyo

Using typescript 2.5.3

Code to reproduce the error:

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

interface IStore {
	myVar: any;
}

interface MyComponentProps {
	dispatch?: any;
	a;
}

function mapStateToProps(state: IStore) {
	return {
		a: state.myVar
	};
}

@connect(mapStateToProps)
export class MyComponent extends React.Component<any, any>
{
	constructor(props, context)
	{
		super(props, context);
	}

	render()
	{
		return (<div>
			<h2>Hello</h2>
		</div>);
	}
}

Error Msg:

MyComponent.tsx(19,1): error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<any, never>> & { WrappedComponent: ComponentType<any>; }' is not assignable to type 'typeof MyComponent'.
    Type 'Component<Pick<any, never>, 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'.

Currently to make this error go away, the signature of render() method of MyComponent needs to be modified like this:

render(): JSX.Element | false 
{
	return (<div>
		<h2>Hello</h2>
	</div>);
}

This change of signature should not be required in code by the type definition.

[tansongyang]

This could be related to Decorators do not recognize class inheritance. There, someone says this:

@decoratorand decorator(...) express the same thing but type-checked differently, which is quite strange

Will it work if you change to this?

class MyComponent extends React.Component<any, any> {
  // ...
}

export connect(mapStateToProps)(MyComponent) // EDIT: Oops, that's invalid syntax. Please see comments below.

[pdeva]

so this works indeed:

export const x = connect(mapStateToProps)(MyComponent);

this results in an error :

export connect(mapStateToProps)(MyComponent)

MyComponent.tsx(35,1): error TS1128: Declaration or statement expected.

[clayne11]

The second one is invalid syntax.

[pdeva]

i thought so too.
but it still doesnt solve the original problem of using connect as a decorator on the class..

[clayne11]

This is a known issue: #9951 due to a limitation in the Typescript language.

[pdeva]

i added a comment regarding this issue to the definition file.
Its extremely confusing to someone new to see all these errors:
#20848

[fakhergh]

try using @(connect(mapStateToProps) as any) . it will work ;)

[jlx5188]

try using @(connect(mapStateToProps) as any) . it will work ;)

正解！Good！

[orta]

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.