Búsqueda de sitios web

Desarrollo de bloques de WordPress TypeScript - error de tipo useSelect

Estoy intentando usar useSelect con TypeScript para obtener el tipo de publicación actual. En JavaScript regular, este código funciona bien (y de hecho es código utilizado en el repositorio principal de Gutenberg):

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

Sin embargo, cuando convierto a TypeScript, esto lanza un error de tipo:

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

No puedo ver qué lo está causando, por qué el tipo de retorno es <never>.

El código en realidad funciona y se compila bien, pero me gustaría que fuera seguro en cuanto a tipos. Cualquier idea sobre cómo puedo resolver esto sería muy apreciada.

Respuesta #1

Puedes importar store desde "@wordpress/editor" y usarlo en lugar del nombre de la tienda.

Además, tendrás que importar los selectores de la tienda manualmente (debido a un error en los tipos de @wordpress/editor/@wordpress/data) como import StoreSelectors from "@wordpress/editor/store/selectors".

Ejemplo :

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()
    ),
    [],
)

/* ... */

De las fuentes:

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

Respuesta #2

Como mencionó @zoku, puedes importar el tipo correcto y usar eso en lugar de "core/editor" en la selección.

La solución más sencilla que he estado usando es simplemente crear un tipo en línea muy simple:

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

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

Ambos son enfoques válidos: el de @zoku es más completo en términos de usar la seguridad de tipos de WordPress en sí.

Artículos relacionados