Los 5 errores comunes de los principiantes en TypeScript (y cómo evitarlos)

TypeScript es una herramienta poderosa que hace que el desarrollo en JavaScript sea más seguro y mantenible gracias a su sistema de tipado estático. Sin embargo, los principiantes suelen caer en errores que pueden complicar su código o anular los beneficios de TypeScript. En este artículo, exploraremos 5 errores comunes y cómo evitarlos con ejemplos concretos.

1. Usar any en Exceso

El Problema:

El uso excesivo de any omite el tipado estático de TypeScript, lo que equivale a programar en JavaScript clásico. Esto puede ocultar errores y dificultar el mantenimiento del código.

Ejemplo de Error:

function addition(a: any, b: any) {
  return a + b; // Puede producir comportamientos inesperados
}

console.log(addition("1", 2)); // Resultado: "12"

La Solución:

Usa tipos explícitos o genéricos cuando sea necesario.

Ejemplo Corregido:

function addition(a: number, b: number): number {
  return a + b;
}

console.log(addition(1, 2)); // Resultado: 3

2. Tipado Incorrecto de Objetos

El Problema:

Muchos principiantes olvidan definir correctamente las estructuras de los objetos o utilizan un tipado demasiado permisivo.

Ejemplo de Error:

const usuario: object = { nombre: "Alice", edad: 25 };
// Error si intentamos usuario.nombre, ya que TypeScript no reconoce las propiedades del objeto.

La Solución:

Define interfaces o tipos para describir tus objetos con precisión.

Ejemplo Corregido:

interface Usuario {
  nombre: string;
  edad: number;
}

const usuario: Usuario = { nombre: "Alice", edad: 25 };
console.log(usuario.nombre); // Resultado: "Alice"

3. Sobrecargar los Tipos

El Problema:

Intentar combinar demasiados tipos o agregar restricciones innecesarias puede hacer que el código sea difícil de leer y mantener.

Ejemplo de Error:

type Cuenta = { id: number; email: string } | { id: number; username: string };

const usuario: Cuenta = { id: 1, email: "[email protected]", username: "test" };
// Error potencial: el tipo no sabe qué propiedad usar.

La Solución:

Simplifica los tipos complejos o utiliza discriminantes para aclarar tus intenciones.

Ejemplo Corregido con un Discriminante:

type CuentaEmail = { tipo: "email"; id: number; email: string };
type CuentaUsername = { tipo: "username"; id: number; username: string };

type Cuenta = CuentaEmail | CuentaUsername;

const usuario: Cuenta = { tipo: "email", id: 1, email: "[email protected]" };

4. Ignorar las Opciones de Configuración de TypeScript

El Problema:

Muchos principiantes no configuran correctamente el archivo tsconfig.json, lo que puede ocultar errores potenciales.

Ejemplo Común:

Un proyecto sin opciones estrictas activadas:

{
  "compilerOptions": {
    "strict": false}
}

Esto permite comportamientos imprecisos, como no verificar si las propiedades existen.

La Solución:

Activa las opciones estrictas para aprovechar al máximo TypeScript.

Configuración Recomendada:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true}
}

5. Confundir Tipos e Interfaces

El Problema:

Los principiantes suelen tener dificultades para elegir entre type e interface. Aunque son similares, tienen casos de uso específicos.

Ejemplo de Error:

type Usuario = { nombre: string };
type Admin = Usuario & { permisos: string[] };

interface Usuario { nombre: string; }
interface Admin extends Usuario { permisos: string[]; }

// Mezcla innecesaria de enfoques.

La Solución:

Usa interface para objetos o cuando se requiera herencia. Usa type para combinaciones complejas o uniones.

Ejemplo Corregido:

interface Usuario {
  nombre: string;
}

interface Admin extends Usuario {
  permisos: string[];
}

const admin: Admin = { nombre: "Alice", permisos: ["leer", "escribir"] };

Bonus: Configurar un Proyecto React/Next.js con TypeScript

Paso 1: Crear un Proyecto

Para React:

npx create-react-app mi-proyecto --template typescript

Para Next.js:

npx create-next-app@latest mi-proyecto --typescript

Paso 2: Verificar tsconfig.json

Next.js genera automáticamente un archivo tsconfig.json con opciones adecuadas. Asegúrate de que las siguientes configuraciones estén activadas:

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/utils/*": ["utils/*"]
    }
  }
}

Paso 3: Agregar Tipos Globales

Para evitar repetir los mismos tipos, crea un archivo types/global.d.ts:

declare module "*.css";
declare module "*.png";

Paso 4: Usar Props Tipados

Tipado para un componente React:

interface Props {
  titulo: string;
  edad?: number; // Opcional
}

const MiComponente: React.FC<Props> = ({ titulo, edad }) => (
  <div>
    <h1>{titulo}</h1>
    {edad && <p>Edad: {edad}</p>}
  </div>
);

Conclusión

TypeScript es una herramienta fantástica, pero como cualquier herramienta, requiere aprendizaje para evitar errores comunes. Siguiendo estos consejos, puedes evitar problemas frecuentes y aprovechar al máximo el poder de TypeScript. ¿Listo para escribir código más seguro?