Tempo di lettura: 3 minuti
A partire da EcmaScript6 è possibile utilizzare le classi in javascript e typescript ,questo difatti può definirsi simile ,oramai, ad un classico linguaggio ad oggetti.
Nelle versioni precedenti alla suddetta non esisteva, ancora, tale concetto bensì veniva utilizzato l’oggetto prototype.
Oggi fortunatamente è possibile utilizzare le classi inTypeScript o in ES6 ed utilizzare gli oggetti derivati avendo,così ,la possibilità di riutilizzare il codice in più punti di un’applicazione o,addirittura, anche in altre applicazioni.
Se volete studiare framework quali React o Angular è di fondamentale importanza conoscere tali concetti in quanto questi sono costituiti da componenti i quali, appunto,non sono altro che classi.
Come definire ed utilizzare le classi
Per definire una classe in un qualsiasi linguaggio di programmazione scriviamo:
class News {
}
Definire i membri della classe
All’interno delle classi si ha la necessità di usare le variabili, quelle visibili per tutto il corpo della classe sono definite nello stesso e vengono chiamate membri o variabili di classe:
class News {
numPost:number;
this.numPost
}
il membro numPost è visibile solo all’interno della casse News e ,per referenziarla devo utilizzare la notazione this.
Definire il costruttore
Il costruttore di una classe è una particolare funzione ,o metodo, che viene richiamato per prima quando si crea l’istanza di una classe, ossia un nuovo oggetto derivato da essa.
In Typescript e nelle applicazioni Angular spesso avremo:
class News {
var numPost: number;
constructor(){
//elenco delle istruzioni da eseguire subito
this.numPost=10;
}
}
Ogni qual volta creo l’istanza di questa classe inizializzo al valore 10 la variabile definita in precedenza.
In alternativa è possibile creare un costruttore che riceva uno o più dati in ingresso da utilizzare per personlaizzari i membri della classe:
class News {
var numPost: number;
constructor(num){ //elenco delle istruzioni da eseguire subito
this.numPost=num;
}
}
in questo caso la variabile numPost non verrà inizializzata con un valore fisso ma bensì verrà inizializzato con il valore che passeremo al costruttore, quindi un valore dinamico.
Come definire un metodo
Abbiamo visto che all’interno delle classi è possibile definire le variabili di classi o membri queste saranno visibili solo all’interno di queste.
Ora vediamo come sia possibile definire una funzione o metodo di una classe, ricorda che anche queste non sono sfruttabili da altre classi:
class Articoli {
var numPost:num;
constructor() {
// elenco istruzioni da eseguire subito
this.numPost = 10;
}
mostroPost() {
// istruzioni da eseguire sull'istanza
}
}In questo caso ho creato il metodo mostroPost () il quale mi farà vedere il numero dei post contenuti nel mio articolo.
Come istanziare una classe
Per poter utilizzare l’oggetto derivato da una classe questa deve essere istanziata(creare un’istanza di una classe per poter sfruttare metodi e membri contenuti in essa) utilizzando la parola chiave new.
Allora in TypeScript o ES6 avremo:
let post = new Articoli();
console.log("Mostro i primi" + post.num + "del mio blog");
post.mostroPost();
Ereditarietà: estendere una classe
Una volta definita la funzionalità di una classe se avessi bisogno di aggiungere altre specifiche alla stessa potrei estenderla mediante un’altra classe (classe figlia) aggiungendo altre caratteristiche alla classe padre:
class ArticoliImg extend Articoli {
constructor() {
// elenco istruzioni da eseguire subito
super();
this.numaPost = 10;
this.img = 'img';
}
mostroGallery () {
// istruzioni da eseguire sull'istanza
}
}Come vedete ho creato la classe ArticoliImg la quale estende e quindi eredita le caratteristiche della classe padre Articoli nell’intendo da aggiungere a questa altre funzionalità (in questo caso una foto gallery).
Ora vi saluto e ci vediamo nel prossimo tutorial. Se volete approfondire i concetti sul framework Angular potete farlo seguendo il mio corso in super offerta!!