From f1dce7be1910c80f26e73eefda6c07241a7cad8a Mon Sep 17 00:00:00 2001 From: Nicholas Boll Date: Mon, 11 Sep 2017 00:21:31 -0600 Subject: [PATCH 1/3] [react-redux] Fix map factories * Changed the order of factory vs object in mapping functions so TS picks the right one * Added test cases and test style --- types/react-redux/index.d.ts | 4 +- types/react-redux/react-redux-tests.tsx | 261 +++++++++++++++++++++++- types/react-redux/tsconfig.json | 2 +- 3 files changed, 263 insertions(+), 4 deletions(-) diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index b83252a745..933b71a273 100644 --- a/types/react-redux/index.d.ts +++ b/types/react-redux/index.d.ts @@ -141,7 +141,7 @@ interface MapStateToPropsFactory { (initialState: any, ownProps: TOwnProps): MapStateToProps; } -type MapStateToPropsParam = MapStateToProps | MapStateToPropsFactory; +type MapStateToPropsParam = MapStateToPropsFactory | MapStateToProps | null | undefined; interface MapDispatchToPropsFunction { (dispatch: Dispatch, ownProps: TOwnProps): TDispatchProps; @@ -154,7 +154,7 @@ interface MapDispatchToPropsFactory { (dispatch: Dispatch, ownProps: TOwnProps): MapDispatchToProps; } -type MapDispatchToPropsParam = MapDispatchToProps | MapDispatchToPropsFactory; +type MapDispatchToPropsParam = MapDispatchToPropsFactory | MapDispatchToProps; interface MergeProps { (stateProps: TStateProps, dispatchProps: TDispatchProps, ownProps: TOwnProps): TMergedProps; diff --git a/types/react-redux/react-redux-tests.tsx b/types/react-redux/react-redux-tests.tsx index 5a9b038dc5..df3242dbbf 100644 --- a/types/react-redux/react-redux-tests.tsx +++ b/types/react-redux/react-redux-tests.tsx @@ -1,7 +1,7 @@ import { Component, ReactElement } from 'react'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { Store, Dispatch, ActionCreator, bindActionCreators } from 'redux'; +import { Store, Dispatch, ActionCreator, bindActionCreators, ActionCreatorsMapObject } from 'redux'; import { connect, Provider, DispatchProp, MapStateToProps } from 'react-redux'; import objectAssign = require('object-assign'); @@ -10,6 +10,265 @@ import objectAssign = require('object-assign'); // https://github.com/rackt/react-redux/blob/master/docs/quick-start.md#quick-start // +// Test cases written in a way to isolate types and variables and verify the +// output of `connect` to make sure the signature is what is expected + +namespace Empty { + interface OwnProps { foo: string, dispatch: Dispatch } + + class TestComponent extends Component {} + + const Test = connect()(TestComponent) + + const verify = +} + +namespace MapState { + interface OwnProps { foo: string } + interface StateProps { bar: number } + + class TestComponent extends Component {} + + const mapStateToProps = (_: any) => ({ + bar: 1 + }) + + const Test = connect( + mapStateToProps + )(TestComponent) + + const verify = +} + +namespace MapStateWithDispatchProp { + interface OwnProps { foo: string } + interface StateProps { bar: number, dispatch: Dispatch } + + class TestComponent extends Component {} + + const mapStateToProps = (_: any) => ({ + bar: 1 + }) + + const Test = connect( + mapStateToProps + )(TestComponent) + + const verify = +} + +namespace MapStateFactory { + interface OwnProps { foo: string } + interface StateProps { bar: number } + + class TestComponent extends Component {} + + const mapStateToProps = () => () => ({ + bar: 1 + }) + + const Test = connect( + mapStateToProps + )(TestComponent) + + const verify = +} + +namespace MapDispatch { + interface OwnProps { foo: string } + interface DispatchProps { onClick: () => void } + + class TestComponent extends Component {} + + const mapDispatchToProps = () => ({ + onClick: () => {} + }) + + const TestNull = connect( + null, + mapDispatchToProps, + )(TestComponent) + + const verifyNull = + + const TestUndefined = connect( + undefined, + mapDispatchToProps, + )(TestComponent) + + const verifyUndefined = +} + +namespace MapStateAndDispatchObject { + interface ClickPayload { count: number } + const onClick: ActionCreator = () => ({ count: 1 }); + const dispatchToProps = { + onClick, + }; + + interface OwnProps { foo: string } + interface StateProps { bar: number } + interface DispatchProps { onClick: ActionCreator } + + const mapStateToProps = (_: any, __: OwnProps): StateProps => ({ + bar: 1 + }) + + class TestComponent extends Component {} + + const Test = connect( + mapStateToProps, + dispatchToProps, + )(TestComponent) + + const verify = +} + +namespace MapDispatchFactory { + interface OwnProps { foo: string } + interface DispatchProps { onClick: () => void } + + class TestComponent extends Component {} + + const mapDispatchToPropsFactory = () => () => ({ + onClick: () => {} + }) + + const TestNull = connect( + null, + mapDispatchToPropsFactory, + )(TestComponent) + + const verifyNull = + + const TestUndefined = connect( + undefined, + mapDispatchToPropsFactory, + )(TestComponent) + + const verifyUndefined = +} + +namespace MapStateAndDispatch { + interface OwnProps { foo: string } + interface StateProps { bar: number } + interface DispatchProps { onClick: () => void } + + class TestComponent extends Component {} + + const mapStateToProps = () => ({ + bar: 1 + }) + + const mapDispatchToProps = () => ({ + onClick: () => {} + }) + + const Test = connect( + mapStateToProps, + mapDispatchToProps, + )(TestComponent) + + const verify = +} + +namespace MapStateFactoryAndDispatch { + interface OwnProps { foo: string } + interface StateProps { bar: number } + interface DispatchProps { onClick: () => void } + + const mapStateToPropsFactory = () => () =>({ + bar: 1 + }) + + const mapDispatchToProps = () => ({ + onClick: () => {} + }) + + class TestComponent extends Component {} + + const Test = connect( + mapStateToPropsFactory, + mapDispatchToProps, + )(TestComponent) + + const verify = +} + +namespace MapStateFactoryAndDispatchFactory { + interface OwnProps { foo: string } + interface StateProps { bar: number } + interface DispatchProps { onClick: () => void } + + const mapStateToPropsFactory = () => () =>({ + bar: 1 + }) + + const mapDispatchToPropsFactory = () => () => ({ + onClick: () => {} + }) + + class TestComponent extends Component {} + + const Test = connect( + mapStateToPropsFactory, + mapDispatchToPropsFactory, + )(TestComponent) + + const verify = +} + +namespace MapStateAndDispatchAndMerge { + interface OwnProps { foo: string } + interface StateProps { bar: number } + interface DispatchProps { onClick: () => void } + + class TestComponent extends Component {} + + const mapStateToProps = () => ({ + bar: 1 + }) + + const mapDispatchToProps = () => ({ + onClick: () => {} + }) + + const mergeProps = (stateProps: StateProps, dispatchProps: DispatchProps) => ( + Object.assign({}, stateProps, dispatchProps) + ) + + const Test = connect( + mapStateToProps, + mapDispatchToProps, + mergeProps, + )(TestComponent) + + const verify = +} + +namespace MapStateAndOptions { + interface OwnProps { foo: string } + interface StateProps { bar: number } + interface DispatchProps { dispatch: Dispatch } + + class TestComponent extends Component {} + + const mapStateToProps = () => ({ + bar: 1 + }) + + const Test = connect( + mapStateToProps, + null, + null, + { + pure: true + } + )(TestComponent) + + const verify = +} + interface CounterState { counter: number; } diff --git a/types/react-redux/tsconfig.json b/types/react-redux/tsconfig.json index cca7c7e05c..a4ca102dda 100644 --- a/types/react-redux/tsconfig.json +++ b/types/react-redux/tsconfig.json @@ -22,4 +22,4 @@ "noEmit": true, "forceConsistentCasingInFileNames": true } -} \ No newline at end of file +} From 23d6b6b42c5e3e2b607773c8d5754a48ca8cbec7 Mon Sep 17 00:00:00 2001 From: Nicholas Boll Date: Mon, 11 Sep 2017 00:26:57 -0600 Subject: [PATCH 2/3] [react-redux] Added contributor --- types/react-redux/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index 933b71a273..a0fe9c3deb 100644 --- a/types/react-redux/index.d.ts +++ b/types/react-redux/index.d.ts @@ -5,6 +5,7 @@ // Kenzie Togami , // Curits Layne // Frank Tan +// Nicholas Boll // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.4 From 1cc622c196e2451bd2272e2af87221fc82da2dec Mon Sep 17 00:00:00 2001 From: Nicholas Boll Date: Mon, 11 Sep 2017 00:32:24 -0600 Subject: [PATCH 3/3] [react-redux] Updated version --- types/react-redux/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index a0fe9c3deb..6d8c8b5e92 100644 --- a/types/react-redux/index.d.ts +++ b/types/react-redux/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-redux 5.0.5 +// Type definitions for react-redux 5.0.8 // Project: https://github.com/rackt/react-redux // Definitions by: Qubo , // Thomas Hasner ,