Enum di TypeScript: come definire valori costanti per le variabili

Le enum di TypeScript sono una classe speciale composta da variabili costanti. È possibile definire in anticipo il valore di queste variabili. Si distingue fra enum numeriche ed enum basate su stringhe.

Che cosa sono le enum di TypeScript?

Le enum (abbreviazione di “enumerated types”) sono tipi di dati che hanno un insieme finito di valori. Questo insieme di valori è già chiaramente definito in fase di dichiarazione di un’enum con un identificatore e non può essere modificato successivamente. È anche possibile specificare in precedenza l’ordine di visualizzazione dei valori. Con le enum di TypeScript è possibile creare variabili costanti che migliorano la leggibilità del tuo codice e ti permettono al tempo stesso di evitare errori. È una delle poche funzionalità che non è un’estensione di JavaScript tipizzata in modo statico. Si fa distinzione fra enum di TypeScript numeriche e basate su stringhe. In questo articolo ti presentiamo entrambe le varianti.

Enum numeriche di TypeScript

Per le enum numeriche di TypeScript, il primo valore è “0” per impostazione predefinita. Ogni valore aggiuntivo viene quindi incrementato di “1”. Il metodo viene avviato con il parametro enum e memorizza le stringhe in formato numerico. Nel primo passaggio del semplice esempio seguente definiamo i mesi e assegniamo loro un valore. Successivamente interroghiamo il valore specificato per il mese di aprile:

enum Mesi {
	Gennaio,
	Febbraio,
	Marzo,
	Aprile,
	Maggio,
	Giugno,
	Luglio,
	Agosto,
	Settembre,
	Ottobre,
	Novembre,
	Dicembre
}
let MeseCorrente = Mesi.Aprile;
console.log(MeseCorrente);

Il risultato è il seguente:

3

Per impostazione predefinita, il sistema inizia ad assegnare i valori partendo da “0”. Gennaio riceve il valore “0”, febbraio il valore “1”, marzo il valore “2” e aprile “3”, il valore che cerchiamo. Poiché questa sequenza non corrisponde alla numerazione effettiva dei mesi, provvediamo a inizializzare le enum di TypeScript assegnando loro direttamente i valori appropriati. A tal fine è sufficiente modificare leggermente il codice precedente:

enum Mesi {
	Gennaio = 1,
	Febbraio,
	Marzo,
	Aprile,
	Maggio,
	Giugno,
	Luglio,
	Agosto,
	Settembre,
	Ottobre,
	Novembre,
	Dicembre
}
let MeseCorrente = Mesi.Aprile;
console.log(MeseCorrente);

Ora il nostro risultato si presenta così:

4

È sufficiente assegnare il valore desiderato al primo mese. Il sistema procede poi a incrementare il numero di uno alla volta come di consueto.

Assegnazione di valori numerici personalizzati

Se vuoi evitare il conteggio automatico, puoi anche assegnare un valore numerico personalizzato a ciascun valore delle enum di TypeScript. L’esempio seguente riguarda quattro volumi di una serie di romanzi: il nostro obiettivo è memorizzare il loro numero di pagine come valore fisso. A seguire chiediamo al sistema di mostrare il numero di pagine del secondo volume per poterlo verificare. Il codice per farlo è il seguente:

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

L’output è quindi il seguente:

406

Enum di TypeScript basate su stringhe

Le enum di TypeScript basate su stringhe funzionano secondo un principio molto simile. In questo caso, però, alle enum non viene assegnato un valore numerico, ma una stringa. Nell’esempio seguente assegniamo ai giorni della settimana un’abbreviazione adeguata in formato String, che inseriamo tra virgolette. Quindi richiamiamo i valori per “Venerdì” e “Martedì” al fine di verificarli. Il codice si presenta così:

enum GiorniSettimana {
Lunedì = "Lu",
Martedì = "Ma",
Mercoledì = "Me",
Giovedì = "Gio",
Venerdì = "Ve",
Sabato = "Sa",
Domenica = "Do"
};
console.log(GiorniSettimana.Venerdì);
console.log(GiorniSettimana.Martedì);

Il risultato che otteniamo è questo:

Ve
Ma

Combinazione di numeri e stringhe

Teoricamente è anche possibile combinare enum di TypeScript di tipo numerico e basate su stringhe. In generale, i casi d’uso di questa opzione sono piuttosto chiari, ma per completezza ti mostriamo un esempio. In questo caso, impostiamo valori diversi. La procedura rimane comunque sempre la stessa:

enum GiorniSettimana {
Lunedì = "Lu",
Martedì =2,
Mercoledì =3,
Giovedì = "Gio",
Venerdì = "Ve",
Sabato = 6,
Domenica = "Do"
};
console.log(GiorniSettimana.Venerdì);
console.log(GiorniSettimana.Martedì);

Il risultato ora è il seguente:

Ve
2

Reverse mapping per tipi di dati costanti

La logica del reverse mapping (ossia “mappatura inversa”) stabilisce quanto segue: se riesci ad accedere al valore di un’enum di TypeScript, puoi anche accedere al suo nome. Per spiegare questo principio, utilizziamo di nuovo il nostro esempio con i giorni della settimana:

enum GiorniSettimana {
Lunedì = 1,
Martedì,
Mercoledì,
Giovedì,
Venerdì,
Sabato,
Domenica
};
GiorniSettimana.Venerdì
GiorniSettimana["Venerdì"];
GiorniSettimana[5];

In questo esempio, GiorniSettimana.Venerdì restituisce il valore “5”. Lo stesso vale anche per GiorniSettimana["Venerdì"]. Tuttavia, per via della mappatura inversa, GiorniSettimana[5] restituirà il nome “Venerdì”. Ti mostriamo il funzionamento con questa semplice istruzione:

enum GiorniSettimana {
Lunedì = 1,
Martedì,
Mercoledì,
Giovedì,
Venerdì,
Sabato,
Domenica
};
console.log(GiorniSettimana);

Otteniamo quindi il seguente output:

{
    '1': 'Lunedì',
    '2': 'Martedì',
    '3': 'Mercoledì',
    '4': 'Giovedì',
    '5': 'Venerdì',
    '6': 'Sabato',
    '7': 'Domenica',
    Lunedì: 1,
    Martedì: 2,
    Mercoledì: 3,
    Giovedì: 4,
    Venerdì: 5,
    Sabato: 6,
    Domenica: 7
}

Conversione di enum di TypeScript in array

È anche possibile convertire le enum di TypeScript in array di TypeScript. Per il nostro esempio con i giorni della settimana, il codice è simile al seguente:

enum GiorniSettimana {
Lunedì = "Lu",
Martedì = "Ma",
Mercoledì = "Me",
Giovedì = "Gio",
Venerdì = "Ve",
Sabato = "Sa",
Domenica = "Do"
};
const ArrayGiorniSettimana: { label: string; value: string }[] = [];
for (const key in GiorniSettimana) {
    if (GiorniSettimana.hasOwnProperty(key)) {
        ArrayGiorniSettimana.push({ label: key, value: GiorniSettimana[key] });
    }
}
console.log(ArrayGiorniSettimana);

In questo modo otteniamo questo risultato:

[
    { label: 'Lunedì', value: 'Lu' },
    { label: 'Martedì', value: 'Ma' },
    { label: 'Mercoledì', value: 'Me' },
    { label: 'Giovedì', value: 'Gio' },
    { label: 'Venerdì', value: 'Ve' },
    { label: 'Sabato', value: 'Sa' },
    { label: 'Domenica', value: 'Do' }
]