TypeScript - Tipi Letterali: Una Guida per Principianti

Ciao, futuro supercampione del coding! Oggi ci immergeremo nel mondo emozionante dei Tipi Letterali di TypeScript. Non preoccuparti se sei nuovo alla programmazione - sarò il tuo guida amichevole in questa avventura. Alla fine di questo tutorial, sarai in grado di utilizzare i tipi letterali come un professionista!

Cos'è un Tipo Letterale?

Prima di immergerci, immaginiamo che stai ordinando una pizza. Non puoi solo dire, "Voglio una pizza." Devi specificare la taglia: piccola, media o grande. In TypeScript, i tipi letterali sono come quelle specifiche taglie di pizza - sono valori esatti che una variabile può avere.

Sintassi

La sintassi per i tipi letterali è semplice. Usa semplicemente il valore esatto che vuoi permettere. Guardiamo un esempio di base:

let pizzaSize: "small" | "medium" | "large";

In questo caso, pizzaSize può essere solo "small", "medium" o "large". Null'altro è permesso - neanche "extra large" o "minuscola"!

Tipi Letterali Stringa

I tipi letterali stringa sono i più comuni e facili da capire. Sono esattamente come sembrano - stringhe specifiche che una variabile può essere.

Esempio 1: Giorni della Settimana

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // Questo va bene
today = "Someday"; // Errore! Il tipo '"Someday"' non è assegnabile al tipo 'DayOfWeek'.

In questo esempio, DayOfWeek è un tipo che può essere solo uno dei sette giorni della settimana. Prova a assegnare qualsiasi altra stringa, e TypeScript ti farà notare l'errore!

Esempio 2: Colori dei Semafori

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`La luce è cambiata a ${color}`);
}

changeLight("Green"); // Funziona bene
changeLight("Purple"); // Errore! L'argomento di tipo '"Purple"' non è assegnabile al parametro di tipo 'TrafficLightColor'.

Qui, stiamo assicurando che il nostro semaforo possa cambiare solo a colori validi. Nessun lume di discoteca su questa strada!

Tipi Letterali Numerici

Come con le stringhe, possiamo creare tipi letterali con numeri. Questo è ottimo quando vuoi limitare un valore a specifici numeri.

Esempio 3: Lanci di Dado

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`Hai lanciato un ${myRoll}`);

In questo esempio, stiamo assicurando che il nostro dado possa solo lanciare numeri da 1 a 6. Nessun dado carico nel nostro gioco!

Esempio 4: Taglie di Maglietta

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // Errore! Il tipo '41' non è assegnabile al tipo 'ShirtSize'.

Qui, stiamo limitando le taglie di maglietta a specifici numeri. Nessuna taglia intermedia permessa in questo negozio!

Tipi Letterali Combinati

La vera potenza dei tipi letterali si rivela quando combiniamo diversi tipi di letterali.

Esempio 5: Stato del Personaggio del Gioco

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // Questo è anche valido
hero = "Wounded"; // Errore! Il tipo '"Wounded"' non è assegnabile al tipo 'CharacterStatus'.

In questo gioco, un personaggio può essere "Alive", "Dead", 1 (rappresentando vivo), o 0 (rappresentando morto). È come avere sia una rappresentazione testuale che una codice!

Cas d'Uso per i Tipi Letterali

I tipi letterali sono estremamente utili in molte situazioni. Esploriamo alcuni:

1. Parametri delle Funzioni

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// Invia la richiesta
console.log(`Invio una richiesta ${method} a ${url}`);
}

sendRequest("https://api.example.com", "GET"); // Va bene
sendRequest("https://api.example.com", "FETCH"); // Errore! L'argomento di tipo '"FETCH"' non è assegnabile al parametro di tipo 'HttpMethod'.

Utilizzando un tipo letterale per il metodo HTTP, assicuriamo che solo metodi validi possano essere utilizzati.

2. Oggetti di Configurazione

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

I tipi letterali ci aiutano a creare oggetti di configurazione rigorosi, prevenendo errori di battitura e impostazioni non valide.

3. Macchine a Stati

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// Esegui la logica di login
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

Qui, utilizziamo i tipi letterali per rappresentare diversi stati in un processo di login, assicurando che lo stato possa essere solo uno dei valori predefiniti.

Tabella dei Metodi

Ecco una tabella che riassume i metodi e i concetti chiave che abbiamo coperto:

Metodo/Concetto	Descrizione	Esempio
Dichiarazione di Tipo	Definire un nuovo tipo utilizzando valori letterali	type DayOfWeek = "Monday" \| "Tuesday" \| ...
Assegnazione di Variabile	Assegnare un tipo letterale a una variabile	let today: DayOfWeek = "Monday";
Parametri delle Funzioni	Utilizzare tipi letterali nei parametri delle funzioni	function sendRequest(method: HttpMethod) {...}
Letterali Combinati	Mescolare diversi tipi di letterali	type Status = "Active" \| "Inactive" \| 0 \| 1;
Proprietà degli Interfacce	Utilizzare tipi letterali nelle proprietà degli interfacce	interface Config { theme: "light" \| "dark" }

Eccoci, mio apprendista di coding! Hai appena livellato nel tuo viaggio di TypeScript mastery padroneggiando i tipi letterali. Ricorda, come scegliere il topping perfetto per una pizza, i tipi letterali ti aiutano a essere specifico e a evitare errori. Continua a praticare, e presto creerai codice sicuro e delizioso come una pizza ben fatta! ??

Credits: Image by storyset