Chuck's Academy

TypeScript Básico

Inicio / Tema / TypeScript Básico / TypeScript en React

TypeScript en React

TypeScript se ha convertido en una herramienta poderosa para el desarrollo de aplicaciones React. Usar TypeScript con React no solo mejora la experiencia de desarrollo al agregar tipado estático y autocompletado, sino que también ayuda a prevenir errores antes de que ocurran. En este capítulo, aprenderemos cómo configurar un proyecto React con TypeScript y cómo tipar correctamente componentes, props, y más.

Esta imagen muestra un logo de typescript más reactEsta imagen muestra un logo de typescript más react

Configuración de un Proyecto React con TypeScript

Para empezar, podemos crear un nuevo proyecto React con soporte para TypeScript utilizando create-react-app. El siguiente comando genera una plantilla de proyecto React configurada para TypeScript:

bash
"Este comando crea un nuevo proyecto React con soporte para TypeScript utilizando create-react-app."

Este comando genera un proyecto en la carpeta my-app con los archivos de configuración necesarios para trabajar con TypeScript en React.

Estructura del Proyecto

Una vez generado el proyecto, verás una estructura de carpetas que incluye un archivo tsconfig.json y varios archivos .tsx. Los archivos .tsx son similares a los archivos .jsx en JavaScript, pero permiten el uso de TypeScript junto con JSX.

Tipado de Componentes Funcionales

En React, los componentes funcionales son la forma preferida de crear componentes. TypeScript permite tipar los props que estos componentes reciben, asegurando que los datos pasados a los componentes sean correctos.

Ejemplo de Componente Funcional Tipado

typescript
"En este ejemplo, hemos definido un componente funcional llamado Button. Utilizamos una interfaz llamada ButtonProps para definir que el componente recibe dos props: una etiqueta de tipo string y una función onClick."

Usando el Componente

typescript
"Aquí utilizamos el componente Button y pasamos las props necesarias, asegurándonos de que cumplen con el tipo definido en la interfaz ButtonProps."

Tipado de Props Opcionales

TypeScript también permite definir props opcionales en los componentes. Esto es útil cuando algunos props no son necesarios en todas las situaciones.

Ejemplo de Props Opcionales

typescript
"En este ejemplo, hemos definido un componente TextInput donde el prop placeholder es opcional, lo que significa que el componente puede recibir este prop o no."

Tipado de Estados con useState

El hook useState es ampliamente utilizado en React para manejar el estado de los componentes. En TypeScript, podemos tipar tanto el estado como la función que lo actualiza.

Ejemplo de useState Tipado

typescript
"Aquí utilizamos useState para manejar un estado count, que es de tipo number. El valor inicial del estado es 0, y utilizamos la función setCount para actualizar el estado cuando se hace clic en el botón."

Tipado de Refs con useRef

El hook useRef permite acceder directamente a elementos del DOM en componentes funcionales. También podemos tipar useRef en TypeScript para asegurar que siempre referenciemos el tipo correcto de elemento.

Ejemplo de useRef Tipado

typescript
"En este ejemplo, utilizamos useRef para referenciar un elemento input en el DOM. Tipamos el ref como HTMLInputElement para asegurarnos de que siempre estamos trabajando con un input."

Tipado de Componentes con Children

En React, muchos componentes aceptan elementos hijos (children) como parte de sus props. TypeScript permite tipar estos hijos utilizando la propiedad React.ReactNode.

Ejemplo de Componente con Children

typescript
"Este componente Container acepta cualquier tipo de elemento React como children, que se renderizan dentro de un div con la clase container."

Uso de Context API con TypeScript

React Context API se utiliza para compartir datos entre componentes sin necesidad de pasar props manualmente. Podemos tipar el contexto para asegurarnos de que los datos que compartimos sean siempre del tipo esperado.

Ejemplo de Context API Tipado

typescript
"Aquí definimos un contexto ThemeContext utilizando la API de Context de React. El valor del contexto contiene un estado theme de tipo string y una función toggleTheme."

Conclusión

En este capítulo, hemos aprendido a usar TypeScript con React, incluyendo cómo tipar componentes funcionales, props, estados y contextos. TypeScript nos proporciona seguridad adicional al trabajar con aplicaciones React, ayudando a evitar errores y mejorando la productividad.

Volver al capítulo anterior
Marcar como leìdo y continuar
Pregúntame lo que sea