TypeScript enums são uma classe especial composta por variáveis constantes, cujo valor pode ser definido previamente. Ainda, enums podem ser numéricos ou baseados em strings.

O que são TypeScript enums?

enums (enumerated types) são tipos de dados contendo um conjunto finito de valores. Esse conjunto de valores é claramente definido durante a declaração de um enum (por meio de um identificador) e não pode ser alterado posteriormente. A ordem em que os valores aparecem também pode ser determinada previamente. Com TypeScript enums, você pode criar variáveis constantes que melhoram a legibilidade do seu código e, ao mesmo tempo, evitam erros. Essa é uma das poucas funcionalidades que não é uma extensão tipada estaticamente do JavaScript. Ela é dividida entre enums numéricos e baseados em strings na linguagem TypeScript**.

TypeScript enums numéricos

Em TypeScript enums numéricos, o primeiro valor é “0” por padrão. Em seguida, cada valor adicional é incrementado em “1”. O método é iniciado com o parâmetro enum e armazena strings no formato numérico. Em um exemplo simples, definimos os meses e atribuímos a eles um valor no primeiro passo. Em seguida, consultamos o valor definido para o mês de abril:

enum Meses {
Janeiro,
Fevereiro,
Marco,
Abril,
Maio,
Junho,
Julho,
Agosto,
Setembro,
Outubro,
Novembro,
Dezembro
}
 
let mesAtual = Meses.Abril;
console.log(mesAtual);
typescript

A saída será:

3
typescript

O sistema inicia a atribuição dos valores, por padrão, com “0”. Janeiro recebe o valor “0”, fevereiro o valor “1”, março o valor “2” e abril o valor “3”. Como isso não corresponde à numeração real dos meses, inicializamos os TypeScript enums e atribuímos a eles os valores corretos. Para isso, precisamos alterar o código anterior:

enum Meses {
Janeiro = 1,
Fevereiro,
Marco,
Abril,
Maio,
Junho,
Julho,
Agosto,
Setembro,
Outubro,
Novembro,
Dezembro
}
 
let mesAtual = Meses.Abril;
console.log(mesAtual);
typescript

Agora, a nossa saída será:

4
typescript

Basta atribuir o valor desejado apenas ao primeiro mês. O sistema então continuará a contagem de forma usual, incrementando um valor por vez.

Atribuir valores numéricos próprios

Se você quiser evitar a contagem automática, pode atribuir, a cada elemento de um enum, um valor numérico próprio. No exemplo a seguir, temos quatro volumes de uma série de livros e desejamos armazenar o número de páginas como um valor fixo. Em seguida, queremos exibir o número de páginas do segundo volume para verificação. O código é o seguinte:

enum NumeroDePaginas {
Volume1 = 491,
Volume2 = 406,
Volume3 = 360,
Volume4 = 301
}
 
let paginas = NumeroDePaginas.Volume2;
console.log(paginas);
typescript

Nossa saída será:

406
typescript

TypeScript enums baseados em strings

TypeScript enums baseados em strings funcionam de maneira bastante similar. A diferença é que você deve atribuir um valor em formato de string aos enums, em vez de um valor numérico. No exemplo a seguir, associamos os dias da semana à abreviação correspondente em formato de string, inserida entre aspas. Em seguida, consultamos os valores para “sexta-feira” e “terça-feira”, somente para verificação. O código é assim:

enum DiasDaSemana {
Segunda = "Seg",
Terca = "Ter",
Quarta = "Qua",
Quinta = "Qui",
Sexta = "Sex",
Sabado = "Sab",
Domingo = "Dom"
};
 
console.log(DiasDaSemana.Sexta);
console.log(DiasDaSemana.Terca);
typescript

A saída correspondente será:

Sex
Ter
typescript

Combinar números e strings

Em teoria, a linguagem TypeScript também permite combinar enums numéricos e baseados em strings. Embora os casos de uso para essa opção sejam limitados, apresentamos a seguir um exemplo justificável. Aqui, definimos diferentes valores. O processo permanece o mesmo:

enum DiasDaSemana {
Segunda = "Seg",
Terca = 2,
Quarta = 3,
Quinta = "Qui",
Sexta = "Sex",
Sabado = 6,
Domingo = "Dom"
};
 
console.log(DiasDaSemana.Sexta);
console.log(DiasDaSemana.Terca);
typescript

Nossa saída será a seguinte:

Sex
2
typescript

Reverse mapping para tipos de dados constantes

A lógica do reverse mapping (mapeamento reverso) afirma o seguinte: se você pode acessar o valor de um TypeScript enum, também pode acessar o respectivo nome. Para ilustrar o princípio, voltamos ao exemplo dos dias da semana:

enum DiasDaSemana {
Segunda = 1,
Terca,
Quarta,
Quinta,
Sexta,
Sabado,
Domingo
};
 
DiasDaSemana.Sexta
DiasDaSemana["Sexta"];
DiasDaSemana[6];
typescript

Aqui, DiasDaSemana.Sexta retorna o valor “6”. O mesmo vale para DiasDaSemana["Sexta"]. Entretanto, com o reverse mapping, DiasDaSemana[6] retornará o nome “Sexta”, como você pode observar:

enum DiasDaSemana {
Segunda = 1,
Terca,
Quarta,
Quinta,
Sexta,
Sabado,
Domingo
};
 
console.log(DiasDaSemana);
typescript

A saída será:

{
    '1': 'Segunda',
    '2': 'Terca',
    '3': 'Quarta',
    '4': 'Quinta',
    '5': 'Sexta',
    '6': 'Sabado',
    '7': 'Domingo',
    Segunda: 1,
    Terca: 2,
    Quarta: 3,
    Quinta: 4,
    Sexta: 5,
    Sabado: 6,
    Domingo: 7
}
typescript

Converter TypeScript enums em arrays

Também é possível converter enums em arrays TypeScript. No nosso exemplo de dias da semana, o código seria assim:

enum DiasDaSemana {
Segunda = "Seg",
Terca = "Ter",
Quarta = "Qua",
Quinta = "Qui",
Sexta = "Sex",
Sabado = "Sab",
Domingo = "Dom"
};
 
const diasDaSemanaArray: { label: string; value: string }[] = [];
 
for (const key in DiasDaSemana) {
    if (DiasDaSemana.hasOwnProperty(key)) {
        diasDaSemanaArray.push({ label: key, value: DiasDaSemana[key] });
    }
}
 
console.log(diasDaSemanaArray);
typescript

Isso resultará na seguinte saída:

[
    { label: 'Segunda', value: 'Seg' },
    { label: 'Terca', value: 'Ter' },
    { label: 'Quarta', value: 'Qua' },
    { label: 'Quinta', value: 'Qui' },
    { label: 'Sexta', value: 'Sex' },
    { label: 'Sabado', value: 'Sab' },
    { label: 'Domingo', value: 'Dom' }
]
typescript
Dica

Faça a implantação do seu site ou aplicação estático diretamente pelo GitHub: Com o Deploy Now da IONOS, você se beneficia de uma configuração rápida e facilitada, fluxos de trabalho otimizados e diversos modelos de tarifa. Encontre a solução que melhor se adapta ao seu projeto!

Este artigo foi útil?
Ir para o menu principal