Error TypeScript TS2533: cómo eliminarla y qué hay debajo del capó

Introducción: ¿por qué TypeScript grita sin motivo?

Estás escribiendo código en TypeScript, todo parece lógico, pero de repente el compilador muestra: "error TS2533: Object is possibly 'null' or 'undefined'". ¿Te suena? Este error es uno de los "escollos" más comunes para los principiantes. Según datos de Stack Overflow, la pregunta sobre cómo suprimirlo ha acumulado más de 100 000 visitas y se ha convertido en un clásico.

Pero miremos más a fondo. TypeScript no es solo "JavaScript estricto". Su sistema de tipos, especialmente el modo strictNullChecks, te obliga a manejar explícitamente los casos en que un valor puede ser null o undefined. Y esto no es un error, sino una característica. El error TS2533 es una protección contra errores en tiempo de ejecución que en JavaScript a menudo provocan Cannot read property of null.

En este artículo analizaremos:

\n
• Qué es strictNullChecks y cómo funciona "bajo el capó"
\n
• Por qué ocurre el error TS2533
\n
• 5 formas de suprimirlo (desde simples hasta avanzadas)
\n
• Cuándo cada forma es adecuada y cuándo no
\n

¡Vamos a resolver el error null de TypeScript de una vez por todas!

Cómo funciona strictNullChecks bajo el capó

Por defecto en TypeScript (desde la versión 2.0), la opción strictNullChecks está activada. ¿Qué significa esto? Antes, null y undefined se consideraban subtipos de cualquier tipo. Es decir, podías asignar null a una variable de tipo string y TypeScript no decía nada. Esto simplificaba el código, pero generaba errores.

En el modo strictNullChecks, los tipos null y undefined son entidades separadas. Una variable de tipo string solo puede contener una cadena. Si quieres permitir null, debes indicarlo explícitamente como string | null.

Ejemplo: cómo se ve el error

// Ejemplo 1: error clásico TS2533\ninterface User {\n  name: string;\n  email?: string; // opcional — puede ser undefined\n}\n\nfunction getUserEmail(user: User): string {\n  // Error TS2533: Object is possibly 'undefined'\n  return user.email.toUpperCase(); \n}\n\n// Ejemplo 2: trabajo con DOM\nconst button = document.querySelector('button');\n// Error TS2533: Object is possibly 'null'\nbutton.addEventListener('click', () => console.log('clicked'));\n

En el segundo ejemplo, document.querySelector puede devolver null si no se encuentra el elemento. TypeScript advierte: "Oye, ¿estás seguro de que el botón existe?"

5 formas de suprimir el error TS2533

Ahora pasemos a lo más importante: cómo eliminar el error. A continuación, 5 métodos probados, desde simples hasta avanzados. Elige según la situación.

1. Operador de aserción no nula (!)

La forma más rápida es colocar un signo de exclamación ! después de la expresión. Esto le dice a TypeScript: "Sé que esto no es null, confía en mí".

// Usamos ! para suprimir\nconst button = document.querySelector('button')!;\nbutton.addEventListener('click', () => console.log('clicked'));\n\n// Para una propiedad opcional\nfunction getUserEmail(user: User): string {\n  return user.email!.toUpperCase();\n}\n

Cuándo usarlo: cuando estás absolutamente seguro de que el valor no es null. Por ejemplo, si acabas de verificar la existencia de un elemento en el DOM. Pero ten cuidado: si te equivocas, obtendrás un error en tiempo de ejecución.

2. Optional chaining (?.) y nullish coalescing (??)

Una forma moderna y segura. El operador ?. permite acceder a una propiedad solo si el objeto no es null/undefined. Y ?? establece un valor por defecto.

function getUserEmail(user: User): string {\n  // Si email es undefined — devolvemos una cadena vacía\n  return user.email?.toUpperCase() ?? '';\n}\n\n// Trabajo con DOM\ndocument.querySelector('butt