Che cosa fa questo strumento
Un campione JSON diventa forme PropTypes, un const per oggetto.
{ "id": 1, "name": "Ada", "address": { "city": "Paris" } }
import PropTypes from 'prop-types';
export const AddressShape = PropTypes.shape({
city: PropTypes.string.isRequired,
});
export const RootShape = PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
address: AddressShape.isRequired,
});
Prima i figli: sono valori a runtime, una forma deve esistere prima che un’altra la richiami. Un array alla radice riceve il proprio const, PropTypes.arrayOf(UsersItemShape).
Obbligatorio vuol dire «c’era»
Ogni chiave del campione esce con .isRequired, perché il campione la conteneva. È un’affermazione verificabile e, dove è falsa, si disfa con una cancellazione. L’alternativa — segnare tutto opzionale — affermerebbe qualcosa su dati che nessuno ha mostrato, e renderebbe il controllo inutile proprio dove conta.
Due casi restano morbidi: un null e un valore ignoto danno entrambi PropTypes.any senza .isRequired. Un null ti dice che la chiave esiste e nulla del suo tipo: pretenderla affermerebbe più di quanto il campione regga.
Solo in sviluppo, e per scelta
Gli avvisi di PropTypes compaiono in sviluppo e sono saltati in produzione, per costruzione. Non è un difetto, è il patto: un controllo a runtime che non costa nulla dove costerebbe di più. Significa anche che un carico malformato che arriva a un utente non produce alcun avviso — PropTypes è un aiuto allo sviluppo, non uno strato di validazione. Per una validazione che gira ovunque, il generatore Zod di questo sito emette schemi che lo fanno.
React 19 non li legge più
React 19 ha rimosso il controllo dei propTypes sui componenti: assegnare Component.propTypes non ha più alcun effetto, in silenzio. Il pacchetto prop-types esiste ancora e queste forme restano valori che puoi chiamare tu — PropTypes.checkPropTypes(…) — ma se parti oggi su un React attuale, questo generatore serve le basi esistenti più che le nuove.
I soliti limiti di un campione
Un array eterogeneo diventa PropTypes.oneOfType([...]), largo esattamente quanto ciò che ha visto. Un array vuoto diventa PropTypes.array, senza dire nulla degli elementi. E una chiave che non è un identificatore valido tiene le virgolette, cosa che JavaScript accetta senza batter ciglio.
Privato per progettazione
Tutto viene eseguito localmente nel browser con JavaScript. I tuoi dati non vengono mai caricati, quindi lo strumento è sicuro per contenuti sensibili e funziona anche offline.