Literal Types

O Typescript possui um recurso bastante interessante que nos permite colocar valores como tipos de dados.

E Isso não só ajuda a restringir o seu uso, pois a partir de agora não ficamos presos aos tipos, como também aos próprios valores.

Esse recurso é chamado de Literal Types e durante a sua jornada como desenvolvedor, você verá que este recurso é bastante utilizado com o Union Types.

Vamos nessa? 🙂

O que são Literal Types?

No Typescript, um Tipo Literal (tradução para Literal Types), refere-se a um recursos que permite especificar um tipo exato que uma variável poderá armazenar.

Isso significa dizer que, em vez de você declarar um tipo genérico, como uma string, number, boolean e etc, você pode definir exatamente quais valores que serão aceitos dentro de uma variável ou parâmetro.

Atualmente existem 3 tipos principais de Literal Types que podemos usar.

String Literal Types

Como o próprio nome já nos diz, é um tipo customizado na qual você especifica um valor do tipo string que uma variável pode conter, observe o exemplo abaixo:

let statusMode: 'success' | 'error';

statusMode = 'success';//Válido
statusMode = 'error';//Válido
statusMode = 'pending';//Inválido, pois 'pending' não esta na lista permitida

No código acima, nós criamos uma variável chamada statusMode, que inicialmente é do tipo string, mas que só pode armazenar dois tipos diferentes de strings que são: success e error.

A partir do momento em que o desenvolvedor tentar atribuir uma outra string diferente, como é o caso do 'pending', o Typescript não deixa, pois aquela string em especifico não esta na lista permitida.

É como se criassemos uma condicional na qual verificasse se o valor atribuído é success ou error, onde tudo o que for diferente disso, retorna um erro.

Para adicionar mais elementos a sua lista, basta seguir a lógica anterior por meio de uma barra em pé (|), observe:

let statusMode: 'success' | 'error' | 'pending' | 'waiting';

statusMode = 'success';//Válido
statusMode = 'error';//Válido
statusMode = 'pending';//Válido
statusMode = 'waiting';//Válido
statusMode = 'micilini';//Inválido, pois não esta na lista

Number Literal Types

Assim como as strings literais, a diferença é que aqui trabalhamos com valores númericos:

let statusCode: 200 | 404 | 500;

statusCode = 200; // válido
statusCode = 404; // válido
statusCode = 403; // inválido, pois 403 não está na lista permitida

Note que quando tentamos atribuir o número 403 à variável statusCode, o Typescript nos retorna um erro de compilação.

Boolean Literal Types

Assim como as strings e números literais, temos também o tipo booleano, observe:

let isLoading: true;

isLoading = true; // válido
isLoading = false; // inválido, pois só é permitido o valor true

let change: false;

change = true;//Inválido, pois só é permitido o valor false
change = false;//Válido

let all: true | false;

all = true;//Válido
all = false;//Válido

No exemplo acima, começamos declarando uma variável chamada isLoading que só aceita valores do tipo true.

Em seguida declaramos uma variável chamada change que só aceita valores do tipo false.

E por fim uma variável chamada all que aceita ambos os valores.

Literal Type com funções

Um outro exemplo muito interessante que eu gostaria de trazer aqui, é uma função que trabalha com Literal Types, e que recebe diversas direções:

function qualDirecao(direcao: "esquerda" | "direita" | "centro"){
 console.log('Vamos seguir pela ' + direcao);
}

qualDirecao("esquerda");//Válido
qualDirecao("cima");//Inválido, pois "cima" não esta na lista

Note que quando tentamos atribuir a string "cima", o Typescript gera um erro de compilação.

Arquivos da lição

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

Conclusão

Nesta lição você aprendeu um pouco mais sobre os tipos literais, e como você pode usá-los dentro da sua aplicação.

Até a próxima lição 😌