Support building/linting TypeScript files.

.eslintrc.json

@@ -133,6 +133,12 @@
       "@wordpress/i18n__non-shim",
       "@wordpress/api-fetch__non-shim"
     ],
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
+    },
     "import/resolver": {
       "alias": {
         "map": [
@@ -149,10 +155,41 @@
             "@wordpress"
           ]
         ]
+      },
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      },
+      "typescript": {
+        "alwaysTryTypes": true
       }
     }
   },
   "overrides": [
+    {
+      "files": [
+        "**/*.ts",
+        "**/*.tsx"
+      ],
+      "extends": [
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaVersion": 2024
+      },
+      "env": {
+        "browser": true
+      },
+      "globals": {
+        "browser": true,
+        "page": true
+      }
+    },
     {
       "files": [
         "tests/e2e/**/*.js"

.nvmrc

@@ -1 +1 @@
-14
+16

assets/js/hooks/useBreakpoint.js → assets/js/hooks/useBreakpoint.ts

@@ -18,9 +18,21 @@
 
 import { useWindowWidth } from './useWindowSize';
 
+/**
+ * Breakpoint for an extra large screen (over `1280px` wide).
+ */
 export const BREAKPOINT_XLARGE = 'xlarge';
+/**
+ * Breakpoint for a desktop screen (over `960px` wide).
+ */
 export const BREAKPOINT_DESKTOP = 'desktop';
+/**
+ * Breakpoint for a tablet screen (over `600px` wide).
+ */
 export const BREAKPOINT_TABLET = 'tablet';
+/**
+ * Breakpoint for a mobile phone screen (any screen `600px` wide or less).
+ */
 export const BREAKPOINT_SMALL = 'small';
 
 /**
@@ -31,17 +43,17 @@ export const BREAKPOINT_SMALL = 'small';
  * @return {string} The current breakpoint according to the window size.
  */
 export function useBreakpoint() {
-	const onlyWidth = useWindowWidth();
+	const windowWidth = useWindowWidth();
 
-	if ( onlyWidth > 1280 ) {
+	if ( windowWidth > 1280 ) {
 		return BREAKPOINT_XLARGE;
 	}
 
-	if ( onlyWidth > 960 ) {
+	if ( windowWidth > 960 ) {
 		return BREAKPOINT_DESKTOP;
 	}
 
-	if ( onlyWidth > 600 ) {
+	if ( windowWidth > 600 ) {
 		return BREAKPOINT_TABLET;
 	}
 

assets/js/hooks/useWindowSize.js → assets/js/hooks/useWindowSize.ts

@@ -25,15 +25,24 @@
 import { useThrottle } from '@react-hook/throttle';
 import useEvent from '@react-hook/event';
 
-const emptyObj = {};
-
 const win = typeof global === 'undefined' ? null : global;
 function getSize() {
 	return [ global.innerWidth, global.innerHeight ];
 }
 
-export function useWindowSize( options = emptyObj ) {
-	const { fps, leading, initialWidth = 0, initialHeight = 0 } = options;
+type UseWindowSizeOptions = {
+	fps?: number;
+	leading?: boolean;
+	initialWidth?: number;
+	initialHeight?: number;
+};
+
+export function useWindowSize( {
+	fps = 60,
+	leading = false,
+	initialWidth = 0,
+	initialHeight = 0,
+}: UseWindowSizeOptions = {} ) {
 	const [ size, setThrottledSize ] = useThrottle(
 		/* istanbul ignore next */
 		typeof document === 'undefined'
@@ -42,20 +51,21 @@ export function useWindowSize( options = emptyObj ) {
 		fps,
 		leading
 	);
+
 	function setSize() {
 		return setThrottledSize( getSize );
 	}
 
-	useEvent( win, 'resize', setSize );
-	useEvent( win, 'orientationchange', setSize );
+	useEvent( win as unknown as Window, 'resize', setSize );
+	useEvent( win as unknown as Window, 'orientationchange', setSize );
 
 	return size;
 }
 
-export function useWindowHeight( options ) {
+export function useWindowHeight( options: UseWindowSizeOptions = {} ): number {
 	return useWindowSize( options )[ 1 ];
 }
 
-export function useWindowWidth( options ) {
+export function useWindowWidth( options: UseWindowSizeOptions = {} ): number {
 	return useWindowSize( options )[ 0 ];
 }

assets/js/util/escape-uri.js → assets/js/util/escape-uri.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
 /**
  * Escapes URI components in a template string as a tag function.
  *
  * @example
@@ -26,11 +26,18 @@
  *
  * @since 1.11.0
  *
- * @param {string[]} strings The array of static strings in the template.
- * @param {...*}     values  The array of expressions used in the template.
  * @return {string} Escaped URI string.
  */
-export function escapeURI( strings, ...values ) {
+export function escapeURI(
+	/**
+	 * The array of static strings in the template.
+	 */
+	strings: TemplateStringsArray,
+	/**
+	 * The array of expressions used in the template.
+	 */
+	...values: string[]
+): string {
 	return strings.reduce( ( acc, string, idx ) => {
 		return acc + string + encodeURIComponent( values[ idx ] || '' );
 	}, '' );