reactjs - Typescript-typer för WordPress Gutenberg som använder useSelect-hooken för att hämta core/editor


Jag försöker använda TypeScript i utveckling med WordPress och Gutenberg-editor. Jag försöker använda useSelect()-hooken men jag får ett typerrors när jag försöker använda en bifogad funktion till core/editor. Så här är ett exempel på problemet jag har:

const featured = useSelect(
  (select) =>
    select('core/editor').getEditedPostAttribute('meta')[
      '_projects_featured'
    ],
  []
)

Och jag får följande fel:

Egenskapen 'getEditedPostAttribute' finns inte på typen 'never'.

Jag antar att det beror på att rätt typ inte används eftersom jag får samma fel oavsett vad jag försöker hämta från select('core/editor'). Men jag är inte säker på vilken typ jag ska använda för det. Jag kan helt enkelt sätta det valda core/editor till any som:

const editor: any = useSelect((select) => select('core/editor'))
const postAttribute = editor.getEditedPostAttribute()

Men detta motverkar uppenbarligen syftet med att använda TypeScript.

Det finns inte mycket information om utveckling med WordPress och TypeScript och det finns ingen officiell WordPress TypeScript-dokumentation. Jag har lagt till en massa typdefinitioner och jag kommer att posta några av dem från min package.json.

"dependencies": {
  "@types/wordpress__components": "^19.10.5",
  "@types/wordpress__core-data": "^2.4.5",
  "@types/wordpress__data": "^6.0.1",
  "@types/wordpress__edit-post": "^4.0.1",
  "@types/wordpress__editor": "^11.0.0",
  "@types/wordpress__element": "^2.14.1",
  "@types/wordpress__plugins": "^3.0.0",
  "@wordpress/data": "^8.0.0",
  "@wordpress/edit-post": "^7.0.0",
  "@wordpress/plugins": "^5.0.0"
}

All hjälp skulle uppskattas. Jag är inte säker på om det är en bra idé att använda TypeScript för utveckling med WordPress Gutenberg eller inte.

Svar #1

Dubbelkolla att useSelect() importeras i början av ditt skript:

import { useSelect } from '@wordpress/data';

const featured = useSelect(...);

Om problemet fortfarande kvarstår, kontrollera att den posttyp du frågar efter har den angivna metanyckeln registrerad. Observera: metanycklar som är prefixade med ett understreck, som _projects_featured, är ett privat/dolt anpassat fält och kommer inte att visas i postredigeraren - detta kan vara det potentiella problemet med just det här metafältet. Syntaxen för din const featured=useSelect(...) är korrekt, så ett annat potentiellt problem kan vara att selecten inte ännu har lösts när du använder den.