Fix: suggestion: connected generic component

playground\src\components\generic-list-connected.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+/** Generic List Component */
+export type GenericListProps<T> = {
+  readonly items: T[];
+  readonly itemRenderer: (item: T) => JSX.Element;
+};
+
+export class GenericList<T> extends React.Component<GenericListProps<T>> {
+  render() {
+    const { items, itemRenderer } = this.props;
+    return (
+      <ul>
+        {items.map((item, idx) => (
+          <li key={idx}>{itemRenderer(item)}</li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+/**
+ * Connected Generic List
+ *
+ * TypeScript does not allow parameterized generic type arguments in JSX, so
+ * `connect(...)(GenericList<Todo>)` is not valid syntax.
+ *
+ * Workaround:
+ *  1. Fix the generic type parameter via a concrete subclass
+ *  2. Connect the concrete subclass
+ */
+
+export type Todo = {
+  readonly id: number;
+  readonly title: string;
+  readonly completed: boolean;
+};
+
+type StoreState = {
+  readonly todos: Todo[];
+};
+
+type OwnProps = {};
+
+// Step 1 – Concrete subclass fixes the type parameter to `Todo`
+class TodoList extends GenericList<Todo> {}
+
+// Step 2 – mapStateToProps typed against the concrete props
+const mapStateToProps = (
+  state: StoreState,
+  _ownProps: OwnProps
+): Pick<GenericListProps<Todo>, 'items'> => ({
+  items: state.todos,
+});
+
+// Step 3 – connect the concrete subclass
+export const ConnectedTodoList = connect(mapStateToProps)(TodoList);

playground\src\components\generic-list-connected.usage.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+
+import { ConnectedTodoList, Todo } from './generic-list-connected';
+
+/** Store Setup */
+type StoreState = {
+  readonly todos: Todo[];
+};
+
+const initialState: StoreState = {
+  todos: [
+    { id: 1, title: 'Learn TypeScript', completed: true },
+    { id: 2, title: 'Read react-redux-typescript-guide', completed: false },
+    { id: 3, title: 'Build something great', completed: false },
+  ],
+};
+
+function reducer(state: StoreState = initialState): StoreState {
+  return state;
+}
+
+const store = createStore(reducer);
+
+/** Item Renderer */
+const todoItemRenderer = (item: Todo): JSX.Element => (
+  <span>
+    [{item.completed ? 'x' : ' '}] {item.title}
+  </span>
+);
+
+/** Usage */
+export const App: React.FC = () => (
+  <Provider store={store}>
+    {/* `items` is injected by connect; only `itemRenderer` needs to be supplied */}
+    <ConnectedTodoList itemRenderer={todoItemRenderer} />
+  </Provider>
+);