Lección 88 — Type Assertions

🧠 Concepto

Las type assertions (aserciones de tipo) son una forma de decirle al compilador: “confía en mí, sé qué tipo es esto”. No transforman el valor en runtime, solo afectan al análisis de tipos de TypeScript.

Sintaxis

Dos formas equivalentes:

// Sintaxis "as" (recomendada, especialmente con JSX)
const input = document.getElementById('email') as HTMLInputElement;

// Sintaxis con ángulos (no usar en archivos .tsx)
const input = <HTMLInputElement>document.getElementById('email');

¿Cuándo usarlas?

1. Manipulación del DOM: cuando sabes que un elemento es de un tipo específico.
2. Datos de APIs externas: cuando confías en la forma de los datos más que TS.
3. Conversión entre tipos relacionados: cuando un tipo es un subtipo de otro.

// DOM
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;  // non-null assertion

// API externa
const respuesta = await fetch('/api/data');
const datos = await respuesta.json() as { id: number; nombre: string }[];

Non-null assertion (!)

El operador ! (non-null assertion) le dice a TS que un valor no es ni null ni undefined:

let elemento = document.getElementById('header')!;
// elemento tiene tipo HTMLElement (no HTMLElement | null)

function longitud(texto?: string): number {
  return texto!.length;  // confiamos en que no es undefined
}

💻 Ejemplo

// Assertion con DOM
const formulario = document.querySelector('form')!;
const emailInput = formulario.querySelector('#email') as HTMLInputElement;
emailInput.value = 'usuario@mail.com';

// Assertion para datos externos
interface ProductoAPI {
  id: number;
  nombre: string;
  precio: number;
}

async function obtenerProductos(): Promise<ProductoAPI[]> {
  const res = await fetch('/api/productos');
  const data = await res.json() as ProductoAPI[];
  return data;
}

// Doble assertion (solo cuando sea necesario)
type Boton = 'guardar' | 'cancelar' | 'eliminar';
const boton = 'guardar';

// Primer assertion a string, luego a Boton
const botonTipado = boton as string as Boton;

// Non-null assertion
function primeraLetra(texto: string | null | undefined): string {
  return texto!.charAt(0); // confiamos en que no es null/undefined
}

// Cuidado con esto:
let valor: any = 'texto';
let longitud = (valor as string).length; // ✅ si realmente es string

📝 Ejercicio

Crea una función obtenerValorInput(id: string): string que:

1. Use document.getElementById(id) con non-null assertion (!).
2. Use type assertion para convertirlo a HTMLInputElement.
3. Retorne input.value.

Si no tienes un DOM disponible (Node.js), simula el comportamiento con un objeto que tenga la misma forma y usa assertions para tiparlo.

⚠️ Nota

Las type assertions no son conversiones de tipo en runtime. as string no convierte un número a string; solo le dice a TS que confíe en que es string. Si te equivocas, el error aparecerá en runtime.

🎯 Tip

Evita el abuso de any con assertions. Si ves as any en tu código, pregúntate si puedes usar unknown y type narrowing en su lugar. Cuantas menos aserciones uses, más seguro será tu código.