ESLint: Ban @ts-ignore in favour of @ts-expect-error

packages/api-fetch/src/middlewares/test/preloading.ts

@@ -101,12 +101,12 @@ describe( 'Preloading Middleware', () => {
 					const noResponseMock =
 						'undefined' === typeof window.Response;
 					if ( noResponseMock ) {
-						// @ts-expect-error
+						// @ts-expect-error The stub does not implement the full `Response` static side.
 						window.Response = class {
 							constructor( body, options ) {
-								// @ts-expect-error
+								// @ts-expect-error `body` is not a declared property on the stub.
 								this.body = JSON.parse( body );
-								// @ts-expect-error
+								// @ts-expect-error `headers` is not a declared property on the stub.
 								this.headers = options.headers;
 							}
 						};
@@ -141,7 +141,7 @@ describe( 'Preloading Middleware', () => {
 						async () => {}
 					);
 					if ( noResponseMock ) {
-						// @ts-expect-error
+						// @ts-expect-error The operand of `delete` must be optional.
 						delete window.Response;
 					}
 					return response.then( ( value ) => {

packages/blocks/src/api/matchers.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-// @ts-ignore
+// @ts-expect-error `hpq` does not ship type declarations.
 export { attr, prop, text, query } from 'hpq';
 
 /**

packages/blocks/src/api/parser/get-block-attributes.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-// @ts-ignore
+// @ts-expect-error `hpq` does not ship type declarations.
 import { parse as hpqParse } from 'hpq';
 import memoize from 'memize';
 

packages/blocks/src/store/process-block-type.ts

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-// @ts-ignore -- No declaration file available.
+// @ts-expect-error -- Its declaration file is not exposed through the `exports` map.
 import { isPlainObject } from 'is-plain-object';
-// @ts-ignore -- No declaration file available.
 import { isValidElementType } from 'react-is';
 
 /**

packages/boot/src/components/navigation/drilldown-item/index.tsx

@@ -10,7 +10,6 @@ import type { ReactNode } from 'react';
 import {
 	FlexBlock,
 	__experimentalItem as Item,
-	// @ts-ignore
 	__experimentalHStack as HStack,
 	Icon as WCIcon,
 } from '@wordpress/components';

packages/boot/src/components/navigation/dropdown-item/index.tsx

@@ -10,7 +10,6 @@ import type { ReactNode } from 'react';
 import {
 	FlexBlock,
 	__experimentalItem as Item,
-	// @ts-ignore
 	__experimentalHStack as HStack,
 	Icon as WCIcon,
 	__unstableMotion as motion,
@@ -72,7 +71,7 @@ export default function DropdownItem( {
 }: DropdownItemProps ) {
 	const menuItems: MenuItem[] = useSelect(
 		( select ) =>
-			// @ts-ignore
+			// @ts-expect-error Store types are not available when selecting by store name.
 			select( STORE_NAME ).getMenuItems(),
 		[]
 	);

packages/boot/src/components/navigation/index.tsx

@@ -24,7 +24,7 @@ function Navigation() {
 		useSidebarParent();
 	const menuItems = useSelect(
 		( select ) =>
-			// @ts-ignore
+			// @ts-expect-error Store types are not available when selecting by store name.
 			select( STORE_NAME ).getMenuItems() as MenuItem[],
 		[]
 	);

packages/boot/src/components/navigation/navigation-item/index.tsx

@@ -10,7 +10,6 @@ import type { ReactNode } from 'react';
 import {
 	FlexBlock,
 	__experimentalItem as Item,
-	// @ts-ignore
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 

packages/boot/src/components/navigation/use-sidebar-parent.ts

@@ -37,7 +37,7 @@ export function useSidebarParent() {
 	const router = useRouter();
 	const menuItems = useSelect(
 		( select ) =>
-			// @ts-ignore
+			// @ts-expect-error Store types are not available when selecting by store name.
 			select( STORE_NAME ).getMenuItems(),
 		[]
 	);

packages/components/src/border-box-control/test/utils.ts

@@ -47,15 +47,13 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isEmptyBorder', () => {
 		it( 'should determine a undefined, null, and {} to be empty', () => {
 			expect( isEmptyBorder( undefined ) ).toBe( true );
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isEmptyBorder( null ) ).toBe( true );
 			expect( isEmptyBorder( {} ) ).toBe( true );
 		} );
 
 		it( 'should determine object missing all border props to be empty', () => {
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isEmptyBorder( nonBorder ) ).toBe( true );
 		} );
 
@@ -114,15 +112,13 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isCompleteBorder', () => {
 		it( 'should determine a undefined, null, and {} to be incomplete', () => {
 			expect( isCompleteBorder( undefined ) ).toBe( false );
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isCompleteBorder( null ) ).toBe( false );
 			expect( isCompleteBorder( {} ) ).toBe( false );
 		} );
 
 		it( 'should determine objects missing border props to be incomplete', () => {
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isCompleteBorder( nonBorder ) ).toBe( false );
 			expect( isCompleteBorder( partialBorder ) ).toBe( false );
 			expect( isCompleteBorder( partialWithExtraProp ) ).toBe( false );
@@ -157,8 +153,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
 			expect( hasMixedBorders( undefined ) ).toBe( false );
 			expect( hasMixedBorders( {} ) ).toBe( false );
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `nonBorder` is not assignable to `AnyBorder`; resilience is tested.
 			expect( hasMixedBorders( nonBorder ) ).toBe( false );
 		} );
 
@@ -178,15 +173,13 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'getSplitBorders', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getSplitBorders( undefined ) ).toEqual( undefined );
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( getSplitBorders( null ) ).toEqual( undefined );
 		} );
 
 		it( 'should return undefined when supplied border is empty', () => {
 			expect( getSplitBorders( {} ) ).toEqual( undefined );
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
 		} );
 
@@ -207,8 +200,7 @@ describe( 'BorderBoxControl Utils', () => {
 		} );
 
 		it( 'should only return differences for border related properties', () => {
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
 			expect( diff ).toEqual( {} );
 		} );
@@ -217,8 +209,7 @@ describe( 'BorderBoxControl Utils', () => {
 			const diff = getBorderDiff( completeBorder, {
 				...completeBorder,
 				color: '#21759b',
-				// Checking for extra resilience, even if not a valid type.
-				// @ts-expect-error
+				// @ts-expect-error `caffeine` is not a declared `Border` property; the test checks it is ignored.
 				caffeine: 'cola',
 			} );
 			expect( diff ).toEqual( { color: '#21759b' } );
@@ -316,8 +307,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
 			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
-			// Checking for extra resilience, even if not a valid type.
-			// @ts-expect-error
+			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
 		} );
 

packages/components/src/button/test/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import { press } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -15,7 +16,6 @@ import { plusCircle } from '@wordpress/icons';
 import _Button from '..';
 import Tooltip from '../../tooltip';
 import cleanupTooltip from '../../tooltip/test/utils';
-import { press } from '@ariakit/test';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 
@@ -636,9 +636,9 @@ describe( 'Button', () => {
 			<Button href="foo" type="image/png" />
 			{ /* @ts-expect-error - if button, type must be submit/reset/button */ }
 			<Button type="image/png" />
-			{ /* @ts-expect-error */ }
+			{ /* @ts-expect-error `type` must be submit, reset or button. */ }
 			<Button type="invalidtype" />
-			{ /* @ts-expect-error */ }
+			{ /* @ts-expect-error `accessibleWhenDisabled` is not supported on a link button. */ }
 			<Button disabled accessibleWhenDisabled href="foo" />
 		</>;
 	} );

packages/components/src/color-picker/input-with-slider.tsx

@@ -52,7 +52,7 @@ export const InputWithSlider = ( {
 				min={ min }
 				max={ max }
 				value={ value }
-				// @ts-expect-error
+				// @ts-expect-error `RangeControl` may call `onChange` with `undefined`, but this expects a `number`.
 				// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
 				onChange={ onChange }
 				withInputField={ false }

packages/components/src/context/context-connect.ts

@@ -122,15 +122,15 @@ export function getConnectNamespace(
 
 	let namespaces = [];
 
-	// @ts-ignore internal property
+	// @ts-expect-error `Component` is a union that has no index signature.
 	if ( Component[ CONNECT_STATIC_NAMESPACE ] ) {
-		// @ts-ignore internal property
+		// @ts-expect-error `Component` is a union that has no index signature.
 		namespaces = Component[ CONNECT_STATIC_NAMESPACE ];
 	}
 
-	// @ts-ignore
+	// @ts-expect-error `type` does not exist on every member of the `Component` union.
 	if ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {
-		// @ts-ignore
+		// @ts-expect-error `type` does not exist on every member of the `Component` union.
 		namespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];
 	}
 

packages/components/src/context/use-context-system.js

@@ -34,7 +34,7 @@ export function useContextSystem( props, namespace ) {
 	const contextProps = contextSystemProps?.[ namespace ] || {};
 
 	/** @type {ConnectedProps<P>} */
-	// @ts-ignore We fill in the missing properties below
+	// @ts-expect-error The initial object cannot satisfy the generic `P`, whose props are copied in below.
 	const finalComponentProps = {
 		...getConnectedNamespace(),
 		...getNamespace( namespace ),
@@ -60,19 +60,19 @@ export function useContextSystem( props, namespace ) {
 			: initialMergedProps.children;
 
 	for ( const key in initialMergedProps ) {
-		// @ts-ignore filling in missing props
+		// @ts-expect-error A string key cannot index the merged props type.
 		finalComponentProps[ key ] = initialMergedProps[ key ];
 	}
 
 	for ( const key in overrideProps ) {
-		// @ts-ignore filling in missing props
+		// @ts-expect-error A string key cannot index the merged props type.
 		finalComponentProps[ key ] = overrideProps[ key ];
 	}
 
 	// Setting an `undefined` explicitly can cause unintended overwrites
 	// when a `cloneElement()` is involved.
 	if ( rendered !== undefined ) {
-		// @ts-ignore
+		// @ts-expect-error `children` does not exist on `ConnectedProps<P>`.
 		finalComponentProps.children = rendered;
 	}
 

packages/components/src/custom-gradient-picker/index.tsx

@@ -166,7 +166,7 @@ export function CustomGradientPicker( {
 			color: getStopCssColor( colorStop ),
 			// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
 			// TypeScript doesn't know that `colorStop.length` is not undefined here.
-			// @ts-expect-error
+			// @ts-expect-error `colorStop.length` is possibly `undefined`.
 			position: parseInt( colorStop.length.value ),
 		};
 	} );

packages/components/src/disabled/index.tsx

@@ -57,7 +57,7 @@ function Disabled( {
 	return (
 		<Provider value={ isDisabled }>
 			<div
-				// @ts-ignore Reason: inert is a recent HTML attribute
+				// @ts-expect-error `inert` is not declared in React 18's HTML attribute types.
 				inert={ isDisabled ? 'true' : undefined }
 				className={
 					isDisabled

packages/components/src/draggable/index.tsx

@@ -226,7 +226,7 @@ export function Draggable( {
 
 		// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,
 		// note that browsers may throttle raf below 60fps in certain conditions.
-		// @ts-ignore
+		// @ts-expect-error `throttle` expects a `(...args: unknown[]) => unknown` callback.
 		const throttledDragOver = throttle( over, 16 );
 
 		ownerDocument.addEventListener( 'dragover', throttledDragOver );

packages/components/src/icon/index.tsx

@@ -105,7 +105,7 @@ function Icon( {
 
 	if ( isValidElement( icon ) ) {
 		return cloneElement( icon, {
-			// @ts-ignore Just forwarding the size prop along
+			// @ts-expect-error `size` is forwarded but is not in the icon component overloads.
 			size,
 			width: size,
 			height: size,

packages/components/src/input-control/utils.ts

@@ -60,7 +60,7 @@ export function useDragCursor(
 		if ( isDragging ) {
 			document.documentElement.style.cursor = dragCursor;
 		} else {
-			// @ts-expect-error
+			// @ts-expect-error `cursor` is typed as `string`, but `null` clears it.
 			document.documentElement.style.cursor = null;
 		}
 	}, [ isDragging, dragCursor ] );

packages/components/src/placeholder/test/index.tsx

@@ -47,7 +47,7 @@ const mockedSpeak = jest.mocked( speak );
 
 describe( 'Placeholder', () => {
 	beforeEach( () => {
-		// @ts-ignore
+		// @ts-expect-error The imported hook is not typed as a Jest mock.
 		useResizeObserver.mockReturnValue( [
 			<div key="1" />,
 			{ width: 320 },
@@ -164,7 +164,7 @@ describe( 'Placeholder', () => {
 
 	describe( 'resize aware', () => {
 		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
-			// @ts-ignore
+			// @ts-expect-error The imported hook is not typed as a Jest mock.
 			useResizeObserver.mockReturnValue( [
 				<div key="1" />,
 				{ width: 480 },
@@ -179,7 +179,7 @@ describe( 'Placeholder', () => {
 		} );
 
 		it( 'should assign modifier class', () => {
-			// @ts-ignore
+			// @ts-expect-error The imported hook is not typed as a Jest mock.
 			useResizeObserver.mockReturnValue( [
 				<div key="1" />,
 				{ width: null },

packages/components/src/query-controls/index.tsx

@@ -159,7 +159,7 @@ export function QueryControls( {
 									// Keeping the fallback to `item.value` for legacy reasons,
 									// even if items of `selectedCategories` should not have a
 									// `value` property.
-									// @ts-expect-error
+									// @ts-expect-error `value` does not exist on `Category`.
 									value: item.name || item.value,
 								} ) )
 							}

packages/components/src/utils/rtl.js

@@ -75,11 +75,11 @@ export const convertLTRToRTL = ( ltrStyles = {} ) => {
 export function rtl( ltrStyles = {}, rtlStyles ) {
 	return () => {
 		if ( rtlStyles ) {
-			// @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css
+			// @ts-expect-error `React.CSSProperties` lacks the string index signature Emotion's `CSSObject` requires.
 			return isRTL() ? css( rtlStyles ) : css( ltrStyles );
 		}
 
-		// @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css
+		// @ts-expect-error `React.CSSProperties` lacks the string index signature Emotion's `CSSObject` requires.
 		return isRTL() ? css( convertLTRToRTL( ltrStyles ) ) : css( ltrStyles );
 	};
 }

packages/compose/src/higher-order/with-global-events/index.js

@@ -40,7 +40,6 @@ export default function withGlobalEvents( eventTypesToHandlers ) {
 		alternative: 'useEffect',
 	} );
 
-	// @ts-ignore We don't need to fix the type-related issues because this is deprecated.
 	return createHigherOrderComponent( ( WrappedComponent ) => {
 		class Wrapper extends Component {
 			constructor( /** @type {any} */ props ) {

packages/compose/src/higher-order/with-instance-id/index.tsx

@@ -19,7 +19,7 @@ const withInstanceId = createHigherOrderComponent(
 	) => {
 		return ( props: WithoutInjectedProps< C, InstanceIdProps > ) => {
 			const instanceId = useInstanceId( WrappedComponent );
-			// @ts-ignore
+			// @ts-expect-error `LibraryManagedAttributes` cannot see the injected `instanceId` prop.
 			return <WrappedComponent { ...props } instanceId={ instanceId } />;
 		};
 	},