TypeScript: Adicionando description em um Enum

Dando continuidade ao meu artigo anterior: TypeScript: Enums, hoje eu irei demonstrar como criar uma descrição para cada um dos elementos de um enum, e como recuperar essa descrição a partir de suas chaves. Para isso, eu irei utilizar o enum criado no artigo anterior de dias da Semana.

Caso você não tenha lido o artigo anterior, segue o enum mencionando abaixo:

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

Conforme demonstrei no artigo anterior, nós podemos pegar os valores de um enum pela sua chave ou pelo seu valor.

Agora pensando em um cenário mais próximo do nosso dia dia e focando no enum acima, não seria mais interessante retornar : “Segunda-feira” ou “Terça-feira” … etc ?

Em outras linguagens como C# nós podemos utilizar as descriptions dos enums, mas e no TS como fazer isso?

Existem algumas formas, uma delas é com a utilização de um map. A seguir você tem um exemplo de criação de um map para retornar os dias da semana conforme mencionado acima.

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

export const DiaDaSemanaLabel = new Map<string, string>([
    ['Segunda', 'Segunda-feira'],
    ['Terca', 'Terça-feira'],
    ['Quarta', 'Quarta-feira'],
    ['Quinta', 'Quinta-feira'],
    ['Sexta', 'Sexta'],
    ['Sabado', 'Sábado'],
    ['Domingo', 'Domingo']
]);

Caso você tenha interesse em saber mais sobre o map, eu recomendo a leitura do seguinte artigo: [Dica rápida]TypeScript: map().

Agora para que possamos retornar a descrição do dia da semana, basta executar o trecho de código abaixo:

console.log(DiaDaSemanaLabel.get(DiaDaSemana[1]))

Resultado:

Bem simples né?

Dessa forma nós conseguimos mapear para que os nossos enums retorne um valor mais amigável para o nosso front.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/typescript-adicionando-description-em-um-enum

Gostou deste artigo? Comente abaixo as suas dúvidas!

Deixe um comentário