compose: Try typing withState in a naïve way

packages/compose/README.md

@@ -536,11 +536,11 @@ via props.
 
 _Parameters_
 
--   _initialState_ `?Object`: Optional initial state of the component.
+-   _initialState_ `TStateProps`: Optional initial state of the component.
 
 _Returns_
 
--   `WPComponent`: Wrapped component.
+-   `HigherOrderComponent< TProps & TStateProps & { setState: Component[ 'setState' ]; }, TProps >`: A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
 
 
 <!-- END TOKEN(Autogenerated API docs) -->

packages/compose/src/higher-order/with-state/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { ComponentType } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
+// eslint-disable-next-line no-duplicate-imports
+import type { HigherOrderComponent } from '../../utils/create-higher-order-component';
+
+/**
+ * A Higher Order Component used to provide and manage internal component state
+ * via props.
+ *
+ * @param initialState Optional initial state of the component.
+ *
+ * @return A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
+ */
+export default function withState<
+	TProps extends object,
+	TStateProps extends object
+>(
+	initialState: TStateProps = {} as TStateProps
+): HigherOrderComponent<
+	TProps &
+		TStateProps & {
+			setState: Component< TProps, TStateProps >[ 'setState' ];
+		},
+	TProps
+> {
+	return createHigherOrderComponent(
+		(
+			OriginalComponent: ComponentType<
+				TProps &
+					TStateProps & {
+						setState: Component<
+							TProps,
+							TStateProps
+						>[ 'setState' ];
+					}
+			>
+		) => {
+			return class WrappedComponent extends Component<
+				TProps,
+				TStateProps
+			> {
+				constructor( props: any ) {
+					super( props );
+
+					this.setState = this.setState.bind( this );
+
+					this.state = initialState;
+				}
+
+				render() {
+					return (
+						<OriginalComponent
+							{ ...( this.props as TProps ) }
+							{ ...( this.state as TStateProps ) }
+							setState={ this.setState }
+						/>
+					);
+				}
+			};
+		},
+		'withState'
+	);
+}

packages/compose/tsconfig.json

@@ -16,6 +16,7 @@
 		"src/higher-order/pure/**/*",
 		"src/higher-order/with-instance-id/**/*",
 		"src/higher-order/with-global-events/**/*",
+		"src/higher-order/with-state/**/*",
 		"src/hooks/use-async-list/**/*",
 		"src/hooks/use-constrained-tabbing/**/*",
 		"src/hooks/use-debounce/**/*",