Fixed issue with HOC Fixed #111

Author: piotrwitek

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

@@ -1,20 +1,11 @@
-import * as React from 'react';
-import { Subtract } from 'utility-types';
+import React from 'react';
 
 const MISSING_ERROR = 'Error was swallowed during propagation.';
 
-// These props will be subtracted from base component props
-interface InjectedProps {
-  onReset: () => void;
-}
-
-export const withErrorBoundary = <BaseProps extends InjectedProps>(
-  _BaseComponent: React.ComponentType<BaseProps>
+export const withErrorBoundary = <BaseProps extends {}>(
+  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> & {
+  type HocProps = {
     // here you can extend hoc with new props
   };
   type HocState = {
@@ -40,21 +31,12 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
       // TODO: send error report to service provider
     };
 
-    handleReset = () => {
-      this.setState({ error: undefined });
-    };
-
     render() {
       const { children, ...restProps } = this.props;
       const { error } = this.state;
 
       if (error) {
-        return (
-          <BaseComponent
-            onReset={this.handleReset} // injected
-            {...restProps}
-          />
-        );
+        return <BaseComponent {...(restProps as BaseProps)} />;
       }
 
       return children;

playground/src/hoc/with-state.tsx

@@ -1,19 +1,16 @@
-import * as React from 'react';
-import { Subtract } from 'utility-types';
+import React from 'react';
+import { Diff } from 'utility-types';
 
-// These props will be subtracted from base component props
+// These props will be injected into the base component
 interface InjectedProps {
   count: number;
   onIncrement: () => void;
 }
 
 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> & {
+  type HocProps = Diff<BaseProps, InjectedProps> & {
     // here you can extend hoc with new props
     initialCount?: number;
   };
@@ -43,7 +40,7 @@ export const withState = <BaseProps extends InjectedProps>(
         <BaseComponent
           count={count} // injected
           onIncrement={this.handleIncrement} // injected
-          {...restProps}
+          {...(restProps as BaseProps)}
         />
       );
     }