O que é um Type Guard. TypeScript Narrowing #1

Bom dia/noite/tarde, seja lá que hora for agora.

E bem-vindo! Bem-vindo ao primeiro artigo da nossa série de Narrowing em TypeScript.

Temos MUITO para aprender! Desde os fundamentos, até casos de uso avançados.

Nesta série, cobriremos:

1. O que é um type guard
2. O que é narrowing
3. Que problemas ele resolve
4. Operadores de type guard
5. Narrowing por igualdade
6. Narrowing por truthiness
7. Análise de fluxo de controle
8. Predicados Type
9. Type Guards personalizados
10. Criação de guards por exclusão
11. Uniões discriminados
12. Guards de asserção
13. Guards de ordem superior
14. Biblioteca narrowing

A essa altura, você provavelmente nem sabe do que eu estou falando.

E está tudo bem, vamos chegar lá. Mas primeiro, inscreva-se na newsletter para ter certeza de que você não perderá os próximos artigos.

Eu sou o Lucas Paganini, e neste website lançamos tutoriais de desenvolvimento web. Se você tem interesse nisso, inscreva-se na newsletter.

Vamos começar com os conceitos:

O que é Narrowing em TypeScript?

Narrowing (estreitamento) é o processo de refinar um tipo mais amplo para um mais específico.

Amplo → Específico string → "abc" number → 123 object → Date

Por exemplo, refinar uma string para abc, ou number para 123, assim por diante. Você tem um tipo mais amplo e o reduz a algo mais específico.

Por que precisamos narrowing?

E por que você faria isso? Bom, para lidar com os casos individualmente.

Se você tem uma variável que pode ser uma string, um número ou um booleano. Então você provavelmente deseja lidar com esses casos um por um.

Se for uma string, faça isso. Se for um número, faça aquilo. E se for um boolean, faça essa outra coisa. Isso é Narrowing.

const doSomething = (value: string | number | boolean) => {
  // Se for uma string, faça isso.
  // Se for um número, faça aquilo
  // Se for um boolean, faça essa outra coisa
};

const doSomething = (value: string | number | boolean) => {
  // Se for uma string, faça isso.
  // Se for um número, faça aquilo
  // Se for um boolean, faça essa outra coisa
};

Você tem um tipo mais amplo, que é a combinação de string, number e boolean. Daí você refina esse tipo mais amplo para apenas uma string, em seguida, para um número e, em seguida, para um booleano.

Para refinar os tipos, você pode usar type guards.

O que é um type guard?

Type guards são técnicas de estreitamento (narrowing), eles permitem que você realize o estreitamento.

"Lucas, vamos ser práticos. Como eles se parecem? Me mostre um type guard."

Ok, vou te mostrar. Só me aguenta por um minuto. Quero enfatizar duas coisas:

1. TypeScript é um superconjunto de JavaScript. Todo JavaScript é TypeScript válido;
2. TypeScript deseja ser o menos intrusivo possível. Ao invés de nos forçar a uma nova sintaxe, ele oferecerá suporte às maneiras idiomáticas de fazer as coisas em JavaScript. Quando possível!

Veja, narrowing não é um problema novo, já lidamos com isso em JavaScript há anos. Aposto que você estava pensando no operador typeof, enquanto eu dava o último exemplo.

O operador typeof nos permite refinar nossos tipos. Portanto, é um type guard.

// Se for uma string, faça isso
if (typeof value === 'string') { ... }

// Se for uma string, faça isso
if (typeof value === 'string') { ... }

E existem muitos outros type guards. Você também pode criar os seus próprios. Também temos assertion guards, que é outra maneira de realizar narrowing.

Conclusão

E neste primeiro artigo, vou parar por aqui. As referências estão abaixo.

Agora você conhece os conceitos de Narrowing em TypeScript. Mas não se acostume com isso, no próximo artigo vamos sujar as mãos e praticar esses conceitos.

Não tenho como enfatizar o suficiente a quantidade de tópicos que precisamos abordar. Tem muita coisa por vir.

E compartilhar isso com você em lições fáceis, cheias de exemplos e animações, dá muito trabalho. Então, vou desempenhar o papel do influencer chato, e carinhosamente te pedir que você dê like e compartilhe este artigo. Compartilhe com seus colegas. Compartilhe em grupos no Facebook. Compartilhe no reddit. Eu não sei haha. Mas ajude-nos a crescer, para continuarmos fazendo conteúdo premium como esse de graça.

Em breve lançaremos a segunda parte desta série de artigos, então inscreva-se para ser notificado quando isso acontecer.

Se sua empresa está procurando desenvolvedores web remotos, você pode entrar em contato comigo e com a minha equipe em lucaspaganini.com.

Tenha um ótimo dia e nos vemos em breve.

Referências

1. Narrowing Documentação do TypeScript