Principales errores de desarrolladores TypeScript principiantes: nivel avanzado

Principales errores de desarrolladores TypeScript principiantes: nivel avanzado

TypeScript es una herramienta poderosa que ayuda a escribir código más seguro y predecible. Sin embargo, la transición de JavaScript a TypeScript, especialmente a nivel avanzado, a menudo viene acompañada de errores específicos. Incluso los desarrolladores familiarizados con los fundamentos de la tipificación cometen errores típicos al trabajar con genéricos, tipos condicionales y sobrecargas. En este artículo, analizaremos los 4 errores más comunes de los novatos avanzados y mostraremos cómo corregirlos.

1. Uso incorrecto de Genéricos: pérdida de información de tipo

Uno de los errores más comunes es declarar genéricos demasiado amplios o, por el contrario, demasiado restrictivos. Los desarrolladores suelen especificar el tipo any dentro de una función genérica, anulando por completo las ventajas de TypeScript.

Problema

// Mal: la función devuelve any, perdemos la tipificaciónfunction getProperty(obj: any, key: string): any {    return obj[key];}

const user = { name: 'Alice', age: 30 };const value = getProperty(user, 'name'); // value: any

Solución

// Bien: usamos genéricos para conservar el tipofunction getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {    return obj[key];}

const user = { name: 'Alice', age: 30 };const value = getProperty(user, 'name'); // value: string

Importante: use siempre restricciones extends para los genéricos. Esto no solo conserva los tipos, sino que también proporciona autocompletado en el IDE.

2. Abuso del tipo any en lugar de unknown

Muchos desarrolladores principiantes colocan any en todas partes donde no pueden determinar el tipo de inmediato. Esto anula todo el beneficio de TypeScript. El enfoque correcto es usar unknown y luego reducir el tipo.

Problema

// Mal: any permite hacer cualquier cosafunction parseData(data: any): void {    console.log(data.toUpperCase()); // Error en tiempo de ejecución si data es un número    data.someMethod(); // Sin ninguna verificación}

Solución

// Bien: unknown requiere verificaciónfunction parseData(data: unknown): void {    if (typeof data === 'string') {        console.log(data.toUpperCase()); // Seguro    } else if (Array.isArray(data)) {        console.log(data.length);    } else {        console.log('Tipo de dato desconocido');    }}

Use any solo en casos extremos (migración desde JS o trabajo con APIs dinámicas). Para todo lo demás, use unknown con guards de tipo.

3. Errores en la sobrecarga de funciones (Function Overloads)

La sobrecarga de funciones en TypeScript es un mecanismo potente pero engañoso. El error típico: orden incorrecto de las firmas o falta de correspondencia entre la implementación y las sobrecargas declaradas.

Problema

// Mal: las firmas se contradicen entre sífunction process(value: string): string;function process(value: number): number;function process(value: string | number): string | number {    // La implementación no cubre todos los casos    return value.toString(); // Devolvemos string, aunque prometimos number para number}

Solución

// Bien: separación clara de la lógicafunction process(value: string): string;function process(value: number): number;function process(value: string | number): string | number {    if (typeof value === 'string') {        return value.toUpperCase(); // Devolvemos string    } else {        return value * 2; // Devolvemos number    }}

const result1 = process('hello'); // stringconst result2 = process(10);      // number

Consejo: verifique siempre que la implementación de la función cubra todas las variantes declaradas en las firmas. Use typeof o guards de tipo personalizados.

4. Ignorar los modos estrictos del compilador