Upgrade TypeScript to 5.7 and fix types (#67461)

* Upgrade TypeScript to 5.7 and fix types * Increase the minimum required version of TypeScript for the ESLint config package * Update CHANGELOG.md Co-authored-by: manzoorwanijk <[email protected]> Co-authored-by: gziolo <[email protected]>
WordPress · Dec 6, 2024 · 15bff41 · 15bff41 · github-actions · Dec 6, 2024
1 parent 32cbb04
commit 15bff41
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -162,7 +162,7 @@
 		"style-loader": "3.2.1",
 		"terser": "5.32.0",
 		"terser-webpack-plugin": "5.3.10",
-		"typescript": "5.5.3",
+		"typescript": "5.7.2",
 		"uuid": "9.0.1",
 		"webdriverio": "8.16.20",
 		"webpack": "5.95.0",

diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx
@@ -169,7 +169,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 										indexOfSet,
 										indexOfControl,
 									].join() }
-									onClick={ ( event ) => {
+									onClick={ (
+										event: React.MouseEvent< HTMLButtonElement >
+									) => {
 										event.stopPropagation();
 										props.onClose();
 										if ( control.onClick ) {

diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
@@ -269,7 +269,8 @@ describe( 'Modal', () => {
 	} );
 
 	describe( 'Focus handling', () => {
-		let originalGetClientRects: () => DOMRectList;
+		const originalGetClientRects =
+			window.HTMLElement.prototype.getClientRects;
 
 		const FocusMountDemo = ( {
 			focusOnMount,

diff --git a/packages/components/src/tree-grid/cell.tsx b/packages/components/src/tree-grid/cell.tsx
@@ -21,7 +21,11 @@ function UnforwardedTreeGridCell(
 	return (
 		<td { ...props } role="gridcell">
 			{ withoutGridItem ? (
-				<>{ children }</>
+				<>
+					{ typeof children === 'function'
+						? children( { ...props, ref } )
+						: children }
+				</>
 			) : (
 				<TreeGridItem ref={ ref }>{ children }</TreeGridItem>
 			) }

diff --git a/packages/components/src/tree-grid/types.ts b/packages/components/src/tree-grid/types.ts
@@ -36,7 +36,7 @@ export type TreeGridRowProps = {
 type RovingTabIndexItemPassThruProps = {
 	ref: React.ForwardedRef< any >;
 	tabIndex?: number;
-	onFocus: React.FocusEventHandler< any >;
+	onFocus?: React.FocusEventHandler< any >;
 	[ key: string ]: any;
 };
 

diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   The minimum required TypeScript version changed to 5 ([#67461](https://github.com/WordPress/gutenberg/pull/67461))
+
 ## 21.6.0 (2024-11-27)
 
 ## 21.5.0 (2024-11-16)
@@ -18,8 +22,8 @@
 
 ### Breaking Changes
 
-- Add [`@wordpress/i18n-no-flanking-whitespace`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710).
-- Add [`@wordpress/i18n-hyphenated-range`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710).
+-   Add [`@wordpress/i18n-no-flanking-whitespace`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710).
+-   Add [`@wordpress/i18n-hyphenated-range`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710).
 
 ## 20.3.0 (2024-08-21)
 
@@ -30,8 +34,9 @@
 ## 20.0.0 (2024-07-10)
 
 ### Breaking Changes
-- Add [`@typescript-eslint/no-unused-vars` rule](https://typescript-eslint.io/rules/no-unused-vars) to the recommended TypeScript ruleset ([#62925](https://github.com/WordPress/gutenberg/pull/62925)).
-- Add [`@typescript-eslint/method-signature-style` rule](https://typescript-eslint.io/rules/method-signature-style) to the recommended TypeScript ruleset ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
+
+-   Add [`@typescript-eslint/no-unused-vars` rule](https://typescript-eslint.io/rules/no-unused-vars) to the recommended TypeScript ruleset ([#62925](https://github.com/WordPress/gutenberg/pull/62925)).
+-   Add [`@typescript-eslint/method-signature-style` rule](https://typescript-eslint.io/rules/method-signature-style) to the recommended TypeScript ruleset ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
 
 ## 19.2.0 (2024-06-26)
 

diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -53,7 +53,7 @@
 		"@babel/core": ">=7",
 		"eslint": ">=8",
 		"prettier": ">=3",
-		"typescript": ">=4"
+		"typescript": ">=5"
 	},
 	"peerDependenciesMeta": {
 		"prettier": {

diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
@@ -125,6 +125,13 @@ export class RichTextData {
 	static fromHTMLString( html ) {
 		return new RichTextData( create( { html } ) );
 	}
+	/**
+	 * Create a RichTextData instance from an HTML element.
+	 *
+	 * @param {HTMLElement}                    htmlElement The HTML element to create the instance from.
+	 * @param {{preserveWhiteSpace?: boolean}} options     Options.
+	 * @return {RichTextData} The RichTextData instance.
+	 */
 	static fromHTMLElement( htmlElement, options = {} ) {
 		const { preserveWhiteSpace = false } = options;
 		const element = preserveWhiteSpace
@@ -144,6 +151,12 @@ export class RichTextData {
 	}
 	// We could expose `toHTMLElement` at some point as well, but we'd only use
 	// it internally.
+	/**
+	 * Convert the rich text value to an HTML string.
+	 *
+	 * @param {{preserveWhiteSpace?: boolean}} options Options.
+	 * @return {string} The HTML string.
+	 */
 	toHTMLString( { preserveWhiteSpace } = {} ) {
 		return (
 			this.originalHTML ||

diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
@@ -120,7 +120,6 @@ export function useHistory() {
 				window.matchMedia( '(min-width: 782px)' ).matches;
 			if (
 				! isMediumOrBigger ||
-				// @ts-expect-error
 				! document.startViewTransition ||
 				! options.transition
 			) {
@@ -131,7 +130,6 @@ export function useHistory() {
 			await new Promise< void >( ( resolve ) => {
 				const classname = options.transition ?? '';
 				document.documentElement.classList.add( classname );
-				// @ts-expect-error
 				const transition = document.startViewTransition( () =>
 					performPush()
 				);

diff --git a/packages/vips/README.md b/packages/vips/README.md
@@ -42,7 +42,7 @@ _Parameters_
 
 _Returns_
 
--   `Promise< ArrayBuffer >`: Compressed file data.
+-   `Promise< ArrayBuffer | ArrayBufferLike >`: Compressed file data.
 
 ### convertImageFormat
 
@@ -83,7 +83,7 @@ _Parameters_
 
 _Returns_
 
--   `Promise< { buffer: ArrayBuffer; width: number; height: number; originalWidth: number; originalHeight: number; } >`: Processed file data plus the old and new dimensions.
+-   `Promise< { buffer: ArrayBuffer | ArrayBufferLike; width: number; height: number; originalWidth: number; originalHeight: number; } >`: Processed file data plus the old and new dimensions.
 
 ### setLocation
 

diff --git a/packages/vips/src/index.ts b/packages/vips/src/index.ts
@@ -122,7 +122,7 @@ export async function convertImageFormat(
 	outputType: string,
 	quality = 0.82,
 	interlaced = false
-): Promise< ArrayBuffer > {
+): Promise< ArrayBuffer | ArrayBufferLike > {
 	const ext = outputType.split( '/' )[ 1 ];
 
 	inProgressOperations.add( id );
@@ -186,7 +186,7 @@ export async function compressImage(
 	type: string,
 	quality = 0.82,
 	interlaced = false
-): Promise< ArrayBuffer > {
+): Promise< ArrayBuffer | ArrayBufferLike > {
 	return convertImageFormat( id, buffer, type, type, quality, interlaced );
 }
 
@@ -207,7 +207,7 @@ export async function resizeImage(
 	resize: ImageSizeCrop,
 	smartCrop = false
 ): Promise< {
-	buffer: ArrayBuffer;
+	buffer: ArrayBuffer | ArrayBufferLike;
 	width: number;
 	height: number;
 	originalWidth: number;