Descrizione
In questo articolo affronteremo un tema legato alle classi, in particolar modo ad estendere una classe con nuovi metodi.
La tecnica di estendere classi, come può essere quella “Date” che riguarda le data, permette di aggiungere funzionalità e proprietà utili nel progetto e che non sono presenti nella classe stessa.
In questo articolo vedremo come dotare la classe “Date” del linguaggio di programmazione TypeScript, utilizzando la tecnologia Angular, con due nuovi metodi, il primo permetterà di restituire il giorno della settimana, il secondo di indicare se il giorno attuale è un giorni di fine settimana (sabato e domenica).
Creazione del progetto
Si crea un nuovo progetto di Angular, o utilizzare uno già presente nel quale fare i test, ed aprire il tutto con l’ambiente di sviluppo Visual Studio Code.
Dopo aver aperto il progetto, occorre creare un file di tipo “Interfaccia”, facciamo click con il tasto destro sulla cartella “App” e dal menu che viene visualizzato, selezioniamo la voce “Generate Interfacce”, il tutto come riportato in figura 1.
Nella finestra che viene visualizzata (figura 2) digitiamo nella casella di testo il nome della classe, nel nostro caso “interfaceDate” .
Dopo aver confermato il nome, verrà creato il file con la denominazione dell’interfaccia.
Stesura del codice
Terminata la creazione e predisposizione del progetto, non resta che scrivere il codice per estendere la classe “Date” con il metodo che restituisce il nome della settimana.
Nella dichiarazione di interfaccia, sostituiamo il nome che ha creato in automatico con la classe della Data, e scriviamo un metodo pubblico che restituisce un valore di tipo string.
Di seguito si riporta tale dichiarazione nel linguaggio di programmazione TypeScript.
TypeScript
interface Date {
getGiornoSettimana(): string;
}
Terminate la dichiarazione del metodo da estendere, dobbiamo scrivere la funzione che restituisce il giorno della settimana di tipo “String” prendendo il giorno odierno tramite il metodo getDay(), che restituisce un numero che è quello della settimana.
Di seguito si riporta le dichiarazioni delle suddette operazioni
TypeScript
Date.prototype.getGiornoSettimana = function (): string {
const giorniSettimana: string[] = [
"Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"
];
return giorniSettimana[this.getDay()];
};
L’implementazione del metodo “getGiornoSettimana” avviene fuori dall’interfaccia.
Di seguito si riporta il codice completo di tale operazione.
TypeScript
interface Date {
getGiornoSettimana(): string;
}
Date.prototype.getGiornoSettimana = function (): string {
const giorniSettimana: string[] = [
"Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"
];
return giorniSettimana[this.getDay()];
};
Ora non resta che testare l’implementazione.
Torniamo nel file che utilizziamo per visualizzare nel browser le informazioni, nel nostro caso, come nuovo progetto, il file denominato “app.component.html”, e nella parte di codice TypeScript, visualizziamo nella console il giorno della settimana.
Di seguito si riportano le dichiarazioni delle suddette operazioni.
TypeScript
export class AppComponent implements OnInit {
ngOnInit(): void {
let giorno = new Date();
console.log(giorno.getGiornoSettimana());
}
}
L’errore di tipo “error TS2339: Property 'getGiornoSettimana' does not exist on type 'Date'.” significa che non è presente il riferimento al file nel quale si estende la classe date, e quindi la compilazione va in errore, il tutto come nella figura 3.
In alto, sopra ad ogni dichiarazione, dove si scrivo gli import, inseriamo il riferimento alla classe.
Di seguito si riporta la dichiarazione delle suddette operazioni.
TypeScript:
import './interfaceDate'
Nella console verrà visualizzato il giorno della settimana in lingua italiana.
Ritorniamo nella classe che abbiamo esteso, e aggiungiamo un altro nuovo metodo, in particolare indicare se il giorno della settimana è del fine settimana (sabato o domenica).
Nell’interfaccia si crea la denominazione del metodo per indicare il fine settimana.
Di seguito si riporta il frammento di codice delle suddette operazioni.
TypeScript
interface Date {
getGiornoSettimana(): string;
isWeekend(): boolean;
}
Sotto alla dichiarazione di funzione che indica il giorno della settimana, scriviamo la funzione che restituisce true o false per indicare se è un fine settimana.
Di seguito si riporta il frammento di codice delle suddette operazioni.
TypeScript
Date.prototype.isWeekend = function (): boolean {
return this.getDay() === 0 || this.getDay() === 6;
};
A completezza della classe, si riporta tutto il codice della classe Date che viene estesa con i due nuovi metodi.
TypeScript
interface Date {
getGiornoSettimana(): string;
isWeekend(): boolean;
}
Date.prototype.getGiornoSettimana = function (): string {
const giorniSettimana: string[] = [
"Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"
];
return giorniSettimana[this.getDay()];
};
Date.prototype.isWeekend = function (): boolean {
return this.getDay() === 0 || this.getDay() === 6;
};
Ora non resta che testare il codice, nel file dove viene visualizzata la pagina, scriviamo nella console log, se il giorno della settimana è fine settimana oppure no.
Di seguito si riporta il codice delle suddette operazioni.
TypeScript
export class AppComponent implements OnInit {
ngOnInit(): void {
let giorno = new Date();
console.log(giorno.getGiornoSettimana());
console.log(giorno.isWeekend());
}
}
Conclusione
L’articolo ha voluto fornire al lettore, la possibilità di estendere una classe del linguaggio di programmazione TypeScript, quale Date, con metodi che potrebbero tornargli utili durante lo sviluppo software.
Una tecnica che si può usare anche ad altre classi del linguaggio di programmazione TypeScript. Il linguaggio di programmazione TypeScript, in questi anni ha visto notevoli miglioramenti, diventando un linguaggio simile a quelli di programmazione ad oggetti come C# e Java, mirato agli script lato web.
Post
Le opere pubblicate in questo blog sono sotto la licenza Creative Commons. Attribuzione- No commerciale e no derivate.
Nessun commento:
Posta un commento