In questo nuovo articolo vedremo come creare ed utilizzare nel linguaggio di programmazione TypeScript, procedure e funzioni.
Nel linguaggio Typescript, come per altri linguaggi possiamo creare procedure, che sono quelle funzionalità che non restituiscono nessun valore ma eseguono varie operazioni di codice e le funzioni che restituiscono un dato.
Come per le variabili, le funzioni possiamo avere una visibilità private (limitata nella classe in cui viene creata) o pubblica (che viene vista anche fuori dalla classe in cui è creata), dichiarandole private o public.
Prendendo il progetto creato nei precedenti articoli, in questo articolo andremo a creare vari frammenti di codice sull’utilizzo di procedure e funzioni.
Le procedure
Le procedure, sia pubbliche e sia private non restituiscono nessun valore, di norma vengono dichiarate con la parola chiave “void”.
Di seguito si riporta un frammento di codice di una procedura che scrive nella console del browser.
TypeScript:
private MiaProcedura() : void{
console.log("Codice");
}
Come si è visto dal codice precedente, viene creata una procedura che scrive un log, dichiarata con la parola chiave “Void”.
Di seguito si riporta il frammento di codice per eseguire tale procedura.
TypeScript:
export class AppComponent implements OnInit {
ngOnInit(): void {
this.MiaProcedura() ;
}
private MiaProcedura() : void{
console.log("Codice");
}
}
La dichiarazione può essere anche public, ossia con visibilità anche esterna alla classe o nella parte html di Angular.
Di seguito la dichiarazione di una procedura di tipo “Public”.
TypeScript
public MiaProcedura() : void{
console.log("Codice");
}
Possiamo creare procedure che accattano parametri, variabili che ci permettono di gestire alcuni dati.
Di seguito si riporta una procedura che accetta due parametri, una di tipo string ed una di tipo “number”.
TypeScript:
private MiaProcedura(paramTesto: string, paramNumero: number) : void{
console.log("Valore: " + paramTesto + " numero: " + paramNumero);
}
Per richiamare la procedura, occorre passare dei valori, di seguito il frammento di codice per eseguire la procedura con i parametri precedentemente creata.
TypeScript
ngOnInit(): void {
this.MiaProcedura("Mio Testo", 3) ;
}
È possibile dichiarare una procedura con parametri facoltativi, in questo caso la procedura viene invocata senza passare un valore al parametro facoltativo. Per creare un parametro facoltativo occorre dichiarare la variabile con il simbolo del punto interrogativo “?”.
Di seguito il frammento di codice per la creazione di una procedura con parametro facoltativo.
TypeScript
private MiaProcedura(paramTesto: string, paramNumero?: number) : void{
console.log("Valore: " + paramTesto + " numero: " + paramNumero);
}
Si ricorda che non passando nessun parametro, verrà considerato “undefined”.
Di seguito si riporta un esempio di codice per eseguire la procedura senza passare il parametro.
TypeScript
ngOnInit(): void {
this.MiaProcedura("Mio Testo") ;
}
Le procedure, come anche le funzioni, possono avere un parametro con valore di default, questo lo si fa in sede di dichiarazione assegnando un valore.
Di seguito si riporta un frammento di codice che illustra un parametro con valore di default.
TypeScript:
private MiaProcedura(paramTesto: string, paramNumero: number = 5) : void{
console.log("Valore: " + paramTesto + " numero: " + paramNumero);
}
Per richiamare la procedura è possibile anche omettere il valore da passare al parametro con il valore di default.
Di seguito un esempio di tale utilizzo.
TypeScript:
ngOnInit(): void {
this.MiaProcedura("Mio Testo") ;
}
Oppure passando un valore al parametro di default, di seguito si riporta il frammento di codice delle suddette operazioni.
TypeScript:
ngOnInit(): void {
this.MiaProcedura("Mio Testo", 20) ;
}
Le funzioni
In questo capitolo vedremo l’utilizzo delle funzioni, che sono simili alle procedure con la differenza che restituiscono un valore, oltre che possono essere creati con lo stesso nome tramite la tecnica dell’ovveride.
Di seguito sono riportati i vari utilizzi delle funzioni.
Le funzioni possono restituire un tipo, testo, numero, date ed altri tipi, di seguito un frammento di codice che restituisce del testo e viene visualizzato a video tramite alert.
TypeScript:
private MiaFunzione() : string {
return "La mia funzione";
}
Il frammento di codice precedente, illustra la creazione di una funzione di tipo privata, ossia con visibilità all’interno della classe, che restituisce del testo. Anche le funzioni come per le procedure possono essere pubbliche o private.
Per richiamare la funzione appena creata, dobbiamo richiamarla, vedremo che restituisce il testo presente nella funzione.
Di seguito il frammento di codice per richiamare la funzione.
TypeScript:
ngOnInit(): void {
alert(this.MiaFunzione());
}
Le funzioni, sia private che pubbliche, possono avere parametri, di seguito una funzione che riceve un parametro di tipo “string” e restituisce del testo.
Di seguito la dichiarazione delle suddette operazioni per il linguaggio TypeScript.
TypeScript:
public MiaFunzione(parametroTesto: string) : string {
return 'Il testo del parametro è ' + parametroTesto;
}
Per richiamare la funzione, occorre invocarla passando del testo come parametro, di seguito il frammento di codice di tale utilizzo.
TypeScript:
ngOnInit(): void {
alert(this.MiaFunzione('Prova '));
}
Le funzioni si comportano come le procedure, come visto negli esempi precedenti, la possibilità di avere un parametro facoltativo, definendolo con il carattere “?”.
Di seguito si riporta una funzione con parametro facoltativo.
TypeScript:
public MiaFunzione(parametroTesto: string, parametroOptional?: number) : string {
return 'Il testo del parametro è ' + parametroTesto + ' numero ' + parametroOptional;
}
La funzione con parametro facoltativo può essere richiamata anche passando il valore per un solo parametro, di seguito il frammento di codice delle suddette operazioni.
TypeScript:
ngOnInit(): void {
alert(this.MiaFunzione('Prova '));
}
Come si è visto nel precedente frammento di codice, il secondo parametro, sarà “undefined”.
Altro aspetto delle funzioni, come nelle procedure è la possibilità di avere un parametro di default, di seguito si riporta un frammento di codice nel quale si crea una funzione con un secondo parametro di default.
TypeScript:
private MiaFunzione(parametroNumerico: number, parametroDefault : number = 2) : number {
return parametroNumerico + parametroDefault;
}
Per invocare la funzione con parametro di default, è possibile passare solo il primo parametro, di seguito il frammento di codice delle suddette operazioni.
TypeScript:
ngOnInit(): void {
alert(this.MiaFunzione(1));
}
Il risultato che verrà restituito dall’esempio precedente è il 3.
Una particolarità interessante è quella di passare un numero imprecisato di parametri, questo avviene tramite la tecnica di rest, ossia dichiarare un parametro con i tre punti.
Di seguito si riporta il frammento di codice delle suddette operazioni, con il quale possiamo passare n valori alla funzione.
TypeScript:
private MiaFunzione( ...parametroArrayString: string[]) : string {
let returnValore: string = "";
parametroArrayString.forEach(p=> returnValore += " " + p );
return returnValore;
}
La funzione sarà richiamata passando tre parametri, di seguito il frammento di codice delle suddette operazioni.
TypeScript:
ngOnInit(): void {
alert(this.MiaFunzione('Ema', 'Luigi', 'Fra'));
}
Le funzioni anonime, se pur poche utilizzate possono tornare utile in certi contesti. Queste funzioni possiamo vederle come delle variabili che eseguono determinate azioni.
Di seguito la creazione di una funzione anonima ed il relativo utilizzo.
TypeScript:
ngOnInit(): void {
var messaggio = function(testo:string){
alert("testo passato: " + testo);
}
messaggio("Prova");
}
Siamo giunti all’ultima parte dell’utilizzo delle funzioni, la tecnica di overloading, ossia una tecnica di creare due o più funzioni con lo stesso nome, con la sola differenza dei parametri che vengono passati o del tipo restituito.
Di seguito un frammento di codice di funzioni con lo stesso nome.
TypeScript:
private MiaFunzione(testo: string, testo2: string): string
private MiaFunzione(testo: number, testo2: number): number
private MiaFunzione(testo: any, testo2: any): any
{
return testo + testo2;
}
Di seguito il relativo utilizzo:
TypeScript:
ngOnInit(): void {
alert(this.MiaFunzione("Prova", "Prova2"));
alert(this.MiaFunzione(1, 2));
}
Conclusioni
In questa parte abbiamo acquisito la conoscenza sull’utilizzo di procedure e funzioni che sono tecniche di programmazione molto usate anche in altri linguaggi di programmazione.
I vari esempi di codice hanno permesso al lettore di acquisire quella conoscenza completa sull’utilizzo delle procedure e funzioni, illustrando i vari utilizzi che si possono fare nella creazione dei propri programmi.
Per chi già programma con altri linguaggi di programmazione, troverà la sintassi ed il relativo utilizzo simile al linguaggio che utilizza.