PropTypes en una aplicación TypeScript React

121

¿Tiene React.PropTypessentido usarlo en una aplicación React de TypeScript o es solo un caso de "cinturón y tirantes"?

Dado que la clase de componente se declara con un Propsparámetro de tipo:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

¿Existe algún beneficio real al agregar

static propTypes {
    myProp: React.PropTypes.string
}

a la definición de clase?

Ralph
fuente

Respuestas:

104

Por lo general, no hay mucho valor en mantener los accesorios de sus componentes como tipos de TypeScript y React.PropTypesal mismo tiempo.

A continuación, se muestran algunos casos en los que resulta útil hacerlo:

  • Publicar un paquete, como una biblioteca de componentes, que será utilizado por JavaScript simple.
  • Aceptar y transmitir información externa, como los resultados de una llamada a la API.
  • Usar datos de una biblioteca que pueden no tener mecanografiados adecuados o precisos, si los hay.

Entonces, generalmente es una cuestión de cuánto puede confiar en su validación de tiempo de compilación.

Las versiones más recientes de TypeScript ahora pueden inferir tipos en función de su React.PropTypes( PropTypes.InferProps), pero los tipos resultantes pueden ser difíciles de usar o hacer referencia a otros en su código.

Día joel
fuente
1
¿Podría explicar la primera afirmación?
vehsakul
2
@vehsakul Lo sentimos, para aclarar, si está escribiendo un paquete que será instalado por desarrolladores que no están usando TypeScript, todavía necesitan PropTypes para obtener errores en tiempo de ejecución. Si su proyecto es solo para usted / otros proyectos de TypeScript, las interfaces de TypeScript para sus accesorios son suficientes porque el proyecto simplemente no se compilará.
Joel Day
1
Este es un POC que agrega PropTypes de interfaces mecanografiadas en el nivel de paquete
web
Quiero un oneOfType - OptionalUnion: PropTypes.oneOfType ([PropTypes.string, PropTypes.number, PropTypes.instanceOf (Message)]), - mecanografiado tiene tipos de unión, pero no me dan exactamente lo mismo
Mz A
1
He publicado una biblioteca que también hace esto: github.com/joelday/ts-proptypes-transformer Se implementa como una transformación del compilador de TypeScript y produce propTypes precisos para genéricos profundos, uniones, etc. cualquier contribución sería maravillosa.
Joel Day
140

Mecanografiado y PropTypes tienen diferentes propósitos. TypeScript valida los tipos en tiempo de compilación , mientras que los PropTypes se comprueban en tiempo de ejecución .

TypeScript es útil cuando está escribiendo código: le advertirá si pasa un argumento del tipo incorrecto a sus componentes de React, le dará autocompletado para llamadas a funciones, etc.

Los PropTypes son útiles cuando prueba cómo los componentes interactúan con datos externos, por ejemplo, cuando carga JSON desde una API. PropTypes lo ayudará a depurar (cuando esté en el modo de desarrollo de React) por qué su componente falla imprimiendo mensajes útiles como:

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

Aunque parezca que TypeScript y PropTypes hacen lo mismo, en realidad no se superponen en absoluto. Pero es posible generar PropTypes automáticamente desde Typecript para que no tenga que especificar tipos dos veces, vea por ejemplo:

afonsoduarte
fuente
1
¿Los tipos propTypes y Typecript se desincronizan fácilmente? ¿Alguien ha tenido experiencia en mantenimiento para contarnos?
Leonardo
9
¡Esta es la respuesta correcta! PropTypes (tiempo de ejecución) no es lo mismo que la verificación de tipos estáticos (tiempo de compilación). Por tanto, utilizar ambos no es un "ejercicio inútil".
hans
1
Aquí hay una buena explicación sobre cómo se pueden inferir tipos estáticos de PropTypes: dev.to/busypeoples/…
hans
El tiempo de ejecución frente al tiempo de compilación no tiene sentido cuando tiene vue cli con hot reload y eslint. Lo que genera errores al guardar.
Julia
1
@Julia, la recarga en caliente no tiene nada en común con el tiempo de ejecución. Incluso con la recarga en caliente, no tendrá idea de lo que realmente devolverá la API
Kostya Tresko
4

Supongo que en algunas situaciones complicadas en las que el tipo de accesorios no se puede inferir en tiempo de compilación, sería útil ver las advertencias generadas por el uso propTypesen tiempo de ejecución.

Una de esas situaciones sería cuando se procesan datos de una fuente externa para la que las definiciones de tipo no están disponibles, como una API externa fuera de su control. Para las API internas, creo que vale la pena el esfuerzo de escribir (o mejor, generar) definiciones de tipo, si aún no están disponibles.

Aparte de eso, realmente no veo ningún beneficio (por lo que nunca lo he usado personalmente).

Tom Fenech
fuente
7
La validación de PropTypes también tiene sentido para validar estructuras de datos cargadas dinámicamente (provenientes del servidor a través de AJAX). PropTypes es una validación en tiempo de ejecución y, por lo tanto, realmente puede ayudar a depurar cosas. Como problemas, se generarán mensajes claros y amigables para las personas.
e1v