Union Type e Type Alias

Union Type e Type Alias

Olá leitor, seja bem vindo a mais uma lição da jornada do Typescript 😉

Hoje nós iremos aprender sobre o Union Type e Type Alias, dois tipos de funcionalidades que são exclusivas do Typescript, e que (infelizmente ou felizmente) não pode ser reproduzidas no Javascript.

Apesar disso, nós já vimos o Union Type em aulas passadas, a diferença é que usei outros termos para me referir a ele 😅

Vamos nessa?

O que é o Union Type?

O Union Type também conhecido como Tipo União, é um tipo exclusivo do Typescript, que surgiu como uma alternativa ao any.

Graças a ele, nós podemos combinar diferentes tipos de dados em uma única entidade, o que se torna bastante útil quando uma variável, parâmetro ou retorno de função pode ter mais de um tipo possível.

"Mas espera... o Any já não faz isso?".

Sim, mas no caso do any quando você o declara, a sua variável pode receber diversos tipos de dados, já no caso do Union Type, você pode definir que tal variável só aceite alguns tipos de dados.

Se lembrou da sintaxe? (Sim, já vimos sobre Union Type em aulas passadas):

let variavel: number | string = "Micilini";

variavel = 76;
variavel = "Olá Mundo!"
variavel = 78.987;

Note que usamos a barra em pé (|)  para definir os tipos de dados que aquela variável aceita - naquele caso estamos permitindo o uso de number e string -.

Diferente do any, quando o declaramos, a sua variável pode trabalhar com todos os outros tipos:

let variavelAny: any = "Micilini";

variavelAny = 21;
variavelAny = true;

Conseguiu captar a diferença?

Você também pode definir mais de dois tipos de dados que são aceitos, para isso basta continuar separando os tipos usando a barra em pé, observe:

let variavelDois: number | string | boolean = "Micilini";

A mesma estratégia funciona com variáveis temporárias que definimos dentro das nossas funções:

function mostraIdade(idade: string | number){
 console.log('Sua idade é: ' + idade);
}

mostraIdade("25");
mostraIdade("12");

Lembrando que você pode escrever uma Union Type usando a sintaxe mais antiga reconhecida pelo Typescript:

const array: Array<number | string> = [22, "Roll", "Mic", "Linth", 980];

Além disso, o retorno das funções também podem usufruir do Union Type:

function retorno(idade: number | string): number | string{
 if(idade === 25){
 return 25;
 }
 //Se não é número é string, então:
 return "25";
}

let dado: number | string = retorno(25);
dado = retorno("25");

Na função acima, criamos uma função chamada retorno que recebe uma idade (que pode ser number ou string) e retorna um number ou string.

Union Type com condicionais

No caso desses tipos de dados, você também pode aplicar validações condicionais de modo a fazer com que a sua aplicação siga por rumos diferentes dependendo do tipo de dado que esta armazenado dentro da variável.

Vamos ver como isso funciona na prática:

function mostraIdade(idade: number | string){
 if(typeof idade === "string"){
 return "A idade precisa estar no formato NUMBER!"
 }

 return "A idade é: " + idade;
}

console.log(mostraIdade("25"));
console.log(mostraIdade(25));

Observe que estamos usando o typeof do Javascript para verificar o tipo de dado que está sendo armazenado dentro da variável idade.

Se for do tipo number, ele retorna uma mensagem informando a idade. Se for do tipo string ele retorna uma mensagem de erro.

o que é Type Alias?

No Typescript, temos o Type Alias, que nada mais é do que uma maneira de criar um nome alternativo para um tipo existente ou para combinações de tipos.

Isso permite que você dê um nome mais descritivo e fácil de usar a tipos complexos, promovendo reutilização, legibilidade e manutenção do código.

Basicamente, quando nós temos um Union Type que pode receber mais de um tipo específico:

let variavelDois: number | string | boolean = "Micilini";

Vemos que a expressão de declaração fica um pouco grande (number | string | boolean), agora imagina fazer isso sempre?

"Entendo... mas será que não existe uma maneira mais fácil de abstrair essas declarações para dentro de algum armazenador, de modo a chamarmos ele em vez de declarar essa sintaxe gigantesca?"

É exatamente isso que o Type Alias resolve! 🤩

Para usá-lo é bem simples, primeiro você precisa definir uma variável com type, e em seguida definir que tipo de dado primitivo ela deve armazenar:

type meuTipo = string;

Após isso basta definir o tipo que você acabou de criar dentro do tipo de uma outra variável:

let meuNome: meuTipo = "Micilini Roll";

No fim das contas, é como se tivéssemos feito isso aqui:

let meuNome: string = "Micilini Roll";

Ou seja, a variável meuNome ainda continua armazenando o tipo string.

Vamos ver um outro exemplo:

type ID = number;

let userId: ID = 123;

//Podemos continuar trocando seus valores normalmente
userId = 12;

function mostraId(userId: ID){
 return "Meu ID é: " + userId;
}

console.log(mostraId(33));

Observe agora como fica mais fácil quando temos um Union Type:

type valores = number | string | boolean;

let minhaVariavel: valores = 5;

minhaVariavel = "Rolls";
minhaVariavel = true;

Antes de finalizar, vamos ver o retorno de uma função usando Type Alias:

type valores = number | string | boolean;

let minhaVariavel: valores = 5;

function retornoDois(idade: number | string): valores{
 if(idade === 25){
 return 25;
 }
 //Se não é número é string, então:
 return "25";
}

let dadoDois: valores = retorno(25);
dado = retorno("25");

Ficou mais clean agora, não?

Só não se esqueça de definir nomes descritívos aos seus types, ok?

Lembrando que podemos declarar quantos tipos de types nós quisermos dentro da nossa aplicação 😌

Definindo Type Alias como um objeto

Também é possível definir um Type Alias como um objeto, observe como isso pode ser feito:

type tipoPessoa = {
 nome: string,
 idade: number
}

const dadosPessoa: tipoPessoa = {
 nome: "Micilini Roll",
 idade: 23
}

Lembrando que como o tipoPessoa requer nome e idade, se torna impossível a variável dadosPessoa armazenar um outro valor, por exemplo, um telefone:

type tipoPessoa = {
 nome: string,
 idade: number
}
 
const dadosPessoa: tipoPessoa = {
 nome: "Micilini Roll",
 idade: 23,
 telefone: 123,//Isso gera erros de compilação, ao menos que você adicione a chave telefone na declarado do type alias acima
}

Caso desejar, você pode definir uma chave opcional, bastando informar o ponto de interrogação (?) logo após o nome da variável, por exemplo:

type tipoPessoa = {
 nome: string,
 idade?: number//A declaração de idade não se torna obrigatoria para quem implementa esse type alias
}

const dadosPessoa: tipoPessoa = {
 nome: "Micilini Roll",//Não foi necessário implementar a chave 'idade'
}

Esse método que utilizamos acima é muito similar às interfaces do Typescript, que veremos na próxima lição 😊

Arquivos da lição

Os arquivos desta lição podem ser encontrados no repositório do GitHub por meio deste link.

Conclusão

Netsa lição você aprendeu dois conceitos super importantes que só existem no Typescript, que são:

Até a próxima 😉