JSON a PropTypes — una prop mal formada avisa

Qué hace esta herramienta

Una muestra JSON pasa a ser formas de PropTypes, un const por objeto.

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

Los hijos primero: son valores de ejecución, una forma debe existir antes de que otra se refiera a ella. Un array en la raíz recibe su propio const, PropTypes.arrayOf(UsersItemShape).

Obligatorio quiere decir «estaba ahí»

Cada clave de la muestra sale con .isRequired, porque la muestra la traía. Es una afirmación comprobable y, donde sea falsa, se deshace con un borrado. La alternativa —marcarlo todo opcional— afirmaría algo sobre datos que nadie enseñó, y dejaría el control inútil justo donde importa.

Dos casos quedan blandos: un null y un valor desconocido dan ambos PropTypes.any sin .isRequired. Un null te dice que la clave existe y nada de su tipo: exigirlo afirmaría más de lo que la muestra sostiene.

Solo en desarrollo, y asumido

Los avisos de PropTypes aparecen en desarrollo y se omiten en producción, por diseño. No es un defecto, es el trato: un control en ejecución que no cuesta nada donde costaría más. También significa que una carga malformada que llega a un usuario no produce aviso alguno: PropTypes es una ayuda al desarrollo, no una capa de validación. Para validar en todas partes, el generador Zod de este sitio emite esquemas que sí lo hacen.

React 19 ya no los lee

React 19 quitó la comprobación de propTypes en los componentes: asignar Component.propTypes no tiene ningún efecto, en silencio. El paquete prop-types sigue existiendo y estas formas siguen siendo valores que puedes llamar tú —PropTypes.checkPropTypes(…)—, pero si empiezas hoy sobre un React actual, este generador sirve a las bases existentes más que a las nuevas.

Los límites habituales de una muestra

Un array heterogéneo pasa a PropTypes.oneOfType([...]), exactamente tan ancho como lo que vio. Un array vacío pasa a PropTypes.array, sin decir nada de los elementos. Y una clave que no es un identificador válido conserva sus comillas, cosa que JavaScript acepta sin rechistar.

Privado por diseño

Todo se ejecuta localmente en tu navegador con JavaScript. Tus datos nunca se suben a un servidor, lo que hace que la herramienta sea segura para contenido sensible y funcione sin conexión.