Extensión imprescindible: Pretty TypeScript Errors

Cuando empiezas a trabajar en serio con TypeScript, llega un momento en el que los errores dejan de ser “un mensajito” y pasan a ser un conjuro en latín: largos, con tipos anidados y difíciles de leer. La buena noticia es que hay una extensión que te cambia la vida.

El problema: errores que dan auténtico miedo

Seguro que te ha pasado: pasas el ratón por encima del error y aparece una cadena enorme que no se entiende. El resultado es el clásico:

• No sabes qué tipo esperabas
• No sabes qué te falta
• No sabes dónde mirar primero

Y pierdes tiempo en “traducir” el error en vez de arreglarlo.

La solución: Pretty TypeScript Errors

La extensión se llama Pretty TypeScript Errors (en el marketplace aparece como Pretty TypeScript Errors de Yoav Bls).

Lo que hace es simple y brutal: reformatea y presenta el error de TypeScript de forma visual, resaltando lo importante y separando la información para que entiendas rápido qué está pasando.

Ojo: instala la buena. Hay extensiones con nombres parecidos, así que fíjate bien en que sea la de Yoav Bls (la que tiene millones de descargas) y no un clon random con pinta sospechosa.

Qué ganas con esto

Con la extensión activada, en vez de ver un ladrillo de texto, TypeScript te lo canta mucho más claro:

• “Este tipo no es asignable a este otro”
• “Falta la propiedad birthDate”
• “Esta property es la que rompe todo”

Pasas de “¿qué?” a “ah vale” en 2 segundos.

Mini repaso TypeScript: Index Signatures para objetos dinámicos

En el vídeo también se repasa un caso muy típico: cuando tienes un objeto cuyas claves no conoces de antemano (tipo diccionario). Por ejemplo, un diccionario con frutas, traducciones, etc.

Si no sabes si las claves serán "apple", "banana", "cherry" o cualquier otra, no puedes tiparlo con propiedades fijas. Aquí entra la index signature:

type Dictionary = {
  [key: string]: string
}

Esto significa:

• Las claves son string
• Los valores son string
• Puedes añadir tantas claves como quieras sin romper el tipado

Ejemplo de uso:

const translations: Dictionary = {
  hello: 'hola',
  goodbye: 'adiós',
  thanks: 'gracias',
}

Cuándo tiene sentido usarlo

• Objetos realmente dinámicos (diccionarios)
• Mapas de traducciones (por ejemplo translations[locale])
• Cualquier estructura donde “las keys van cambiando”

Y recuerda: si sí conoces las claves, entonces mejor tiparlas explícitamente.

Resumen

• Pretty TypeScript Errors reformatea los errores para que los entiendas de un vistazo.
• Las index signatures ([key: string]: tipo) sirven para objetos con claves dinámicas.
• Úsalas solo cuando las claves sean realmente desconocidas — si las conoces, tipa explícitamente.