Enhanced TypeScript support in WordPress 6.1

WordPress 6.1 enhances the TypeScript support for the frontend data stores. The types it ships for the @wordpress/data and @wordpress/core-data npm packages enable auto-completion and improvements in static type checks.

As a recap, @wordpress/data is the foundational package powering all the data stores in the WordPress editor. WordPress 6.1 provides the TypeScript signatures for its central utilities: createReduxStore, and useSelect, ensuring the selector types are correctly reflected in the code that uses them:

import {
	createReduxStore,
	useSelect,
	useDispatch
} from '@wordpress/data';

const config = {
	reducer: () => null,
	selectors: {
		/**
		 * @param {Object} state
		 * @param {string} unit
		 * @return {number}
		 */
		getTemperature: ( state, unit = 'C' ) => {
			/* action implementation */
		}
	}
};

const store = createReduxStore( 'STORE_NAME', config );

// Correct call:
useSelect( store, [] ).getTemperature( 'F' ); 

// TypeScript error
useSelect( store, [] ).getTemperature( {} );

TypeScript developers can now build strongly typed data stores with autocompletion and static checks:

Video shows the interaction of an IDEIDE Integrated Development Environment. A software package that provides a full suite of functionality to software developers/programmers. Normally an IDE includes a source code editor, code-build tools and debugging functionality. for auto-completion and static checks.

The @wordpress/core-data store is the first to take advantage of the enhanced TypeScript support. Enhanced autocompletion and static checks are also available when working with the @wordpress/core-data selectors, including getEntityRecord and getEntityRecords:

Props to @bph, @gziolo, and @webcommsat for review.

#6-1, #dev-notes, #dev-notes-6-1