Interactivity API: Convert types of generator functions to async functions

.github/workflows/unit-test.yml

@@ -100,6 +100,25 @@ jobs:
             - name: Run the date tests
               run: npm run test:unit:date -- --ci --maxWorkers=${{ steps.cpu-cores.outputs.count }} --cacheDirectory="$HOME/.jest-cache"
 
+    types:
+        name: TypeScript Tests
+        runs-on: ubuntu-latest
+        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+        strategy:
+            fail-fast: false
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+
+            - name: Run the types tests
+              run: npm run test:types
+
     compute-previous-wordpress-version:
         name: Compute previous WordPress version
         runs-on: ubuntu-latest

bin/run-test-types.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+const glob = require( 'glob' );
+const { execSync } = require( 'child_process' );
+const path = require( 'path' );
+let hasError = false;
+
+// Find all tsconfig.json files within test-types directories.
+const tsconfigPaths = glob.sync( '**/test-types/**/tsconfig.json' );
+
+if ( tsconfigPaths.length > 0 ) {
+	tsconfigPaths.forEach( ( tsconfigPath ) => {
+		const dir = path.dirname( tsconfigPath );
+		const command = `npx tsc --project ${ tsconfigPath }`;
+		console.log( `Testing types in ${ dir }` );
+		try {
+			execSync( command, { stdio: 'inherit' } );
+		} catch ( error ) {
+			hasError = true;
+		}
+	} );
+
+	if ( hasError ) {
+		process.exit( 1 );
+	}
+}

package.json

@@ -351,6 +351,7 @@
 		"test:unit:php:multisite:debug": "npm-run-all test:unit:php:setup:debug test:unit:php:multisite:base",
 		"test:unit:update": "npm run test:unit -- --updateSnapshot",
 		"test:unit:watch": "npm run test:unit -- --watch",
+		"test:types": "node bin/run-test-types.js",
 		"wp-env": "wp-env"
 	},
 	"lint-staged": {

packages/interactivity/src/store.ts

@@ -50,6 +50,26 @@ interface StoreOptions {
 	lock?: boolean | string;
 }
 
+// Utility type to check if a function is a generator function.
+type ConvertGenerator< T > = T extends (
+	...args: infer A
+) => Generator< any, infer R, any >
+	? ( ...args: A ) => Promise< R >
+	: never;
+
+// Utility type to convert all generator functions in an object to async functions.
+type ConvertGenerators< T > = {
+	[ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+		? ConvertGenerator< T[ K ] > extends never
+			? T[ K ]
+			: ConvertGenerator< T[ K ] >
+		: T[ K ] extends object
+		? Prettify<ConvertGenerators< T[ K ] >>
+		: T[ K ];
+};
+
+type Prettify<T> = { [ K in keyof T ]: T[ K ]; } & {};
+
 export const universalUnlock =
 	'I acknowledge that using a private store means my plugin will inevitably break on the next store release.';
 
@@ -102,13 +122,13 @@ export function store< S extends object = {} >(
 	namespace: string,
 	storePart?: S,
 	options?: StoreOptions
-): S;
+): Prettify<ConvertGenerators< S >>;
 
 export function store< T extends object >(
 	namespace: string,
 	storePart?: T,
 	options?: StoreOptions
-): T;
+): Prettify<ConvertGenerators< T >>;
 
 export function store(
 	namespace: string,

packages/interactivity/src/test-types/store.ts

@@ -0,0 +1,34 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+const { actions } = store( 'test', {
+	actions: {
+		sync: () => 123,
+		*async() {
+			return 123;
+		},
+	},
+} );
+
+/**
+ * Test types.
+ */
+{
+	const var1: number = actions.sync();
+	const var2: Promise< number > = actions.async();
+	const var3: number = await actions.async();
+}
+
+{
+	// @ts-expect-error
+	const var1: string = actions.sync();
+	// @ts-expect-error
+	const var2: Promise< string > = actions.async();
+	// @ts-expect-error
+	const var3: string = await actions.async();
+}

packages/interactivity/src/test-types/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "..",
+		"emitDeclarationOnly": false,
+		"noEmit": true,
+		// Implicit any can be removed once this work is finished:
+		// https://github.com/WordPress/gutenberg/pull/61695
+		"noImplicitAny": false,
+		"noUnusedLocals": false
+	},
+	"include": [ "../**/*" ],
+	"exclude": [ "../test/**/*" ]
+}

packages/interactivity/src/test/store.ts

@@ -0,0 +1,45 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+describe( 'Interactivity API', () => {
+	it( 'needs at least one test', () => {
+		expect( true ).toBe( true );
+	} );
+
+	describe( 'static typing', () => {
+		( async () => {
+			const { actions } = store( 'test', {
+				actions: {
+					sync: () => 123,
+					*async() {
+						return 123;
+					},
+				},
+			} );
+
+			/**
+			 * Test types.
+			 */
+			{
+				const var1: number = actions.sync();
+				const var2: Promise< number > = actions.async();
+				const var3: number = await actions.async();
+			}
+
+			{
+				// This is expected to fail.
+				// // @ts-expect-error
+				const var1: string = actions.sync();
+				// @ts-expect-error
+				const var2: Promise< string > = actions.async();
+				// @ts-expect-error
+				const var3: string = await actions.async();
+			}
+		} )();
+	} );
+} );

packages/interactivity/tsconfig.json

@@ -4,7 +4,6 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-
 		"noImplicitAny": false
 	},
 	"include": [ "src/**/*" ]

tsconfig.base.json

@@ -41,6 +41,7 @@
 		"packages/*/build-*/**",
 		"packages/*/build/**",
 		"**/test/**",
+		"**/test-types/**",
 		"packages/**/react-native-*/**"
 	]
 }