Cómo verificar null y undefined en TypeScript: trampas y mejores soluciones

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción: ¿Por qué «simplemente if (value)» puede fallarte?

Cada desarrollador que migra de JavaScript a TypeScript, tarde o temprano se enfrenta a la pregunta: «Is there a way to check for both null and undefined?». Esta pregunta ha acumulado miles de visitas en Stack Overflow — y no sin razón. A primera vista, la tarea parece trivial: escribir if (value != null) o if (value). Pero el diablo, como siempre, está en los detalles.

En este artículo, analizaremos los principales errores que cometen los principiantes (y no solo) al verificar null y undefined en TypeScript. Aprenderás por qué la comparación no estricta puede ser más peligrosa de lo que parece, cómo funciona el operador Nullish Coalescing (??) y cuándo usar protecciones de tipo personalizadas. ¡Allá vamos!

Error n.º 1: Usar `if (!value)` para todos los valores falsy

El antipatrón más común es intentar verificar la existencia de un valor mediante la negación:

// ❌ Malofunction processInput(input: string | null | undefined) {  if (!input) {    console.log('Entrada ausente');    return;  }  console.log(input.toUpperCase());}

processInput(''); // ❌ Mostrará "Entrada ausente", aunque la cadena está vacía, pero NO es null NI undefined

El problema es que !value convierte cualquier valor falsy en true. En TypeScript (y JavaScript) se consideran falsy: false, 0, '' (cadena vacía), NaN, null, undefined. Si tu lógica de negocio permite una cadena vacía o el número 0, ese código se romperá.

Cómo evitarlo: Usa una verificación estricta de null y undefined con === o !==.

Error n.º 2: Confianza ciega en `value == null`

Muchos desarrolladores saben que value == null (doble igual) verifica tanto null como undefined al mismo tiempo. Esto realmente funciona:

// ✅ Funciona, pero...function check(value: string | null | undefined) {  if (value == null) {    console.log('value is null or undefined');  }}

Sin embargo, el doble igual en TypeScript es una fuente de errores no evidentes. Por ejemplo, null == undefined es true, pero null == false es false. ¿Y qué hay de '' == false? También es true. La comparación no estricta puede comportarse de manera impredecible, especialmente en condiciones complejas.

Cómo evitarlo: En TypeScript, value == null es un patrón oficialmente permitido (a menudo el linter lo acepta), pero para principiantes es mejor seguir un enfoque explícito: value === null || value === undefined.

Error n.º 3: Ignorar `undefined` al trabajar con objetos

A veces los desarrolladores solo verifican null, olvidándose de undefined:

// ❌ Peligrosointerface User {  name?: string;  age: number | null;}

function greet(user: User) {  if (user.age !== null) {    console.log(`Age: ${user.age}`);  }  // Si age no se pasa (undefined), ¡el código se ejecutará!}

greet({ name: 'Alice' }); // Mostrará "Age: undefined"

El campo age puede ser null, number o undefined (si no se especifica en la interfaz). Verificar solo null deja pasar undefined.

Cómo evitarlo: Siempre verifica ambos valores si el tipo lo permite. O usa el operador Optional Chaining (?.) y Nullish Coalescing (??).