WordPress block development TypeScript - useSelect type error

Question

I'm trying to use useSelect with TypeScript to get the current post type. In regular JavaScript, this code works fine (and is in fact code used in the main Gutenberg repo):

const postType = useSelect(
    ( select ) => select( 'core/editor' ).getCurrentPostType(),
    []
);

However, when I convert to TypeScript, this throws a type error:

Property 'getCurrentPostType' does not exist on type 'never'.ts(2339)

I can't see what's causing it, why the return type is <never>.

The code actually does work and compiles fine, but I would like to get it type safe. Any ideas on how I can resolve this would be much appreciated.

Which version are you using? It seems like similar issue to Gutenberg issue #48133 depending on version. — S.Walsh
– S.Walsh, Commented Aug 21, 2023 at 3:13

zoku · Accepted Answer · 2024-06-27 11:29:00Z

3

You can import store from "@wordpress/editor" and use it instead of the store's name.

Additionally, you will have to import the store's selectors manually (because of a bug in the types of @wordpress/editor / @wordpress/data) like import StoreSelectors from "@wordpress/editor/store/selectors".

Example:

import {useSelect} from "@wordpress/data"
import {store as CoreEditorStore} from "@wordpress/editor"
import CoreEditorStoreSelectors from "@wordpress/editor/store/selectors"

/* ... */

const postType = useSelect(
    (select) => (
      (select(CoreEditorStore) as typeof CoreEditorStoreSelectors)
        .getCurrentPostType()
    ),
    [],
)

/* ... */

From the sources:

/*
 * (...)
 * @param storeNameOrDescriptor The store descriptor. The legacy calling convention
 *                              of passing the store name is also supported.
 * (...)
 */

edited Jun 27, 2024 at 11:29

answered Jun 27, 2024 at 10:25

zoku

7,2963 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taylor A. Leach Dec 11, 2024 at 17:03

Is this still accurate? I'm struggling with my setup to get the types sorted out. Property 'getCurrentPost' does not exist on type 'never'.

codewithfeeling · Accepted Answer · 2024-06-27 12:19:35Z

0

As mentioned by @zoku, you can import the correct type and use that instead of "core/editor" in the select.

The simpler solution I've been using is just to create a very simple inline type:

interface HasCurrentPostType {
    getCurrentPostType: () => string;
};

const postType = useSelect(
    ( select ) => (select( 'core/editor' ) as HasCurrentPostType).getCurrentPostType(),
    []
);

Both are valid approaches – @zoku's is more complete in terms of using type safety from WordPress itself.

answered Jun 27, 2024 at 12:19

codewithfeeling

6,6467 gold badges48 silver badges53 bronze badges

Collectives™ on Stack Overflow

WordPress block development TypeScript - useSelect type error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related