100 % locale — i tuoi dati non lasciano mai il tuo browser

JSON in PropTypes — una prop sbagliata si vede

Trasforma un campione JSON in shape di PropTypes. Una shape per oggetto, richiesta per impostazione predefinita: una prop sbagliata compare nella console.

Istantaneo Privato Zero cookie

Input JSON

Output PropTypes

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.

Domande frequenti

Funziona ancora con React 19?
Non tramite React. React 19 ignora del tutto i `propTypes` di un componente: il controllo è stato rimosso, non deprecato. Il pacchetto `prop-types` continua a funzionare come validatore autonomo che chiami tu, e queste forme restano JavaScript valido; ma se sei su React 19 e vuoi controllare le prop, la risposta è TypeScript.
Perché tutto è `.isRequired`?
Perché ogni chiave era nel campione. È un’affermazione su un carico, e `.isRequired` ne è la traduzione onesta: una prop che c’era. Se ci sia sempre non lo dice il documento; togli il `.isRequired` da quelle di cui il tuo componente può fare a meno.
Questi controlli finiscono nel mio bundle di produzione?
Gli avvisi no: React eseguiva i controlli PropTypes solo in sviluppo, e la libreria segue la stessa convenzione. Gli oggetti forma invece partono, a meno che il bundler non li tolga — una ragione in più perché un `PropTypes.shape` che descrive un carico grande resti modesto.

Convertitori correlati