Introducción
TypeScript es un superconjunto de JavaScript que añade tipos estáticos opcionales. Utilizar TypeScript con React puede mejorar la calidad del código, facilitar el mantenimiento y reducir errores. En esta sección, aprenderemos cómo integrar TypeScript en un proyecto de React y cómo aprovechar sus características para escribir componentes más robustos y seguros.
Configuración del Entorno
Instalación de TypeScript
Para empezar a usar TypeScript en un proyecto de React, primero necesitamos instalar TypeScript y los tipos para React.
Este comando crea un nuevo proyecto de React con TypeScript ya configurado.
Archivos de Configuración
El archivo tsconfig.json es el archivo de configuración principal para TypeScript. Aquí hay un ejemplo básico:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}Tipos Básicos en React
Componentes Funcionales
Los componentes funcionales en TypeScript se escriben de manera similar a los componentes en JavaScript, pero con tipos explícitos.
import React from 'react';
interface GreetingProps {
name: string;
}
const Greeting: React.FC<GreetingProps> = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
export default Greeting;Componentes de Clase
Para los componentes de clase, también podemos definir tipos para las props y el estado.
import React, { Component } from 'react';
interface CounterProps {
initialCount: number;
}
interface CounterState {
count: number;
}
class Counter extends Component<CounterProps, CounterState> {
constructor(props: CounterProps) {
super(props);
this.state = {
count: props.initialCount
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;Uso de Hooks con TypeScript
useState
El hook useState puede ser tipado para asegurar que el estado tenga el tipo correcto.
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;useEffect
El hook useEffect no requiere tipos adicionales, pero podemos tipar las variables que usamos dentro del efecto.
import React, { useEffect, useState } from 'react';
const Timer: React.FC = () => {
const [seconds, setSeconds] = useState<number>(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <p>Seconds: {seconds}</p>;
};
export default Timer;Tipos Avanzados
Tipos de Props Opcionales
Podemos definir props opcionales usando el operador ?.
interface UserProps {
name: string;
age?: number;
}
const User: React.FC<UserProps> = ({ name, age }) => {
return (
<div>
<p>Name: {name}</p>
{age && <p>Age: {age}</p>}
</div>
);
};
export default User;Tipos de Unión
Podemos usar tipos de unión para props que pueden tener múltiples tipos.
interface StatusProps {
status: 'loading' | 'success' | 'error';
}
const Status: React.FC<StatusProps> = ({ status }) => {
return <p>Status: {status}</p>;
};
export default Status;Ejercicios Prácticos
Ejercicio 1: Crear un Componente Tipado
Crea un componente Profile que acepte las siguientes props: firstName (string), lastName (string) y age (number, opcional).
import React from 'react';
interface ProfileProps {
firstName: string;
lastName: string;
age?: number;
}
const Profile: React.FC<ProfileProps> = ({ firstName, lastName, age }) => {
return (
<div>
<p>First Name: {firstName}</p>
<p>Last Name: {lastName}</p>
{age && <p>Age: {age}</p>}
</div>
);
};
export default Profile;Ejercicio 2: Tipar un Hook Personalizado
Crea un hook personalizado useCounter que gestione un contador. El hook debe devolver el valor del contador y una función para incrementarlo.
import { useState } from 'react';
const useCounter = (initialValue: number) => {
const [count, setCount] = useState<number>(initialValue);
const increment = () => {
setCount(count + 1);
};
return { count, increment };
};
export default useCounter;Conclusión
Integrar TypeScript con React puede parecer desafiante al principio, pero los beneficios en términos de seguridad y mantenibilidad del código son significativos. En esta sección, hemos cubierto cómo configurar un proyecto de React con TypeScript, cómo tipar componentes funcionales y de clase, y cómo usar hooks con TypeScript. Con la práctica, te sentirás más cómodo y podrás aprovechar al máximo las capacidades de TypeScript en tus proyectos de React.
En el siguiente módulo, exploraremos cómo construir aplicaciones móviles con React Native, llevando tus habilidades de React al desarrollo móvil.
Curso de React
Módulo 1: Introducción a React
- ¿Qué es React?
- Configuración del Entorno de Desarrollo
- Hola Mundo en React
- JSX: Extensión de Sintaxis de JavaScript
Módulo 2: Componentes de React
- Entendiendo los Componentes
- Componentes Funcionales vs de Clase
- Props: Pasando Datos a Componentes
- State: Gestión del Estado del Componente
Módulo 3: Trabajando con Eventos
- Manejo de Eventos en React
- Renderizado Condicional
- Listas y Claves
- Formularios y Componentes Controlados
Módulo 4: Conceptos Avanzados de Componentes
- Elevando el Estado
- Composición vs Herencia
- Métodos del Ciclo de Vida de React
- Hooks: Introducción y Uso Básico
Módulo 5: Hooks de React
Módulo 6: Enrutamiento en React
Módulo 7: Gestión del Estado
- Introducción a la Gestión del Estado
- API de Contexto
- Redux: Introducción y Configuración
- Redux: Acciones y Reductores
- Redux: Conectando a React
Módulo 8: Optimización del Rendimiento
- Técnicas de Optimización del Rendimiento en React
- Memorización con React.memo
- Hooks useMemo y useCallback
- División de Código y Carga Perezosa
Módulo 9: Pruebas en React
- Introducción a las Pruebas
- Pruebas Unitarias con Jest
- Pruebas de Componentes con React Testing Library
- Pruebas de Extremo a Extremo con Cypress
Módulo 10: Temas Avanzados
- Renderizado del Lado del Servidor (SSR) con Next.js
- Generación de Sitios Estáticos (SSG) con Next.js
- TypeScript con React
- React Native: Creación de Aplicaciones Móviles