Solución: Type is not assignable to type en TypeScript

¿Por qué ocurre?

TypeScript compara el tipo del valor que asignas con el tipo que se declara (o infiere) para esa variable, prop o parámetro. Si no coinciden estructuralmente, bloquea la compilación. Las causas más frecuentes son: olvidar manejar el caso `undefined`/`null`, pasar un subtipo donde se espera el tipo base, o usar tipos demasiado amplios (any, unknown) sin acotar.

Solución paso a paso

Caso 1 — Posible undefined no contemplado:

// ❌ getElementById puede devolver null
const input = document.getElementById('nombre');
input.value = 'test'; // Error: 'input' is possibly 'null'
// ✅ Opción A: non-null assertion (cuando estás seguro)
const input = document.getElementById('nombre')!;
input.value = 'test';// ✅ Opción B: comprobación en tiempo de ejecución (más seguro)
const input = document.getElementById('nombre');
if (input instanceof HTMLInputElement) {
  input.value = 'test';
}

Caso 2 — Tipo incompleto en un objeto:

interface Usuario {
  nombre: string;
  edad: number;
  email: string;
}
// ❌ Falta la propiedad 'email'
const u: Usuario = { nombre: 'Ana', edad: 30 };
// Error: Property 'email' is missing
// ✅ Añade la propiedad que falta
const u: Usuario = { nombre: 'Ana', edad: 30, email: 'ana@test.com' };// ✅ O usa Partial si realmente puede estar incompleto
const u: Partial = { nombre: 'Ana', edad: 30 };

Caso 3 — Tipos de unión no contemplados:

function procesar(valor: string | number) {
  // ❌ .toUpperCase() no existe en number
  return valor.toUpperCase(); // Error  // ✅ Comprueba el tipo antes
  if (typeof valor === 'string') return valor.toUpperCase();
  return valor.toString().toUpperCase();
}

Caso 4 — Props de componente React con tipos estrictos:

interface Props {
  onClick: () => void;
}
// ❌ El handler recibe un evento, no devuelve void directamente
 { /* ... */ }} />
// Error: Type '(e: MouseEvent) => void' is not assignable to '() => void'// ✅ Ajusta el tipo de la prop
interface Props {
  onClick: (e: React.MouseEvent) => void;
}

Usar as como último recurso:

// Solo cuando sabes con certeza que el tipo es correcto
// y TypeScript no puede inferirlo
const input = document.getElementById('nombre') as HTMLInputElement;// ❌ Nunca uses 'as any' para silenciar errores que deberías resolver
const dato = respuestaApi as any; // estás desactivando TypeScript

Cómo evitarlo en el futuro

Activa `strict: true` en tsconfig.json desde el inicio del proyecto para detectar estos errores temprano. Evita `any` — si necesitas una válvula de escape, usa `unknown` y haz type guards. Los errores de tipos son bugs reales que TypeScript te está evitando.