Removed HOC rest props workaround found fixed in recent TSResolved piotrwitek#101 (piotrwitek#163)

Author: piotrwitek

README.md

@@ -491,8 +491,11 @@ interface InjectedProps {
 }
 
 export const withState = <BaseProps extends InjectedProps>(
-  BaseComponent: React.ComponentType<BaseProps>
+  _BaseComponent: React.ComponentType<BaseProps>
 ) => {
+  // fix for TypeScript issues: https://github.com/piotrwitek/react-redux-typescript-guide/issues/111
+  const BaseComponent = _BaseComponent as React.ComponentType<InjectedProps>;
+
   type HocProps = Subtract<BaseProps, InjectedProps> & {
     // here you can extend hoc with new props
     initialCount?: number;
@@ -516,7 +519,7 @@ export const withState = <BaseProps extends InjectedProps>(
     };
 
     render() {
-      const { ...restProps } = this.props as {};
+      const { ...restProps } = this.props;
       const { count } = this.state;
 
       return (
@@ -563,8 +566,11 @@ interface InjectedProps {
 }
 
 export const withErrorBoundary = <BaseProps extends InjectedProps>(
-  BaseComponent: React.ComponentType<BaseProps>
+  _BaseComponent: React.ComponentType<BaseProps>
 ) => {
+  // fix for TypeScript issues: https://github.com/piotrwitek/react-redux-typescript-guide/issues/111
+  const BaseComponent = _BaseComponent as React.ComponentType<InjectedProps>;
+
   type HocProps = Subtract<BaseProps, InjectedProps> & {
     // here you can extend hoc with new props
   };
@@ -596,9 +602,7 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
     };
 
     render() {
-      const { children, ...restProps } = this.props as {
-        children: React.ReactNode;
-      };
+      const { children, ...restProps } = this.props;
       const { error } = this.state;
 
       if (error) {

playground/package-lock.json

@@ -21,11 +21,11 @@
   "dependencies": {
     "@babel/polyfill": "7.4.3",
     "@types/jest": "24.0.11",
-    "@types/node": "11.13.4",
-    "@types/prop-types": "15.7.0",
-    "@types/react": "16.8.13",
+    "@types/node": "11.13.6",
+    "@types/prop-types": "15.7.1",
+    "@types/react": "16.8.14",
     "@types/react-dom": "16.8.4",
-    "@types/react-redux": "7.0.6",
+    "@types/react-redux": "7.0.8",
     "@types/react-router-dom": "4.3.2",
     "@types/react-router-redux": "5.0.18",
     "axios": "0.18.0",
@@ -45,8 +45,8 @@
     "reselect": "4.0.0",
     "rxjs": "6.4.0",
     "tslib": "1.9.3",
-    "tslint": "5.15.0",
-    "typesafe-actions": "4.1.0",
+    "tslint": "5.16.0",
+    "typesafe-actions": "4.1.1",
     "typescript": "3.4.4",
     "utility-types": "3.5.0"
   },

playground/package.json

@@ -9,8 +9,11 @@ interface InjectedProps {
 }
 
 export const withErrorBoundary = <BaseProps extends InjectedProps>(
-  BaseComponent: React.ComponentType<BaseProps>
+  _BaseComponent: React.ComponentType<BaseProps>
 ) => {
+  // fix for TypeScript issues: https://github.com/piotrwitek/react-redux-typescript-guide/issues/111
+  const BaseComponent = _BaseComponent as React.ComponentType<InjectedProps>;
+
   type HocProps = Subtract<BaseProps, InjectedProps> & {
     // here you can extend hoc with new props
   };
@@ -42,9 +45,7 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
     };
 
     render() {
-      const { children, ...restProps } = this.props as {
-        children: React.ReactNode;
-      };
+      const { children, ...restProps } = this.props;
       const { error } = this.state;
 
       if (error) {

playground/src/hoc/with-error-boundary.tsx

@@ -8,8 +8,11 @@ interface InjectedProps {
 }
 
 export const withState = <BaseProps extends InjectedProps>(
-  BaseComponent: React.ComponentType<BaseProps>
+  _BaseComponent: React.ComponentType<BaseProps>
 ) => {
+  // fix for TypeScript issues: https://github.com/piotrwitek/react-redux-typescript-guide/issues/111
+  const BaseComponent = _BaseComponent as React.ComponentType<InjectedProps>;
+
   type HocProps = Subtract<BaseProps, InjectedProps> & {
     // here you can extend hoc with new props
     initialCount?: number;
@@ -33,7 +36,7 @@ export const withState = <BaseProps extends InjectedProps>(
     };
 
     render() {
-      const { ...restProps } = this.props as {};
+      const { ...restProps } = this.props;
       const { count } = this.state;
 
       return (