fix HOC example

Author: sw-yx

HOC.md

@@ -66,14 +66,14 @@ const DataSource = {
 };
 /** type aliases just to deduplicate */
 type DataType = typeof DataSource;
-type TODO_ANY = any;
+// type TODO_ANY = any;
 
 /** utility types we use */
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-type Optionalize<T extends K, K> = Omit<T, keyof K>;
+// type Optionalize<T extends K, K> = Omit<T, keyof K>;
 
 /** Rewritten Components from the React docs that just uses injected data prop */
-function CommentList({ data }: WithSubscriptionProps) {
+function CommentList({ data }: WithDataProps<typeof comments>) {
   return (
     <div>
       {data.map((comment: CommentType) => (
@@ -82,13 +82,13 @@ function CommentList({ data }: WithSubscriptionProps) {
     </div>
   );
 }
-interface BlogPostProps extends WithSubscriptionProps {
+interface BlogPostProps extends WithDataProps<string> {
   id: number;
   // children: ReactNode;
 }
 function BlogPost({ data, id }: BlogPostProps) {
   return (
-    <div>
+    <div key={id}>
       <TextBlock text={data} />;
     </div>
   );
@@ -100,44 +100,55 @@ function BlogPost({ data, id }: BlogPostProps) {
 Example HOC from React Docs translated to TypeScript
 
 ```tsx
-// // ACTUAL HOC
-interface WithSubscriptionProps {
-  data: TODO_ANY;
+// these are the props to be injected by the HOC
+interface WithDataProps<T> {
+  data: T; // data is generic
 }
-/** This function takes a component... */
-function withSubscription<
-  T extends WithSubscriptionProps = WithSubscriptionProps
->(
-  WrappedComponent: React.ComponentType<T>,
-  selectData: (DataSource: DataType, props: TODO_ANY) => TODO_ANY
+// T is the type of data
+// P is the props of the wrapped component that is inferred
+// C is the actual interface of the wrapped component (used to grab defaultProps from it)
+export function withSubscription<T, P extends WithDataProps<T>, C>(
+  // this type allows us to infer P, but grab the type of WrappedComponent separately without it interfering with the inference of P
+  WrappedComponent: JSXElementConstructor<P> & C,
+  // selectData is a functor for T
+  // props is Readonly because it's readonly inside of the class
+  selectData: (
+    dataSource: typeof DataSource,
+    props: Readonly<JSX.LibraryManagedAttributes<C, Omit<P, 'data'>>>
+  ) => T
 ) {
-  // ...and returns another component...
-  return class extends React.Component<Optionalize<T, WithSubscriptionProps>> {
-    state = {
-      data: selectData(DataSource, this.props)
-    };
-
-    componentDidMount() {
-      // ... that takes care of the subscription...
-      DataSource.addChangeListener(this.handleChange);
+  // the magic is here: JSX.LibraryManagedAttributes will take the type of WrapedComponent and resolve its default props
+  // against the props of WithData, which is just the original P type with 'data' removed from its requirements
+  type Props = JSX.LibraryManagedAttributes<C, Omit<P, 'data'>>;
+  type State = {
+    data: T;
+  };
+  return class WithData extends Component<Props, State> {
+    constructor(props: Props) {
+      super(props);
+      this.handleChange = this.handleChange.bind(this);
+      this.state = {
+        data: selectData(DataSource, props)
+      };
     }
 
-    componentWillUnmount() {
+    componentDidMount = () => DataSource.addChangeListener(this.handleChange);
+
+    componentWillUnmount = () =>
       DataSource.removeChangeListener(this.handleChange);
-    }
 
-    handleChange = () => {
+    handleChange = () =>
       this.setState({
         data: selectData(DataSource, this.props)
       });
-    };
 
     render() {
-      // ... and renders the wrapped component with the fresh data!
-      // Notice that we pass through any additional props
-      return <WrappedComponent data={this.state.data} {...this.props as T} />;
+      // the typing for spreading this.props is... very complex. best way right now is to just type it as any
+      // data will still be typechecked
+      return <WrappedComponent data={this.state.data} {...this.props as any} />;
     }
   };
+  // return WithData;
 }
 
 /** HOC usage with Components */
@@ -148,7 +159,7 @@ export const CommentListWithSubscription = withSubscription(
 
 export const BlogPostWithSubscription = withSubscription(
   BlogPost,
-  (DataSource: DataType, props: React.ComponentProps<typeof BlogPost>) =>
+  (DataSource: DataType, props: Omit<BlogPostProps, 'data'>) =>
     DataSource.getBlogPost(props.id)
 );
 ```