compose: Add types to useDebounce (#32015)

* compose: Add types to `useDebounce`

* Use more descriptive types

* Improve documentation by adding descriptions

packages/compose/README.md

@@ -194,13 +194,19 @@ be returned and any scheduled calls cancelled if any of the arguments change,
 including the function to debounce, so please wrap functions created on
 render in components in `useCallback`.
 
+_Related_
+
+-   <https://docs-lodash.com/v4/debounce/>
+
 _Parameters_
 
--   _args_ `...any`: Arguments passed to Lodash's `debounce`.
+-   _fn_ `TFunc`: The function to debounce.
+-   _wait_ `[number]`: The number of milliseconds to delay.
+-   _options_ `[import('lodash').DebounceSettings]`: The options object.
 
 _Returns_
 
--   `Function`: Debounced function.
+-   `TFunc & import('lodash').Cancelable`: Debounced function.
 
 <a name="useFocusOnMount" href="#useFocusOnMount">#</a> **useFocusOnMount**
 

packages/compose/src/hooks/use-debounce/index.js

@@ -9,18 +9,29 @@ import { useMemoOne } from 'use-memo-one';
  */
 import { useEffect } from '@wordpress/element';
 
+/* eslint-disable jsdoc/valid-types */
 /**
  * Debounces a function with Lodash's `debounce`. A new debounced function will
  * be returned and any scheduled calls cancelled if any of the arguments change,
  * including the function to debounce, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @param {...any} args Arguments passed to Lodash's `debounce`.
+ * @see https://docs-lodash.com/v4/debounce/
  *
- * @return {Function} Debounced function.
+ * @template {(...args: any[]) => void} TFunc
+ *
+ * @param {TFunc} fn The function to debounce.
+ * @param {number} [wait] The number of milliseconds to delay.
+ * @param {import('lodash').DebounceSettings} [options] The options object.
+ * @return {TFunc & import('lodash').Cancelable} Debounced function.
  */
-export default function useDebounce( ...args ) {
-	const debounced = useMemoOne( () => debounce( ...args ), args );
+export default function useDebounce( fn, wait, options ) {
+	/* eslint-enable jsdoc/valid-types */
+	const debounced = useMemoOne( () => debounce( fn, wait, options ), [
+		fn,
+		wait,
+		options,
+	] );
 	useEffect( () => () => debounced.cancel(), [ debounced ] );
 	return debounced;
 }

packages/compose/tsconfig.json

@@ -16,6 +16,7 @@
 		"src/higher-order/with-instance-id/**/*",
 		"src/hooks/use-async-list/**/*",
 		"src/hooks/use-constrained-tabbing/**/*",
+		"src/hooks/use-debounce/**/*",
 		"src/hooks/use-instance-id/**/*",
 		"src/utils/**/*"
 	]