Como verificar null e undefined em TypeScript: armadilhas e melhores soluções

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Introdução: Por que "simplesmente if (value)" pode te enganar?

Todo desenvolvedor que migra de JavaScript para TypeScript, mais cedo ou mais tarde, se depara com a pergunta: "Is there a way to check for both null and undefined?". Essa pergunta acumulou milhares de visualizações no Stack Overflow — e não é à toa. À primeira vista, a tarefa parece trivial: escrever if (value != null) ou if (value). Mas o diabo, como sempre, está nos detalhes.

Neste artigo, vamos analisar os principais erros que iniciantes (e não só) cometem ao verificar null e undefined em TypeScript. Você aprenderá por que a comparação não estrita pode ser mais perigosa do que parece, como funciona o operador Nullish Coalescing (??) e quando usar guards de tipo personalizados. Vamos lá!

Erro nº1: Usar `if (!value)` para todos os valores falsy

O antipadrão mais comum é tentar verificar a existência de um valor usando a negação:

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

processInput(''); // ❌ Exibirá "Entrada ausente", embora a string seja vazia, mas NÃO null e NÃO undefined

O problema é que !value converte qualquer valor falsy em true. Em TypeScript (e JavaScript), são considerados falsy: false, 0, '' (string vazia), NaN, null, undefined. Se a sua lógica de negócio permite uma string vazia ou o número 0, esse código quebrará.

Como evitar: Use uma verificação estrita para null e undefined com === ou !==.

Erro nº2: Confiar cegamente em `value == null`

Muitos desenvolvedores sabem que value == null (com dois sinais de igual) verifica tanto null quanto undefined ao mesmo tempo. Isso realmente funciona:

// ✅ Funciona, mas...function check(value: string | null | undefined) {  if (value == null) {    console.log('value é null ou undefined');  }}

No entanto, a dupla igualdade em TypeScript é uma fonte de bugs não óbvios. Por exemplo, null == undefined é true, mas null == false é false. E quanto a '' == false? Também é true. A comparação não estrita pode se comportar de forma imprevisível, especialmente em condições complexas.

Como evitar: Em TypeScript, value == null é um padrão oficialmente permitido (o linter geralmente o aceita), mas para iniciantes é melhor seguir uma abordagem explícita: value === null || value === undefined.

Erro nº3: Ignorar `undefined` ao trabalhar com objetos

Às vezes, os desenvolvedores verificam apenas null, esquecendo-se do undefined:

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

function greet(user: User) {  if (user.age !== null) {    console.log(`Age: ${user.age}`);  }  // Se age não for passado (undefined), o código será executado!}

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

O campo age pode ser null, number ou undefined (se não for especificado na interface). Verificar apenas null permite que undefined passe despercebido.

Como evitar: Sempre verifique ambos os valores se o tipo permitir ambos. Ou use o operador Optional Chaining (?.) e o Nullish Coalescing (??).