Como verificar se dado é null ou undefined com TypeScript

Neste artigo você vai aprender a como verificar se dado é null ou undefined com TypeScript, vem conferir como é simples!

Fala programador(a), beleza? Bora aprender mais sobre TypeScript!

TypeScript é uma linguagem de programação que oferece uma série de recursos para ajudar os desenvolvedores a escrever código mais seguro e eficiente.

Uma das principais vantagens do TypeScript é a capacidade de detectar erros em tempo de compilação, o que pode ajudar a evitar bugs e melhorar a qualidade do código.

Neste artigo, vamos explorar como verificar se um dado é null ou undefined com TypeScript.

Em TypeScript, podemos verificar se um dado é null ou undefined usando o operador “===” para compará-lo com null ou undefined.

Aqui está um exemplo de como fazer isso:

let myVar: string | null | undefined;

if (myVar === null) {
  console.log("myVar é null");
} else if (myVar === undefined) {
  console.log("myVar é undefined");
} else {
  console.log("myVar é uma string");
}

Neste exemplo, declaramos uma variável myVar que pode ser uma string, null ou undefined.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Usando o operador “===” e uma estrutura condicional, verificamos se myVar é null ou undefined e imprimimos uma mensagem correspondente.

É importante observar que, ao trabalhar com tipos opcionais em TypeScript, é necessário usar o operador “?” para garantir que a variável não seja indefinida.

Aqui está um exemplo:

let myVar: string | null | undefined;

if (myVar?.length) {
  console.log("myVar tem comprimento");
} else {
  console.log("myVar é null ou undefined");
}

Neste exemplo, usamos o operador “?” para verificar se myVar tem um comprimento definido.

Se myVar for null ou undefined, a expressão será avaliada como falso e a mensagem “myVar é null ou undefined” será impressa.

Em resumo, verificar se um dado é null ou undefined com TypeScript é uma tarefa simples que pode ser realizada usando o operador “===” e o operador “?”.

Isso pode ajudar a evitar bugs e melhorar a qualidade do código, permitindo que os desenvolvedores identifiquem facilmente dados indefinidos e nulos em seu código.

Com essas técnicas, os desenvolvedores podem criar aplicativos TypeScript mais seguros e eficientes.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em conclusão, verificar se um dado é null ou undefined é uma tarefa importante ao desenvolver aplicativos com TypeScript, pois pode ajudar a evitar erros e melhorar a qualidade do código.

Ao usar o operador “===” e o operador “?”, os desenvolvedores podem verificar facilmente se uma variável é nula ou indefinida e agir de acordo.

Ao trabalhar com tipos opcionais em TypeScript, é importante ter em mente que o operador “?” deve ser usado para garantir que a variável não seja indefinida antes de acessar seus atributos ou propriedades.

Essa é uma das principais vantagens do TypeScript, pois ajuda a evitar erros comuns de runtime.

Verificar se um dado é null ou undefined pode ajudar os desenvolvedores a criar aplicativos TypeScript mais seguros e eficientes, permitindo a identificação fácil de dados indefinidos ou nulos em seu código.

Com as técnicas apresentadas neste artigo, os desenvolvedores podem aprimorar a qualidade e a segurança de seus aplicativos TypeScript e fornecer uma melhor experiência aos usuários.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

<h2>Verificando null e undefined ao mesmo tempo:</h2> <p>Muitas vezes você não quer separar os dois casos, só quer saber se a variável tem algum valor de verdade</p> <p>Aí entra um truque bem conhecido do TypeScript e do JavaScript: usar o operador de igualdade solta ("!=") contra null</p> <pre><code>let myVar: string | null | undefined;

if (myVar != null) { console.log("myVar tem um valor"); } else { console.log("myVar é null ou undefined"); }</code></pre> <p>Se liga no detalhe: com "!=" (dois iguais, não três) o TypeScript trata null e undefined como equivalentes</p> <p>Então essa única checagem cobre os dois de uma vez, sem precisar de dois if</p> <p>É o jeito mais enxuto quando o que importa é só "tem valor ou não tem?"</p>

<h2>Definindo um valor padrão quando for null ou undefined:</h2> <p>Detectar o null ou undefined é metade do trabalho</p> <p>Na prática, quase sempre você quer cair num valor padrão quando o dado não veio</p> <p>Pra isso o TypeScript tem o operador de coalescência nula, o "??"</p> <pre><code>let nome: string | null | undefined;

const nomeFinal = nome ?? "Visitante";

console.log(nomeFinal); // "Visitante" se nome for null ou undefined</code></pre> <p>O "??" só usa o valor da direita quando o da esquerda é null ou undefined</p> <p>E aqui mora uma pegadinha clássica: diferente do "||", ele NÃO troca por valores como 0 ou string vazia</p> <p>Ou seja, um 0 legítimo continua sendo 0, e não vira o padrão à toa</p> <p>Combina muito bem com o optional chaining que vimos acima, tipo <code>usuario?.nome ?? "Visitante"</code></p>

<h2>Qual a diferença entre null e undefined?</h2> <p>Antes de sair verificando, vale entender que os dois não são a mesma coisa</p> <p>undefined é a ausência "automática": uma variável declarada e nunca atribuída já nasce undefined</p> <p>null é a ausência "intencional": você mesmo coloca ali pra dizer "aqui não tem valor de propósito"</p> <pre><code>let a: string | undefined; console.log(a); // undefined (ninguém atribuiu nada)

let b: string | null = null; console.log(b); // null (a ausência foi de propósito)</code></pre> <p>Na hora de checar, isso muda a estratégia</p> <p>Se você quer tratar os dois casos igual, o "!= null" resolve numa linha só</p> <p>Se precisa reagir diferente pra cada um, aí sim separa com "===" como mostramos lá no começo</p>