Guía de introducción al uso de TS con React

Como dije antes, el uso de mecanografiado con proyectos preexistentes puede ser una molestia debido a la necesidad de revisar toda la aplicación para declarar la escritura, pero si eres un desarrollador de React como yo, aquí tienes una guía rápida sobre el uso de TypeScript. con React.

Es posible que esta guía no sea para todos, ya que es solo para desarrolladores de React, pero si eres un desarrollador de React y quieres aprender Typecript, puedes consultar mi guía anterior sobre conceptos básicos de mecanografiado.

¿Es TypeScript el futuro de JavaScript? | de Steven Wu | Cultura friki | Jul, 2021 | Medio

Instalación

React tiene compatibilidad con TypeScript, por lo que todo lo que necesita hacer es ejecutar el comando normal de la aplicación Create React con el indicador de plantilla TS

npx create-react-app <app-name> --template typescript

      

Ejemplo de contador

Para mi ejemplo, construiré una aplicación de contador simple. Después de que se terminó de instalar React boilerplate, creé una carpeta de componentes dentro del directorio src y creé dos componentes (Count.tsx y Counter.tsx) y reemplacé el código de React boilerplate en App.tsx con mi código.

Primero, veamos el componente Count

TS y React son tan compatibles en estos días, simplemente puede declarar la escritura de Count como un Componente funcional de React que incluye un accesorio que será el accesorio de conteo de este componente con la escritura de número. Esto es realmente importante para usar TypeScript con React, esto es muy útil en un escenario del mundo real donde otros desarrolladores podrían trabajar en su código en el futuro e intentarán agregar aleatoriamente números como cadenas. Encuentro que esto es un gran desarrollador, ya que arrojará un error antes de que el producto llegue a manos del cliente.

A continuación, veamos nuestro siguiente ejemplo de un componente de clase de reacción ahora

Puede ver en el ejemplo anterior que simplemente he declarado la interfaz de Props que puede tomar cualquier dato y la interfaz de estado que solo tiene un recuento con el tecleo de número.

¡Eso es! Espero que este artículo le haya dado suficiente información sobre si usar o no Typecript con React. Personalmente, usaría TS con React en el futuro debido a su flexibilidad. Es genial que pueda detectar errores simples al predefinir tipos para sus componentes o simplemente elegir no definir su escritura en el caso de usar accesorios donde desea la flexibilidad de pasar cualquier cosa como un accesorio por el árbol de nodos.

Explicar TS con React será un artículo demasiado largo para una sola sesión. Comenzaré una serie de artículos de React que enseñarán todos los conceptos, desde principiantes hasta avanzados.

Si te gustó este artículo, síguelo o deja un comentario y consulta mis otros artículos en Medium.