100 % local — vos données ne quittent jamais votre navigateur

JSON en PropTypes — une prop fausse se signale

Transformez un échantillon JSON en shapes PropTypes. Une shape par objet, requise par défaut : une prop de mauvaise forme apparaît dans la console de dev.

Instantané Privé Zéro cookie

Entrée JSON

Sortie PropTypes

Ce que fait cet outil

Un échantillon JSON devient des formes PropTypes, un const par objet.

{ "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,
});

Les enfants d’abord : ce sont des valeurs d’exécution, une forme doit exister avant qu’une autre s’y réfère. Un tableau à la racine reçoit son propre const, PropTypes.arrayOf(UsersItemShape).

Obligatoire veut dire « c’était là »

Chaque clé de l’échantillon sort en .isRequired, parce que l’échantillon la contenait. C’est une affirmation vérifiable et, là où elle est fausse, défaite par une suppression. L’autre option — tout marquer optionnel — affirmerait quelque chose sur des données que personne n’a montrées, et rendrait le contrôle inutile là où il compte.

Deux cas restent souples : un null et une valeur inconnue donnent tous deux PropTypes.any sans .isRequired. Un null vous dit que la clé existe et rien sur son type : l’exiger affirmerait plus que l’échantillon ne porte.

Développement seulement, et c’est assumé

Les avertissements PropTypes paraissent en développement et sont ignorés en production, par construction. Ce n’est pas un défaut, c’est le marché : un contrôle à l’exécution qui ne coûte rien là où il coûterait le plus. Cela veut dire qu’une charge malformée arrivant chez un utilisateur ne produit aucun avertissement — PropTypes est une aide au développement, pas une couche de validation. Pour une validation qui s’exécute partout, le générateur Zod de ce site en émet une.

React 19 ne les lit plus

React 19 a retiré le contrôle des propTypes sur les composants : affecter Component.propTypes n’a plus aucun effet, en silence. Le paquet prop-types existe toujours et ces formes restent des valeurs que vous pouvez appeler vous-même — PropTypes.checkPropTypes(…) — mais si vous démarrez aujourd’hui sur un React récent, ce générateur sert les bases existantes plutôt que les nouvelles.

Les limites habituelles d’un échantillon

Un tableau hétérogène devient PropTypes.oneOfType([...]), exactement aussi large que ce qu’il a vu. Un tableau vide devient PropTypes.array, sans rien dire des éléments. Et une clé qui n’est pas un identifiant valide garde ses guillemets, ce que JavaScript accepte sans broncher.

Confidentiel par conception

Tout s’exécute localement dans votre navigateur en JavaScript. Vos données ne sont jamais envoyées sur un serveur, ce qui rend l’outil sûr pour des contenus sensibles, et il fonctionne hors ligne.

Questions fréquentes

Cela marche-t-il encore avec React 19 ?
Pas via React. React 19 ignore entièrement les `propTypes` d’un composant : le contrôle a été retiré, pas déprécié. Le paquet `prop-types` fonctionne toujours comme validateur autonome que vous appelez vous-même, et ces formes restent du JavaScript valide ; mais si vous êtes en React 19 et voulez vérifier des props, la réponse est TypeScript.
Pourquoi tout est-il `.isRequired` ?
Parce que chaque clé était dans l’échantillon. C’est une affirmation sur une charge, et `.isRequired` en est la traduction honnête : une prop qui était là. Savoir si elle y est toujours n’est pas dans le document ; retirez le `.isRequired` de celles dont votre composant peut se passer.
Ces contrôles sont-ils dans mon paquet de production ?
Les avertissements, non : React n’exécutait les contrôles PropTypes qu’en développement, et la bibliothèque suit la même convention. Les objets de forme, eux, sont embarqués sauf si votre bundler les retire — une raison de plus pour qu’un `PropTypes.shape` décrivant une grosse charge reste modeste.

Convertisseurs associés