TypeScript se ha convertido en una herramienta fundamental para desarrollar aplicaciones modernas con React y Next.js. Su principal ventaja es que permite detectar errores antes de ejecutar el código, mejorar el autocompletado y facilitar el mantenimiento de proyectos grandes.
¿Qué es TypeScript y por qué utilizarlo?
TypeScript es un lenguaje basado en JavaScript que añade un sistema de tipos estáticos. Esto significa que podemos definir qué tipo de datos recibe una función, qué propiedades tiene un objeto o qué valores puede utilizar una variable.
Por ejemplo, en JavaScript una variable puede cambiar fácilmente de tipo. TypeScript permite establecer reglas para evitar errores relacionados con números, cadenas de texto, objetos y otros datos.
1. Definir tipos e interfaces
Una buena práctica consiste en definir los tipos de datos que utilizará la aplicación. En React, esto resulta especialmente útil para representar usuarios, productos o respuestas de una API.
interface Usuario {
id: number;
nombre: string;
email: string;
}
const usuario: Usuario = {
id: 1,
nombre: "Carlos",
email: "carlos@email.com"
};
La interfaz Usuario establece qué propiedades son obligatorias y qué tipo de información deben contener. Así, TypeScript detecta propiedades faltantes o valores incorrectos.
2. Tipar correctamente las props en React
Los componentes reciben información mediante propiedades o props. Definir sus tipos facilita la reutilización y evita errores al pasar datos.
interface SaludoProps {
nombre: string;
}
function Saludo({ nombre }: SaludoProps) {
return <h1>Hola, {nombre}</h1>;
}
Ahora el componente espera una cadena de texto. Si otro componente intenta enviar un número, TypeScript mostrará un error durante el desarrollo.
3. Utilizar TypeScript en Next.js
Next.js incluye soporte integrado para TypeScript. Al crear un proyecto, podemos seleccionar TypeScript durante la configuración inicial o incorporarlo posteriormente.
En el App Router, es recomendable tipar los parámetros de las páginas, los datos recibidos y las respuestas de las funciones del servidor.
interface Producto {
id: number;
nombre: string;
}
export default async function PaginaProductos() {
const productos: Producto[] = [
{ id: 1, nombre: "Teclado" },
{ id: 2, nombre: "Ratón" }
];
return (
<ul>
{productos.map(producto => (
<li key={producto.id}>
{producto.nombre}
</li>
))}
</ul>
);
}
Este ejemplo muestra una página que representa una lista de productos tipados. En una aplicación real, los datos podrían proceder de una base de datos o una API.
4. Tipar estados y eventos
TypeScript también mejora el manejo de estados y eventos en React.
const [contador, setContador] = useState<number>(0);
function incrementar() {
setContador(contador + 1);
}
En muchos casos, TypeScript puede inferir automáticamente el tipo, por lo que no es necesario escribirlo siempre. Para eventos de formularios, conviene utilizar tipos como React.ChangeEvent<HTMLInputElement> cuando corresponda.
5. Evitar el uso excesivo de any
El tipo any desactiva gran parte de la comprobación de tipos. Es preferible utilizar tipos concretos, unknown cuando el dato sea desconocido o uniones como string | number cuando se permitan varios tipos.
Además, conviene ejecutar npx tsc --noEmit para comprobar los tipos sin generar archivos JavaScript.
Usar TypeScript correctamente en React y Next.js consiste en definir tipos claros, validar las propiedades de los componentes, tipar los datos externos y evitar el uso innecesario de any. Estas prácticas permiten crear aplicaciones más seguras, mantenibles y fáciles de ampliar, especialmente cuando el proyecto crece y participan varios desarrolladores.
