TypeScript - Classes: A Beginner's Guide

Ciao lì, futuro super campione del coding! ? Sei pronto ad immergerti nel mondo emozionante delle classi di TypeScript? Non preoccuparti se non hai mai scritto una riga di codice prima – inizieremo da zero e costruiremo passo dopo passo. Alla fine di questo tutorial, sarai in grado di creare classi come un professionista! Allora, iniziamo questa avventura insieme.

Cos'è una Classe?

Prima di entrare nei dettagli, capiremo cos'è una classe. Pensa a una classe come a un modello per creare oggetti. Proprio come gli architetti usano i modelli per costruire case, noi usiamo le classi per creare oggetti nel nostro codice. Questi oggetti possono avere proprietà (come il colore di una casa) e metodi (come aprire una porta).

Creare Classi

Iniziamo creando la nostra prima classe. Creeremo una semplice classe Car.

class Car {
make: string;
model: string;
year: number;

constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

honk() {
console.log("Beep beep!");
}
}

Ecco una spiegazione dettagliata:

1. Iniziamo con la parola chiave class seguita dal nome della nostra classe, Car.
2. Dentro la classe, definiamo le proprietà: make, model, e year.
3. Il constructor è un metodo speciale che viene chiamato quando creiamo un nuovo oggetto Car. Imposta i valori iniziali delle nostre proprietà.
4. Abbiamo anche un metodo honk che, quando chiamato, stamperà "Beep beep!" sulla console.

Creare Oggetti di Istanza

Ora che abbiamo la nostra classe Car, creiamo alcuni oggetti auto reali!

let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);

Qui, abbiamo creato due oggetti Car: myCar e yourCar. La parola chiave new dice a TypeScript di creare una nuova istanza della nostra classe Car.

Accedere a Attributi e Funzioni

Ora che abbiamo i nostri oggetti auto, come li utilizziamo? Vediamo:

console.log(myCar.make);  // Output: Toyota
console.log(yourCar.year);  // Output: 2019

myCar.honk();  // Output: Beep beep!

Usiamo la notazione a punto per accedere alle proprietà e ai metodi dei nostri oggetti. È come dire, "Ehi, myCar! Qual è il tuo make?" o "Ehi, myCar! Fammi un beep!"

Eredità di Classe

L'eredità è una funzionalità potente che ci permette di creare nuove classi basate su altre già esistenti. Creiamo una classe SportsCar che eredita dalla nostra classe Car:

class SportsCar extends Car {
topSpeed: number;

constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}

race() {
console.log(`Corsa a ${this.topSpeed} mph!`);
}
}

let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk();  // Output: Beep beep!
mySpeedster.race();  // Output: Corsa a 210 mph!

Ecco cosa sta succedendo:

1. Usiamo la parola chiave extends per ereditare da Car.
2. Aggiungiamo una nuova proprietà topSpeed.
3. Nel costruttore, chiamiamo super() per inizializzare le proprietà dalla classe padre.
4. Aggiungiamo un nuovo metodo race specifico per SportsCar.

La nostra SportsCar ha tutte le proprietà e i metodi di Car, più le sue aggiunte!

Sovrascrittura di Metodi

A volte, vogliamo cambiare il funzionamento di un metodo della classe padre nella nostra classe figlia. Questo si chiama sovrascrittura del metodo. Sovrascriviamo il metodo honk nella nostra SportsCar:

class SportsCar extends Car {
// ... codice precedente ...

honk() {
console.log("Vroom vroom!");
}
}

mySpeedster.honk();  // Output: Vroom vroom!

Ora, quando chiamiamo honk() su una SportsCar, emette un suono più sportivo!

La Parola Chiave static

La parola chiave static ci permette di creare proprietà e metodi che appartengono alla classe stessa, non alle istanze della classe. Aggiungiamo un metodo statico alla nostra classe Car:

class Car {
// ... codice precedente ...

static numberOfWheels() {
return 4;
}
}

console.log(Car.numberOfWheels());  // Output: 4

Possiamo chiamare questo metodo sulla classe Car stessa, senza creare un'istanza.

L'Operatore instanceof

L'operatore instanceof ci permette di controllare se un oggetto è un'istanza di una particolare classe:

console.log(myCar instanceof Car);  // Output: true
console.log(mySpeedster instanceof SportsCar);  // Output: true
console.log(mySpeedster instanceof Car);  // Output: true
console.log(myCar instanceof SportsCar);  // Output: false

Questo è utile quando dobbiamo controllare con che tipo di oggetto stiamo lavorando.

Nascondere i Dati

In TypeScript, possiamo usare i modificatori di accesso per controllare la visibilità dei membri di una classe. I tre modificatori di accesso sono public, private, e protected:

class BankAccount {
private balance: number;

constructor(initialBalance: number) {
this.balance = initialBalance;
}

public deposit(amount: number) {
this.balance += amount;
}

public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("Fondi insufficienti!");
}
}

protected getBalance() {
return this.balance;
}
}

• private: Accessibile solo all'interno della classe.
• public: Accessibile da anywhere (predefinito se non specificato).
• protected: Accessibile all'interno della classe e dalle sue sottoclassi.

Classi e Interfacce

Le interfacce in TypeScript ci permettono di definire un contratto per le nostre classi. Creiamo un'interfaccia per la nostra classe Car:

interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}

class Car implements Vehicle {
// ... implementazione ...
}

Implementando un'interfaccia, ci assicuriamo che la nostra classe aderisca a una struttura specifica.

Riepilogo dei Metodi

Ecco un riepilogo dei metodi che abbiamo coperto in questo tutorial:

Metodo	Descrizione
constructor()	Inizializza una nuova istanza di una classe
honk()	Fa sì che l'auto emetta un beep
race()	Simula una corsa (per SportsCar)
static numberOfWheels()	Restituisce il numero di ruote (per la classe Car)
deposit()	Aggiunge denaro a un conto bancario
withdraw()	Rimuove denaro da un conto bancario
getBalance()	Restituisce il saldo corrente di un conto bancario

Ecco fatto! Hai appena fatto i tuoi primi passi nel mondo delle classi di TypeScript. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi concetti. Crea le tue classi, combina diversi features, e, soprattutto, divertiti a programmare! Chi lo sa, magari la prossima volta sarai tu a insegnare questa lezione! ?

Credits: Image by storyset