¿Tiene sentido usar React.PropTypes en una aplicación TypeScript React o es solo un caso de "cinturón y tirantes"?
Dado que la clase de componente se declara con un parámetro de tipo Props :
interface Props { // ... } export class MyComponent extends React.Component<Props, any> { ... }¿Hay algún beneficio real en agregar
static propTypes { myProp: React.PropTypes.string }a la definición de clase?
Typescript y PropTypes sirven para diferentes propósitos. Typescript valida los tipos en tiempo de compilación , mientras que PropTypes se verifican 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 React, le dará autocompletado para llamadas a funciones, etc.
Los PropTypes son útiles cuando prueba cómo interactúan los componentes 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 está fallando al imprimir mensajes útiles como:
Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`Aunque pueda parecer que Typescript y PropTypes hacen lo mismo, en realidad no se superponen en absoluto. Pero es posible generar PropTypes automáticamente desde Typescript para que no tenga que especificar los tipos dos veces, vea por ejemplo:
Por lo general, no tiene mucho valor mantener los accesorios de los componentes como tipos de TypeScript y React.PropTypes al mismo tiempo.
Estos son algunos casos en los que es útil hacerlo:
Por lo tanto, 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 sus React.PropTypes ( PropTypes.InferProps ), pero los tipos resultantes pueden ser difíciles de usar o consultar en otras partes de su código.
Como dijo @afonsoduarte.
Solo agregaría que también puede generar tipos de mecanografiados a partir de PropTypes como este:
const propTypes = { input: PropTypes.shape({ id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, }), }; type MyComponentProps = PropTypes.InferProps<typeof propTypes>; const MyComponent: FunctionComponent<MyComponentProps > = (props) => { // ... } MyComponent.propTypes = propTypes;