diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index 42d84b4a0d..bf810575cb 100644 --- a/types/react-redux/index.d.ts +++ b/types/react-redux/index.d.ts @@ -15,17 +15,16 @@ type Store = Redux.Store; type Dispatch = Redux.Dispatch; type ActionCreator = Redux.ActionCreator; -interface ComponentDecorator { - (component: Component): ComponentClass; +export interface DispatchProp { + dispatch: Dispatch } -/** - * Decorator that infers the type from the original component - * - * Can't use the above decorator because it would default the type to {} - */ -export interface InferableComponentDecorator { - >(component: T): T; +interface ComponentDecorator { + (component: Component<(TOwnProps & TMergedProps) | TOwnProps>): ComponentClass; +} + +interface ComponentMergeDecorator { + (component: Component): ComponentClass; } /** @@ -47,73 +46,73 @@ export interface InferableComponentDecorator { * @param mergeProps * @param options */ -export declare function connect(): InferableComponentDecorator; +export declare function connect(): ComponentDecorator>; export declare function connect( mapStateToProps: MapStateToPropsParam -): ComponentDecorator; +): ComponentDecorator & TStateProps>; export declare function connect( mapStateToProps: null | undefined, mapDispatchToProps: MapDispatchToPropsParam -): ComponentDecorator; +): ComponentDecorator; export declare function connect( mapStateToProps: MapStateToPropsParam, mapDispatchToProps: MapDispatchToPropsParam -): ComponentDecorator; +): ComponentDecorator; export declare function connect( mapStateToProps: MapStateToPropsParam, mapDispatchToProps: null | undefined, mergeProps: MergeProps, -): ComponentDecorator; +): ComponentMergeDecorator; export declare function connect( mapStateToProps: null | undefined, mapDispatchToProps: MapDispatchToPropsParam, mergeProps: MergeProps, -): ComponentDecorator; +): ComponentMergeDecorator; export declare function connect( mapStateToProps: null | undefined, mapDispatchToProps: null | undefined, mergeProps: MergeProps, -): ComponentDecorator; +): ComponentMergeDecorator; export declare function connect( mapStateToProps: MapStateToPropsParam, mapDispatchToProps: MapDispatchToPropsParam, mergeProps: MergeProps, -): ComponentDecorator; +): ComponentMergeDecorator; export declare function connect( mapStateToProps: MapStateToPropsParam, mapDispatchToProps: null | undefined, mergeProps: null | undefined, options: Options -): ComponentDecorator; +): ComponentDecorator & TStateProps & TOwnProps>; export declare function connect( mapStateToProps: null | undefined, mapDispatchToProps: MapDispatchToPropsParam, mergeProps: null | undefined, options: Options -): ComponentDecorator; +): ComponentDecorator; export declare function connect( mapStateToProps: MapStateToPropsParam, mapDispatchToProps: MapDispatchToPropsParam, mergeProps: null | undefined, options: Options -): ComponentDecorator; +): ComponentDecorator; export declare function connect( mapStateToProps: MapStateToPropsParam, mapDispatchToProps: MapDispatchToPropsParam, mergeProps: MergeProps, options: Options -): ComponentDecorator; +): ComponentMergeDecorator; interface MapStateToProps { (state: any, ownProps?: TOwnProps): TStateProps; diff --git a/types/react-redux/react-redux-tests.tsx b/types/react-redux/react-redux-tests.tsx index e8de2b1291..555b50ecf9 100644 --- a/types/react-redux/react-redux-tests.tsx +++ b/types/react-redux/react-redux-tests.tsx @@ -2,7 +2,7 @@ import { Component, ReactElement } from 'react'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Store, Dispatch, bindActionCreators } from 'redux'; -import { connect, Provider } from 'react-redux'; +import { connect, Provider, DispatchProp } from 'react-redux'; import objectAssign = require('object-assign'); // @@ -108,8 +108,11 @@ declare var store: Store; class MyRootComponent extends Component { } -class TodoApp extends Component { - +class TodoApp extends Component, any> { + render (): null { + this.props.dispatch({ type: 'test' }) + return null + } } interface TodoState { todos: string[]|string; @@ -153,7 +156,9 @@ ReactDOM.render( // Inject just dispatch and don't listen to store -connect()(TodoApp); +const WrappedTodoApp = connect()<{}>(TodoApp); + + // Inject dispatch and every field in the global state @@ -261,7 +266,7 @@ function mergeProps(stateProps: TodoState, dispatchProps: DispatchProps, ownProp }); } -connect(mapStateToProps2, actionCreators, mergeProps)(TodoApp); +connect(mapStateToProps2, actionCreators, mergeProps)(MyRootComponent); //https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14622#issuecomment-279820358 @@ -280,7 +285,7 @@ class TestComponent extends Component { } const WrappedTestComponent = connect()(TestComponent); // return value of the connect()(TestComponent) is of the type TestComponent -let ATestComponent: typeof TestComponent = null; +let ATestComponent: React.ComponentClass = null; ATestComponent = TestComponent; ATestComponent = WrappedTestComponent;