Skill Factory

- AULE GRUPPI
- Le Tue Aule
- I Tuoi Gruppi
- Le Tue Selezioni
- Home
- Login
- Registrati
- Crea azienda
- Assistenza

Lista Blog

Chat

www.skillfactory.it

segreteria@skillfactory.it

3270870141

Richiedi informazioni

Skill Factory

Categoria: Tutorials

TypeScript - Lezione 6: Paradigma Object Oriented (prima parte)

Gino Visciano | Skill Factory - 28/07/2020 23:29:50 | in Tutorials

Il paradigma Object Oriented prevede che le applicazioni siano composte da un insieme di componenti, chiamti oggetti oppure istanze, che collaborano tra loro per svolgere un lavoro o risolvere un problema.

Il Diagramma di collaborazione seguente mostra un esempio di applicazione Object Oriented.

Tutte le applicazioni si possono assemblare utilizzando tre tipi di oggetti:

- I MODEL sono oggetti che contengono i dati di un entità, corrispondono ai record delle tabelle, permettono di memorizzare temporaneamente i dati in memoria;
- Le VIEW sono oggetti oppure viste, come ad esempio le pagine html, permettono la visualizzazione oppure l'inserimento di informazioni;
- I CONTROLLER sono oggetti che hanno il compito di gestire un flusso logico applicativo, all'interno della stessa applicazione ci possono essere anche più CONTROLLER.

L'immagine seguente mostra un diagramma di classe che descrive una classe che contiene gli attributi di una Persona.

Con una classe di questo tipo è possibile istanziare oggetti di tipo MODEL.

L'immagine seguente mostra il mockup di una pagina.html che permette di inserire i dati che verranno memorizzati in un oggetto di tipo Persona:

L'immagine seguente mostra un diagramma di classe con la classe GestionePersone di tipo CONTROLLER che, attraverso il metodo main, implementa la logica necessaria per gestire oggetti di tipo Persona:

COLLABORAZIONE TRA COMPONENTI

Quando si lavora con un linguaggio ad oggetti bisogna ricordare alcune regole importanti per permettere la collaborazione (comunicazione) tra i componenti dell'applicazione:

1) Una classe diventa un componente (oggetto) quando s'istanzia, solo in questo caso è possibile usare gli attributi ed i metodi pubblici, come mostra il codice TypeScript seguente:

Persona personaUno = new Persona();
Persona personaDue = new Persona();
personaUno.setNome("Pippo");
personaUno.setCognome("Rossi");
personaUno.setEta(35);
personaDue.setNome("Carla");
personaDue.setCognome("Verdi");
personaDue.setEta(30);

L'immagine seguete mostra prima il Diagramma di Classe che descrive la classe Persona, di seguito attraverso un Diagramma ad Oggetti vengono descritti gli stati delle istanze (oggetti) dei due compenenti di tipo MODEL creati usando la classe Persona.

I due componenti istanziati sono stati allocati in memoria e gli indirizzi (riferimenti) memorizzati nelle variabili personaUno e personaDue di tipo Persona.

2) Gli attributi ed i metodi pubblici di una classe si definiscono Interfaccia. I componenti possono collaborare (comunicare) tra loro solo attraverso l'interfaccia.

Ad esempio l'interfaccia della classe Persona è composta solo dai metodi:

public setNome(nome:string):void;
public setCognome(cognome:string):void;
public setEta(eta:number):void;
public getNome():string;
public getCognome():string;
public getEta():int;

perché gli attributi sono tutti privati e non possono essere visibili agli altri componenti.

3) Un componente che usa gli attributi ed i metodi pubblici (interfaccia) di un altro componenete ha il ruolo di Client, l'altro ha il ruolo di Server.

L'immagine seguente mostra la classe Prima, di tipo Client, perché attraverso i metodi stampaDivisione() e stampaValore(), utilizza l'attributo valore ed il metodo divisione(...) della classe Seconda, che ha il ruolo di Server.

I metodi di una classe Client per usare gli attributi ed i metodi pubblici (interfaccia) di una classe Server devono istanziarla, come mostra l'esempio seguente:

Esempio 1

 
// prima.ts classe Client
import {Seconda} from './seconda'
export class Prima{
    public stampaDivisione():void{
        //Istanza classe Server
        var seconda:Seconda =new Seconda();
        console.log("Divisione 10/5="+seconda.divisione(10,5));
    }
    public stampaValore():void{
        //Istanza classe Server
        var seconda:Seconda =new Seconda();
        console.log("valore="+seconda.valore);
    }
}
 

 
// seconda.ts classe Server
export class Seconda{
    //Interfaccia classe Server perché entrambi gli elementi sono pubblici
    public valore:number=10;
    public divisione(dividendo:number,divisore:number):number{
        return dividendo/divisore;
    }
}
 

 
import {Prima} from './prima'
//Istanza classe Prima perché per poter usare 
//i suoi elementi pubblici deve diventare un componente 
var prima:Prima=new Prima();
prima.stampaDivisione();
prima.stampaValore();
 

Tra la classe Client Prima e la classe Server Seconda esiste una dipendenza, perché entrambi i metodi stampaDivisione() e stampaValore() di classe Prima istanziano un componente di tipo Seconda.

Quando esiste una dipendenza le classi si dicono accoppiate.

PROPRIETA' DEL PARADIGMA OBJECT ORIENTED

Il paradigma Object Oriented prevede tre proprietà di programmazione e due architetturali.

Proprietà di programmazione:

1) Incapsulamento
2) Ereditarietà
3) Polimorfismo

Il Polimorfismo può essere diviso in:

1) Polimorfismo dei metodi: Overload ed Override
2) Polimorfismo degli oggetti, che si può ottenere per ereditarietà oppure per interfaccia.

Le proprietà di programmazione permettono di sviluppare le classi ed impostare le loro caratteristiche ed il loro comportamento.

Proprietà architetturali:

1) Coesione
2) Disaccoppiamento

Le proprietà architetturali permettono d'impostare la struttura e l'organizzazione delle applicazioni ad oggetti, per migliorarne le funzionalità e la qualità.

PROPRIETA' DI PROGRAMMAZIONE DEL PARADIGMA OBJECT ORIENTED

Le proprietà descritte di seguito sono disponibili unicamente nei linguaggio orientatti agli oggetti (Object Oriented), come ad esempio: C++, C#, Java, TypeScript e Python.

INCAPSULAMENTO

L'incapsulamento, attraverso i modificatori di accesso, permette di regolare la visibilità e quindi l'utilizzo degli elementi di una classe:

- Attributi
- Metodi
- Costruttori

da parte dei metodi di altre classi.

I modificatori di accesso disponbili in TypeScript sono:

- public (+, notazione UML)
- private (-, notazione UML)
- protected (#, notazione UML)

a) un elemento è public è visibile a tutti i metodi sia della classe a cui appartiene, sia ai metodi di altre classi.
b) un elemento è private è visibile solo a tutti i metodi della classe a cui appartiene, ma non è visibile ai metodi di altre classi.
c) un elemento è protected è visibile solo a tutti i metodi della classe a cui appartiene ed a quelli delle classi che ereditano la classe che contiene l'elemento protected, ma non è visibile ai metodi di altre classi.

Esempio 2

 
// incapsulamento.rs
class Test{
public a:number=10;
private b:number=20;
protected c:number=30;
}
class TestA{
public eseguiTest(){
     // Verifica incapsulamento per istanza (dipendenza)
     var test:Test=new Test();
     console.log("a="+test.a+" (public)")
     console.log("b=non visibile (private)");
     console.log("c=non visibile (protected)");
}
}
class TestB extends Test{
    public eseguiTest(){
         // Verifica incapsulamento per ereditarietà
         console.log("a="+this.a+" (public)")
         console.log("b=non visibile (private)");
         console.log("c="+this.c+" (protected)");
    }
    }
 
// Controller
class Main{
    public static main(){
        var testA:TestA=new TestA();
        var testB:TestB=new TestB();
        console.log("----- Test incapsulamento per dipendenza -----")
        testA.eseguiTest();
        console.log("----- Test incapsulamento per ereditarietà -----")
        testB.eseguiTest();
    }
}
//main
Main.main();
 
----------------------------------------------------------------------------
----- Test incapsulamento per dipendenza -----

a=10 (public)

b=non visibile (private)

c=non visibile (protected)

----- Test incapsulamento per ereditarietà -----

a=10 (public)

b=non visibile (private)

c=30 (protected)
 

EREDITARIETA'

L'Ereditarietà è una tecnica di riuso del codice, questa proprietà permette di creare una nuova classe, ereditando tutti gli elementi public e protected di un'altra classe, chiamata classe padre.
La classe figlia o derivata può contenere nuovi elementi che permettono di specializzare la classe Padre ereditata.

L'Ereditarietà è quasi sempre singola, ovvero una classe figlia può ereditare una sola classe per volta, l'unico linguaggio che permette l'ereditarietà multipla è il C++.

EREDITARIETA': REGOLA DEL COSTRUTTORE PARAMETRIZZATO

In caso di ereditarietà, se nella classe padre è presente un costruttore parametrizzato, i suoi argomenti devono essere alimentati dal costruttore della classe figlia, con il metodo super(...), come mostra l'immagine seguente:

POLIMORFISMO DEI METODI

- OVERLOAD

L'Overload è la proprietà dell'Object Oriented che permette di usare nella stessa classe metodi con lo stesso nome, ma firma diversa.

La firma di un metodo è composta dal nome del metodo più i tipi degli argomenti passati, come mostra l'immagine seguente:

Nella stessa classe possono essere presenti più costruttori con lo stesso nome grazie all'overload, come mostra l'esempio seguente:

Persona() // Costruttore dei default
Persona(nome:string,cognome:string,eta:int) // Costruttore parametrizzato

Firma 1=Persona
Firma 2=Persona+string+string+int

Esempio 3

L'esempio seguente mostra la classe Colori con tre metodi con lo stesso nome, ma firma diversa:
1) colora+string, questo metodo fornisce in output il nome del colore fornito in input come argomento;
2) colora+number, questo metodo fornisce in output il colore corrispondente al progressivo numerico fornito in input come argomento;
3) colora+number+number+number, questo metodo fornisce in output il codice esadecimale del colore corrispondente al codice R,G,B (RED=decimale,GREEN=decimale,BLUE=decimale) fornito in input come argomento.

Attenzione in TypeScript l'overload si gestisce con una funzione con argomenti opzionali e l'uso d'interfacce che permettono di definire le firme consentite, come mostra il codice seguente:

 
class Colori {
    public colora(valoreUno:string):string;
    public colora(valoreUno:number):string;
    public colora(valoreUno:number,valoreDue:number,valoreTre:number):string;
    public colora(valoreUno:string | number,valoreDue?:number,valoreTre?:number):string{
    if(arguments.length==3){
        return  "#"+valoreUno.toString(16)+valoreDue.toString(16)+valoreTre.toString(16);
    } else{
        if (typeof valoreUno=="number") {
            switch(valoreUno){
                case 1:
                    return "rosso";
                    break;
                case 2:
                    return "verde";
                    break;
                case 3:
                    return "bianco";
                    break;
                default:
                    return "nero";
                    break;
            }
        } else{
            return valoreUno;
        }   
    }
  }
} 
// Controller
class Main{
    public static main():void{ 
var colori:Colori=new Colori(); 
console.log(colori.colora("rosso"));
console.log(colori.colora(2));
console.log(colori.colora(200,100,255));
    }
}
// main
Main.main();
 
 
--------------------------------------------------
rosso

verde

#c864ff
 

- OVERRIDE

L'Override è la seconda proprietà del polimorfismo dei metodi, serve per cambiare il comportamento di un metodo ereditato dalla classe Padre, come mostra l'esempio seguente:

Esempio 4

Se la classe ChiSeiSeconda eredita la classe ChiSeiPrima, il comportamento del metodo toString() è lo stesso, sia per un oggetto di tipo ChiSeiPrima, sia per un oggetto di tipo ChiSeiSeconda.

 
class ChiSeiPrima {
    public toString():string{
           return "Sono la classe ChiSeiPrima!" ;
    }
}
class ChiSeiSeconda extends ChiSeiPrima{
}
// Controller
class Main{
    public static main():void{
        var chiSeiPrima=new ChiSeiPrima();
        var chiSeiSeconda=new ChiSeiSeconda();
        console.log(chiSeiPrima.toString());
        console.log(chiSeiSeconda.toString());
    }
}
// main
Main.main();
 
------------------------------------------
Sono la classe ChiSeiPrima!
Sono la classe ChiSeiPrima!
 

Esempio 5

Se sovrascrivete (override) il metodo toString() nella classe ChiSeiSeconda, allora il comportamento del metodo sarà diveso se l'oggetto è di tipo ChiSeiPrima oppure di tipo ChiSeiSeconda.

 
class ChiSeiPrima {
    public toString():string{
           return "Sono la classe ChiSeiPrima!" ;
    }
}
class ChiSeiSeconda extends ChiSeiPrima{
    //Override
    public toString():string{
        return "Sono la classe ChiSeiSeconda!" ;
 }
}
// Controller
class Main{
    public static main():void{
        var chiSeiPrima=new ChiSeiPrima();
        var chiSeiSeconda=new ChiSeiSeconda();
        console.log(chiSeiPrima.toString());
        console.log(chiSeiSeconda.toString());
    }
}
 
----------------------------------------------
Sono la classe ChiSeiPrima!

Sono la classe ChiSeiSeconda!
 
 

- OVERRIDE: OPERATORE SUPER

Quando si sovrascrive (override) un metodo in una classe figlia, per poter utilizzare lo stesso metodo della classe Padre, dovete usare l'operatore super.

Ricordate che quando istanziate un oggetto utilizzando una classe, l'operatore this diventerà il riferimento dell'oggetto creato, mentre super diventerà il riferimento dell'oggetto padre.

 
class ChiSeiPrima {
    public toString():string{
           return "Sono la classe ChiSeiPrima!" ;
    }
}
class ChiSeiSeconda extends ChiSeiPrima{
    //Override
    public toString():string{
        return super.toString()+", Sono la classe ChiSeiSeconda!" ;
 }
}
// main
var chiSeiPrima=new ChiSeiPrima();
var chiSeiSeconda=new ChiSeiSeconda();
console.log(chiSeiPrima.toString());
console.log(chiSeiSeconda.toString());
 
-----------------------------------------------
Sono la classe ChiSeiPrima!

Sono la classe ChiSeiPrima!, Sono la classe ChiSeiSeconda!
 

Continua nella prossima lezione dove vedremo il Polimorfismo degli oggetti e le proprietà architetturali del paradigma Object Oriented.

<< Lezione precedente Lezione successiva >> | Vai alla prima lezione

T U T O R I A L S S U G G E R I T I

EDUCATIONAL GAMING BOOK (EGB) "H2O"

Nell'era dello SMART LEARNING e di PYTHON i libri non si scrivono, ma si sviluppano, in questo modo chi studia, può sperimentare ed apprendere contemporaneamente; un libro con queste caratteristiche lo possiamo definire un Educational Gaming Book (EGB).

"H2O" è un EGB che descrive tutte le caratteristiche dell'acqua, la sostanza formata da molecole di H2O, che attraverso il suo ciclo di vita garantisce la sopravvivenza di tutti gli esseri viventi del Pianeta.

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune e raro, indispensabile per la vita.

Per il DOWNLOAD di "H2O" clicca qui.

2215 Visualizzazioni

TypeScript - Lezione 5: Classi ed Oggetti

Gino Visciano | Skill Factory - 10/07/2020 17:52:46 | in Tutorials

TypeScript pur essendo un linguaggio usato per sviluppare applicazioni lato Front-end, è un linguaggio Object Oriented, quindi è importante conoscere i concetti di Classe ed Oggetto.

Una Classe definisce un tipo di oggetto, in pratica è il codice sorgente dell'oggetto che verrà creato in meomria. L'operazione che trasforma il codice sorgente della classe in oggetto si chiama istanza.

L'esempio seguente mostra come si può istanziare in memoria un oggetto di nome persona usando la classe Persona:

Persona persona=new Persona();

1) Persona  è la classe, rappresenta il tipo di oggetto;
2) persona variabile che contiene l'indirizzo (riferimento)  dell'oggetto istanziato con il comando new;
3) Persona() costruttore, metodo usato per inizializzare l'oggetto creato.

Istanziare significa creare in memoria con il comando new un oggetto, usando come modello la classe. L'indirzzo dove viene allocato l'oggetto, viene assegnato alla variabile dell'istanza, come ad esempio persona.

In fase di progettazione il linguaggio UML (Unified Modeling Language) è molto utile per disegnare un tipo di classe che poi potra essere scritta con qualunque linguaggio di programmazione object oriented (orientato agli oggetti).

L'esempio seguente mostra il diagramma di classe della classe Persona:

Le Classi possono contenere i seguenti elementi:

- attributi
- metodi
- costruttori

Per convenzione i nomi delle Classi iniziano sempre con la lettera maiuscola e se sono composti da più parole, anche le altre parole devono iniziare con la lettera maiuscola.

ATTRIBUTI
Gli attributi sono variabili della classe, per questo motivo sono anche chiamate variabili d'istana, sono le proprietà che si usano per memorizzare i dati che appartengono all'oggetto.

Gli attributi se sono pubblici (+ simbolo UML) possono anche essere usati dai metodi di altre classi, altrimenti se sono privati (- simbolo UML) possono essere usati solo dai metodi della stessa classe.

Se un attributo è protected (# simbolo UML) , in caso di ereditarietà è visibile anche ai metodi della classe figlia.

METODI
I metodi sono funzioni contenute nelle classi, le azioni dei metodi determinano il comportamento degli oggetti.

Nei linguaggi di programmazione ad oggetti, la logica applicativa (istruzioni), può essere implementata solo all'interno dei metodi.

I metodi se sono pubblici (+ simbolo UML) possono essere eseguiti anche dai metodi di altre classi, se sono privati (- simbolo UML) possono essere eseguiti solo dai metodi della stessa classe.

Se un metodo è protected (# simbolo UML) , in caso di ereditarietà è visibile anche ai metodi della classe figlia.

Per convenzione i metodi che hanno il nome che inizia con i prefissi get e set si usano per assegnare o leggere i valori degli attributi privati dell'oggetto a cui appartengono.

Ad esempio, dato che gli attributi della classe Persona sono privati, per gestirli dovete usare i seguenti metodi pubblici:

- setNome
- getNome
- setCognome
- getCognome
- setEta
- getEta

COSTRUTTORI
I costruttori sono metodi speciali usati per istanziare gli oggetti e per inizializzare gli attributi.

Persona persona=new Persona();

Persona() => costruttore.

Per creare un costruttore inTypeScript dovete implementare un metodo che si chiama constructor senza indicare il tipo restituito.

In una classe deve esistere sempre almeno un costruttore senza argomenti, chiamato costruttore di default, come mostra l'esempio seguente:

public constructor(){}

Se necessario il costruttore di default può anche essere usato per inizializzare gli attributi dell'oggetto creato, come mostra l'esempio seguente:

public constructor(){
this.id=1;
this.nome="Marco";
this.cognome="Rossi";
this.dataDiNascita="05/10/1990";
this.luogoDiNascita="Milano";
this.sesso="Maschio";
this.codiceFiscale="mrcrss90r05l268f";
}

Un costruttore con argomenti si chiama costruttore parametrizzato, a differenza di quello di default, permette di passare i valori per inizializzare l'oggetto durante l'istanza, come mostra l'esempio seguente:

Persona persona=new Persona(1,'Paolo','Rossi','10/02/1991','Milano','Maschio','pllrss91a02l234f');

L'esempio seguente mostra come si crea un costruttore parametrizzato:

public constructor(id:number,nome:string,cognome:string,dataDinascita:Date,luogoDiNascita:string,sesso:string,codiceFiscale:string){
this.id=id;
this.nome=nome;
this.cognome=cognome;
this.dataDiNascita=dataDinascita;
this.luogoDiNascita=luogoDiNascita;
this.sesso=sesso;
this.codiceFiscale=codiceFiscale;
}

Esempio 1

L'esempio seguente mostra come creare una classe Persona con gli attributi privati ed i metodi set e get pubblici.
La parola chiave export indica che la classe può essere importata anche in un altro modulo con il comando import.

export class Persona{
    private id:number;
    private nome:string;
    private cognome:string;
    private dataDiNascita:Date;
    private luogoDiNascita:string;
    private sesso:string;
    private codiceFiscale:string;
    public setId(id:number):void{
        this.id=id;
    }
    public getId():number{
        return this.id;
    }
    public setNome(nome:string):void{
        this.nome=nome;
    }
    public getNome():string{
        return this.nome;
    }
    public setCognome(cognome:string):void{
        this.cognome=cognome;
    }
    public getCognome(){
        return this.cognome;
    }
    public setDataDiNascita(dataDiNascita:Date):void{
        this.dataDiNascita=dataDiNascita;
    }
    public getDataDiNascita():Date{
        return this.dataDiNascita;
    }
    public setLuogDiNascita(luogoDiNascita:string):void{
        this.luogoDiNascita=luogoDiNascita;
    }
    public getluogoDiNascita():string{
        return this.luogoDiNascita;
    }
    public setSesso(sesso:string):void{
        this.sesso=sesso;
    }
    public getSesso():string{
        return this.sesso;
    }
    public getCodiceFiscale():string{
        return this.codiceFiscale;
    }
    public setCodiceFiscale(codiceFiscale:string):void{
        this.sesso=codiceFiscale;
    }
    public toString():string{
        let options: Intl.DateTimeFormatOptions = {
            day: "numeric", month: "numeric", year: "numeric"
        };
           return this.id+","+this.nome+","+this.cognome+","+
                  this.dataDiNascita.toLocaleDateString("en-GB", options)

                  +","+this.luogoDiNascita+","+this.sesso+","+this.codiceFiscale;
    }
    public equals(obj:Object):boolean{
        if (this.toString()!=obj.toString()){
            return false;
        }
        return true;
    }
        // Sovraccarico del costruttore (Overload)
        public constructor();
        public constructor(id:number,nome:string,cognome:string,dataDinascita:Date,
                           luogoDiNascita:string,

                           sesso:string,codiceFiscale:string);
        public constructor(id?:number,nome?:string,cognome?:string,dataDinascita?:Date,

                           luogoDiNascita?:string,sesso?:string,codiceFiscale?:string){
            if(arguments.length>0){
                this.id=id;
                this.nome=nome;
                this.cognome=cognome;
                this.dataDiNascita=dataDinascita;
                this.luogoDiNascita=luogoDiNascita;
                this.sesso=sesso;
                this.codiceFiscale=codiceFiscale;
            }
 

        }    
}

 

SOVRACCARICO DEL COSTRUTTORE IN TYPESCRIPT (OVERLOAD)

L' overload è la proprietà dei linguaggi di programmazione ad oggetti che permettere l'implementazione nella stessa classe di metodi con lo stesso nome, ma firma diversa.

Si definisce firma il nome di un metodo più i tipi degli argomenti passati in input.

Ad esempio, le firme dei costruttori della classe Persona, sono le seguenti:

1) constructor
2) constructor, number, string, string, Date, string, string, string

In TypeScript l'overlad si può applicare usando una funzione con argomenti opzionali che in base al numero di argomenti passati in input assume un comportamento diverso.
Per conoscere quali e quanti argomenti vengono passati ad una funzione con argomenti opzionali potete usare l'interfaccia arguments.
Per definire le firme consentite per eseguire la funzione con argomenti opzionali, dovete indicare le interfacce corrispondenti, come mostra l'esempio seguente:

// Interfaccia che definisce la firma del costruttore di default
public constructor();
// Interfaccia che definisce la firma del costruttore parametrizzato
public constructor(id:number,nome:string,cognome:string,dataDinascita:Date,luogoDiNascita:string,sesso:string,codiceFiscale:string);
// Funzione con argomenti opzionali, il punto indicativo "?" rende il parametro facoltativo
public constructor(id?:number,nome?:string,cognome?:string,dataDinascita?:Date,luogoDiNascita?:string,sesso?:string,codiceFiscale?:string){
if(arguments.length>0){
this.id=id;
this.nome=nome;
this.cognome=cognome;
this.dataDiNascita=dataDinascita;
this.luogoDiNascita=luogoDiNascita;
this.sesso=sesso;
this.codiceFiscale=codiceFiscale;
}
}

Esempio 2

L'esempio seguente utilizza la classe Persona, creata nell'esempio precedente, per gestire un array di persone.

L'inserimento dei dati avviene attraverso il Form seguente che permette di aggiungere una persona all'array, con il pulsante "Salva" e visualizzare l'elenco di tutte le persone inserite con il pulsante "Elenco".

Per ottenere il Form dovete utilizzare il codice HTML seguente:

 
<!--gui_persona.html-->
<html>
<head>
    <script lang="JavaScript" src="persone.js"></script>
</head>
<body>
<table>
<form>
<tr><th>PERSONA</th><th></th></tr>
<tr><td>Nome:</td><td><input type="text" id="nome" value=""></td></tr>
<tr><td>Cognome:</td><td><input type="text" id="cognome" value=""></td></tr>
<tr><td>Data di nascita:</td><td><input type="text" id="data" value=""></td></tr>
<tr><td>Luogo di nascita:</td><td><input type="text" id="luogo" value=""></td></tr>
<tr><td>Sesso:</td><td><input type="text" id="sesso" value=""></td></tr>
<tr><td>Codice Fiscale:</td><td><input type="text" id="cf" value=""></td></tr>
<tr><td></td><td><input type="button" onclick="salva();" value="Salva"> 

<input type="button" onclick="addElenco();" value="Elenco"> <input type="reset" 
       value="reset"></td></tr>
</form>
</table>
--- Elenco Persone ---
<div id="elenco"></div>
</body>
</html>
 

Il tag <script lang="JavaScript" src="persone.js"></script> permette d'importare il modulo JavaScript, risultato della compilazione con tsc del codice TypeScript seguente:

// persone.ts
import {Persona} from "./persona";
var persone:Persona[]=[];  //var persone:Persona[]=[]
var id:number=0;
 
// Funzione associata al metodo onclick del pulsante Salva
function salva():void{
    var nome:string=(<HTMLInputElement>document.getElementById("nome")).value;
    var cognome:string=(<HTMLInputElement>document.getElementById("cognome")).value;
    var strData:string=(<HTMLInputElement>document.getElementById("data")).value;
    var luogo:string=(<HTMLInputElement>document.getElementById("luogo")).value;
    var sesso:string=(<HTMLInputElement>document.getElementById("sesso")).value;
    var cf:string=(<HTMLInputElement>document.getElementById("cf")).value;
    var data:Date=new Date(strData);
    id++;
    persone.push(new Persona(id,nome,cognome,data,luogo,sesso,cf));
 }
 
// Funzione associata al metodo onclick del pulsante Elenco function addElenco() { 
    // crea un nuovo elemento div
    // gli assegna un contenuto
    var currentDiv = document.getElementById("elenco");  
    persone.forEach((persona:Persona)=>{
     // aggiungi il nodo di testo al div appena creato
    var newDiv = document.createElement("div"); 
     newDiv.style.color="blue";
     newDiv.style.fontSize="20";
     var newContent = document.createTextNode(persona.toString()); 
     newDiv.appendChild(newContent);  
     document.body.insertBefore (newDiv, currentDiv); 
     })
   // aggiungi l'elemento appena creato e il suo contenuto nel DOM
 }
 

L'immagine seguente mostra il Form con l'elenco delle persone inserite:

INTERFACCE

In TypeScript un'interfaccia può essere usata sia per definire un tipo di dato multivalore che serve ad esempio per creare un oggetto JSON, sia per definire l'elenco dei metodi astratti da implementare in una classe. In questa lezione ci occuperemo delle interfacce che contengono metodi astratti.

Per comprendere come utilizzare un'interfaccia che contiene metodi astratti, facciamo l'esempio di una classe CRUD che usa come repository array di tipo Persona.
Come è nota la classe per svolgere il proprio compito deve garantire le seguenti operazioni:

1) Inserimento (Create);
2) Lettura (Read), di una o tutte le persone memorizzare nel repository;
3) Modifica (Update);
4) Cancellazione (Delete).

L'esempio seguente mostra come utilizza un'interfaccia come modello per implementare in una classe che deve svolgere le operazioni previste dal CRUD.

Esempio 3

 
//personacrud.ts
import {Persona} from './persona'
interface IPersonaCRUD{
    inserisci(persona:Persona):boolean;
    modifica(indice:number,persona:Persona):boolean;
    cancella(indice:number):boolean;
    leggi(indice:number):Persona;
    leggi():Persona[];
}
export class PersonaCRUD implements IPersonaCRUD{
    private persone:Persona[];
    inserisci(persona: Persona): boolean {
       this.persone.push(persona);
       return true;
    }
    modifica(indice:number, persona: Persona): boolean {
        this.persone[indice]=persona;
        return true;
    }
    cancella(indice: number): boolean {
        this.persone.splice(indice,1);
        return true;  
    }
    // Overload (polimorfismo dei metodi)
    leggi(indice: number): Persona;
    leggi(): Persona[];
    leggi(indice?: number): Persona | Persona[] {
        if (arguments.length==1){
            return this.persone[indice];
        } else{
        return this.persone;
        }
    }
}
 

CLASSI ASTRATTE

Nella programmazione ad oggetti una classe astratta è un pattern, perché serve per implementare una soluzione applicativa.
Le classi astratte permettono d'implementare metodi che usano il risultato di uno o più metodi astratti, di cui non ne conosciamo ancora il comportamento.
Naturalmente le classi astratte non possono istanziare oggetti, perché contengono sia metodi implementati, sia metodi astratti e quindi devono necessariamente essere ereditate.
La classe figlia verrà utilizzata per implementare il comportamento dei metodi astratti della classe padre.

Esempio 4

//geometria_astratta.ts
//Classe astratta che può essere solo ereditata
abstract class FiguraGeometrica{
    // Attributo di tipo privato, visibile solo nell'oggetto, globalmente.
    private tipoFigura:string;
    public getInfoFigura():string[]{
        var infoFigura:string[]=[];
        infoFigura.push("Tipo figura:"+this.tipoFigura);
        // Uso il risultato dei metodi astratti
        // che verranno implementati nella classe figlia 
        infoFigura.push(this.getCaratteristiche());
        infoFigura.push("Perimetro  :"+this.getPerimetro());
        infoFigura.push("Area       :"+this.getArea());
        return infoFigura;
    }
    getTipoFigura():string{
        return this.tipoFigura;
    }
    // metodi astratti
    abstract getCaratteristiche():string;
    abstract getPerimetro():number;
    abstract getArea():number;
    // Costruttore alimentato dalla classe figlia
    // viene utilizzato per indicare il tipo di figura geometrica
    public constructor(tipoFigura:string){
        this.tipoFigura=tipoFigura;
    }
}
class Cerchio extends FiguraGeometrica{
    // Attraverso il costruttore assegno all'attributo raggio il suo valore
    public constructor(private raggio:number){
        // Il metodo super esegue il costruttore del padre
        // e gli passa il valore "Cerchio"
        super("Cerchio");
    }
    // Implemento i metodi astratti ereditati
    public getCaratteristiche():string{
        return "Raggio     :"+this.raggio;
    }
    public getPerimetro(): number {
        return 2*Math.PI*this.raggio;
    }
    public getArea(): number {
        return Math.pow(this.raggio,2)*Math.PI;
    }
}
class Quadrato extends FiguraGeometrica{
    // Attraverso il costruttore assegno all'attributo latoA il suo valore   
    public constructor(private latoA:number){
        // Il metodo super esegue il costruttore del padre
        // e gli passa il valore "Cerchio"
        super("Quadrato");
    }
    // Implemento i metodi astratti ereditati
    public getCaratteristiche():string{
        return "Lato       :"+this.latoA;
    }
    public getPerimetro(): number {
        return 4*this.latoA;
    }
    public getArea(): number {
        return Math.pow(this.latoA,2);
    }
}
class Rettangolo extends FiguraGeometrica{
    // Attraverso il costruttore assegno agli attributi 
    // latoA e latoB i loro valori   
    public constructor(private latoA:number,private latoB:number){
        // Il metodo super esegue il costruttore del padre
        // e gli passa il valore "Cerchio"
        super("Rettangolo");
    }
    // Implemento i metodi astratti ereditati
    public getCaratteristiche():string{
        return "Lati       :"+this.latoA+", "+this.latoB;
    }
    public getPerimetro(): number {
        return (2*this.latoA)+(2*this.latoB);
    }
    public getArea(): number {
        return this.latoA*this.latoB;
    }
}
class Triangolo extends FiguraGeometrica{
    // Attraverso il costruttore assegno agli attributi 
    // latoA, latoB e latoC i loro valori   
    public constructor(private latoA:number,private latoB:number,private latoC:number){
        // Il metodo super esegue il costruttore del padre
        // e gli passa il valore "Cerchio"
        super("Triangolo");
    }
    // Implemento i metodi astratti ereditati
    public getCaratteristiche():string{
        return "Lati       :"+this.latoA+", "+this.latoB+", "+this.latoC;
    }
    public getPerimetro(): number {
        return this.latoA+this.latoB+this.latoC;
    }
    public getArea(): number {
        let sp=this.getPerimetro()/2;
        let area=Math.sqrt(sp*(sp-this.latoA)*(sp-this.latoB)*(sp-this.latoC))
        return area;
    }
}
class Geometria {
    /* Dichiaro un array di tipo FiguraGeometrica che 
    può contenere cerchi,quadrati, rettangoli e triangoli (Upcasting).  
    Questo è possibile solo perché le classi cerchio,quadrato,
    rettangolo e triangolo sono diventate simili, perché hanno ereditato tutte
    la classe FiguraGeometrica (Polimorfismo degli oggetti)*/
    private figureGeometriche:FiguraGeometrica[]=[]
    // Il metodo add grazie all'Upcasting può ricevere anche 
    // riferimenti di oggetti di tipo cerchio,quadrato, rettangolo e triangolo.
    public add(figuraGeometrica:FiguraGeometrica):void{
        this.figureGeometriche.push(figuraGeometrica);
    }
    public stampa(){
        this.figureGeometriche.forEach(figuraGeometrica =>
            figuraGeometrica.getInfoFigura().forEach(info => console.log(info)))
    }
}
class Main{
public static main():void{
    var cerchio:FiguraGeometrica=new Cerchio(10);
    var quadrato:FiguraGeometrica=new Quadrato(20);
    var rettangolo:FiguraGeometrica=new Rettangolo(10,20);
    var triangolo:FiguraGeometrica=new Triangolo(5,10,10);
    var geometria:Geometria=new Geometria();
    geometria.add(cerchio);
    geometria.add(quadrato);
    geometria.add(rettangolo);
    geometria.add(triangolo);
    geometria.stampa();
}    
}    
//Main
Main.main();
 
-----------------------------------------------------------------------------------
Tipo figura:Cerchio

Raggio     :10

Perimetro  :62.83185307179586

Area       :314.1592653589793

Tipo figura:Quadrato

Lato       :20

Perimetro  :80

Area       :400

Tipo figura:Rettangolo

Lati       :10, 20

Perimetro  :60

Area       :200

Tipo figura:Triangolo

Lati       :5, 10, 10

Perimetro  :25

Area       :24.206145913796355
 

CLASSI SINGLETON

Nella programmazione ad oggetti una classe singleton è un pattern, perché serve per implementare una soluzione applicativa.
Le classi singleton permettono d'istanziare una sola ricorrenza di un oggetto per evitare duplicati.
Di solito le classi singleton si usano per creare i repository, array che memorizzano oggetti.

Esempio 5

 
//singleton.ts
interface IRepository{
    inserisci(obj:Object):boolean;
    modifica(indice:number,obj:Object):boolean;
    cancella(indice:number):boolean;
    leggi(indice:number):Object;
    leggi():Object[];
}
export class Repository implements IRepository{
    // Poiché questa classe non può essere istanziata
    // la variabile che deve contenere il riferimento del singolo
    // oggetto istanziato deve istanziarsi da sola con l'operatore static
    private static instance:Repository=null;
    private repository:Object[]=[];
    // Poiché questa classe non può essere istanziata, il metodo 
    // getRepository() che istanzia l'unica ricorrenza dell'oggetto 
    // di tipo Repository deve istanziarsi da solo con l'operatore static
    public static getRepository():Repository{
        // Se instance è null viene istanziato l'oggetto di tipo Repository
        // altrimento l'oggetto già esiste e viene restituito il suo riferimento 
        if(this.instance==null){
            //Il costruttore può essere eseguito anche se privato
            //perché getRepository() è un metodo della classe
            this.instance=new Repository(); 
        }
        return this.instance;
    }
    inserisci(obj: Object): boolean {
       this.repository.push(obj);
       return true;
    }
    modifica(indice:number, obj: Object): boolean {
        this.repository[indice]=obj;
        return true;
    }
    cancella(indice: number): boolean {
        this.repository.splice(indice,1);
        return true;  
    }
    // Overload (polimorfismo dei metodi)
    leggi(indice: number): Object;
    leggi(): Object[];
    leggi(indice?: number): Object | Object[] {
        if (arguments.length==1){
            return this.repository[indice];
        } else{
        return this.repository;
        }
    }
    // Il costruttore di una classe singleton è privato
    // per non permettere d'istanziare oggetti
    private constructor(){}
}
// Model utente
class Utente{
    public constructor(private id:number,private nome:string,
                       private cognome:string,eta:number,private sesso:boolean){}
}
// Classe Controller
class Main{
    public static main(){
        var utentiUno=Repository.getRepository();
        var utentiDue=Repository.getRepository();
        utentiUno.inserisci(new Utente(1,"Mara","Rossi",30,true));
        utentiUno.inserisci(new Utente(2,"Roberta","Verdi",25,true));
        utentiUno.inserisci(new Utente(3,"Carlo","Bianchi",50,false));
        utentiDue.inserisci(new Utente(4,"Ugo","Rossini",20,false));
        utentiDue.inserisci(new Utente(5,"Raffaele","Palomba",25,false));
        utentiDue.inserisci(new Utente(6,"Corrado","Belvedere",50,false));
        console.log("---------- Prima istanza di Repository ----------");
        utentiUno.leggi().forEach(utente => console.log(utente));
        console.log("---------- Seconda istanza di Repository ----------");
        utentiDue.leggi().forEach(utente => console.log(utente));
    }
}
// main
Main.main();
 
------------------------------------------------------------------------------------
---------- Prima istanza di Repository ----------

Utente { id: 1, nome: 'Mara', cognome: 'Rossi', sesso: true }

Utente { id: 2, nome: 'Roberta', cognome: 'Verdi', sesso: true }

Utente { id: 3, nome: 'Carlo', cognome: 'Bianchi', sesso: false }

Utente { id: 4, nome: 'Ugo', cognome: 'Rossini', sesso: false }

Utente { id: 5, nome: 'Raffaele', cognome: 'Palomba', sesso: false }

Utente { id: 6, nome: 'Corrado', cognome: 'Belvedere', sesso: false }

---------- Seconda istanza di Repository ----------

Utente { id: 1, nome: 'Mara', cognome: 'Rossi', sesso: true }

Utente { id: 2, nome: 'Roberta', cognome: 'Verdi', sesso: true }

Utente { id: 3, nome: 'Carlo', cognome: 'Bianchi', sesso: false }

Utente { id: 4, nome: 'Ugo', cognome: 'Rossini', sesso: false }

Utente { id: 5, nome: 'Raffaele', cognome: 'Palomba', sesso: false }

Utente { id: 6, nome: 'Corrado', cognome: 'Belvedere', sesso: false }
 

Nella prossima lezione approfondiamo il paradigma Object Oriented.

<< Lezione precedente Lezione successiva >> | Vai alla prima lezione

T U T O R I A L S S U G G E R I T I

EDUCATIONAL GAMING BOOK (EGB) "H2O"

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune e raro, indispensabile per la vita.

Per il DOWNLOAD di "H2O" clicca qui.

7342 Visualizzazioni

TypeScript - Lezione 4: Tipi di Funzioni

Gino Visciano | Skill Factory - 03/07/2020 16:33:54 | in Tutorials

In questa lezione vedremo tutti i tipi di funzioni che si possono utilizzare in TypeScript.

Per creare una funzione in TypeScript dovete utilizzare la sintassi seguente:

function nomeFunzione(elenco argomenti):tipoValoreRestituito {
// Codice funzione
}

Se la funzione si comporta come una procedura , perché non restituisce nessun valore, come tipoValoreRestituito dovete usare il tipo void.

Ad esempio la funzione contaFinoADieci è di tipo void, perché è una procedura che visualizza un numero da 1 fino a 10:

function contaFinoADieci():void {
    for(let x:number=1;x<=10;x++){
        console.log(x);
    }
}
// Esegue contaFinoADieci
contaFinoADieci();
 

La parola chiave let indica che la variabile x può essere usata solo nel blocco for, al di fuori del blocco for non è visibile. Per usare la x anche al di fuori del blocco for dovete usare la parola chiave var.

Anche la funzione contaFinoAMax è una procedura, ma attraverso l'argomento max permette di visualizzare un numero da 1 ad un valore predefinito.

function contaFinoAMax(max:number):void {
    for(let x:number=1;x<=max;x++){
        console.log(x);
    }
}
// Esegue contaFinoAMax e conta fino a 20
contaFinoAMax(20);
 

Quando la funzione restituisce un valore attraverso il comando return, il tipoValoreRestituito deve essere dello stesso tipo, come mostra l'esempio seguente:

function divisione(dividendo:number, divisore:number):number {
    var risultato:number;
    risultato=dividendo/divisore;
    return risultato;
}
 

DIFFERENZA TRA FUNZIONI CON PASSAGGIO PER VALORE E PASSAGGIO PER RIFERIMENTO

Le funzioni sono task di programmazione che eseguono operazioni specifiche quando vengono eseguite.

Se necessario possono ricevere argomenti in input e restituire un argomento come output, naturalmente se non sono di tipo void.

L'immagine seguente mostra il comportamento di una funzione che riceve n argomenti in ingresso (input) e ne restituisce uno in uscita (output).

Block box significa che se una funzione riceve in input gli stessi argomenti, fornisce sempre lo stesso risultato come output.

Gli argomenti delle funzioni, sia in input, sia in output, possono essere passati per valore oppure per riferimento.

Quando passate un argomento per valore state passando il contenuto di una variabile.

Quando il passaggio avviene per riferimento state passando l'indirizzo di un array oppure di un oggetto in cui sono contenuti i valori.

Questa differenza è molto importante perché se il passaggio degli argomenti avviene per valore, utilizzate una copia dei valori originali, mentre se il passaggio degli argomenti avviene per riferimento, attraverso l'indirizzo lavorate direttamente con i valori degli array o degli oggetti originali.

L'immagine seguente descrive un esempio di passaggio per valore, in questo caso gli argomenti della funzione divisione ricevono una copia del contenuto delle variabili dividendo e divisore.

L'immagine seguente descrive un esempio di passaggio per riferimento, in questo caso l'argomento della funzione calcolaQuadrato riceve una copia del riferimento (indirizzo) dell'array di interi numeri, attraverso il riferimento può modificare direttamente il contenuto dell'array.

Esempio 1

L'esempio seguente mostra che il passaggio per valore permette di copiare il contenuto della variabile originale nella variabile indicata come argomento. Modificando il contenuto della variabile indicata come argomento della funzione, il contenuto della variabile originale non cambia:

// passaggio_per_valore.ts
function modificaValore(copiaDiA:number){
    console.log("Funzione modificaValore, valore passato:"+copiaDiA);
    //Modifico copiaDiA;
    copiaDiA=20;
    console.log("Funzione modificaValore, valore modificato:"+copiaDiA);
}
//Modulo
var a:number=10;
console.log("Modulo, valore passato alla funzione modificaValore:"+a);
modificaValore(a)
console.log("Modulo, valore dopo l'esecuzione della funzione modificaValore:"+a);
------------------------------------------------------------------------------------
Modulo, valore passato alla funzione modificaValore:10

Funzione modificaValore, valore passato:10

Funzione modificaValore, valore modificato:20

Modulo, valore dopo l'esecuzione della funzione modificaValore:10
 

Con il passaggio per valore, per modificare il contenuto della variabile originale dovete usare il comando return, come mostra l'esempio seguente:

Esempio 2

 
// passaggio_per_valore_bis.ts
function modificaValore(copiaDiA:number):number{
    console.log("Funzione modificaValore, valore passato:"+copiaDiA);
    //Modifico copiaDiA;
    copiaDiA=20;
    console.log("Funzione modificaValore, valore modificato:"+copiaDiA);
    return copiaDiA;
}
//Modulo
var a:number=10;
console.log("Modulo, valore passato alla funzione modificaValore:"+a);
a=modificaValore(a)
console.log("Modulo, valore dopo l'esecuzione della funzione modificaValore:"+a);
------------------------------------------------------------------------------------
Modulo, valore passato alla funzione modificaValore:10

Funzione modificaValore, valore passato:10

Funzione modificaValore, valore modificato:20

Modulo, valore dopo l'esecuzione della funzione modificaValore:20
 

Esempio 3

L'esempio seguente mostra che il passaggio per riferimento permette di copiare l'indirizzo di un array o di un oggetto nella variabile indicata come argomento. Attraverso il riferimento è possibile modificare direttamente il valore della variabile originale:

 
// passaggio_per_riferimento.ts
function modificaValore(rifObjJson:{a:number}){
    console.log("Funzione modificaValore, valore passato:"+rifObjJson.a);
    //Modifico copiaDiA;
    rifObjJson.a=20;
    console.log("Funzione modificaValore, valore modificato:"+rifObjJson.a);
}
//Modulo
//Dichiarazione di una variabile in cui memorizzare il riferimento di 
//un oggetto di tipo Json
var objJson:{a:number};
//Creazione di un oggetto di tipo Json assegnando il valore 10 all'attributo a 
objJson={a:10}; 
console.log("Modulo, valore passato alla funzione modificaValore:"+objJson.a);
//Passo alla funzione il riferimento (indirizzo) dell'oggetto objJson.
modificaValore(objJson);
console.log("Modulo, valore dopo l'esecuzione della funzione modificaValore:"+objJson.a);
-----------------------------------------------------------------------------------------
Modulo, valore passato alla funzione modificaValore:10

Funzione modificaValore, valore passato:10

Funzione modificaValore, valore modificato:20

Modulo, valore dopo l'esecuzione della funzione modificaValore:20
 

FUNZIONI ANONIME

In TypeScript le funzioni possono essere passate come argomenti ad altre funzioni, utilizzando il loro riferimento.

In questo caso non passate un'informazione, ma un comportamento.

Una funzione che riceve in input il riferimento di una funzione viene chiamata funzione superiore.

Le funzioni anonime sono funzioni che non hanno un nome e possono essere eseguite attraverso il loro riferimento.

Questo tipo di funzione può anche essere passata come argomento ad funzione superiore.

L'esempio seguente mostra come si crea ed esegue una funzione anonima, utilizzando il metodo log che in questo caso è la funzione superiore.

 
var rifPerimetro=function (latoA:number,latoB:number,latoC:number):number {
    return latoA+latoB+latoC;
}
console.log(rifPerimetro(10,15,20));
----------------------------------------------------------------------------
45
 

FUNZIONI LAMBDA

Le funzioni lambda sono particolari tipi di funzioni anonime, quindi anch'esse possono essere passate come argomenti alle funzione superiori.

La sintassi per creare le funzioni lambda è leggermente diversa da quella usata per le funzioni anonime, perché al posto della parola chiave function si usa l'operatore freccia "=>", come mostra l'esempio seguente:

var rifPerimetro=(latoA:number,latoB:number,latoC:number):number => {
    return latoA+latoB+latoC;
}
console.log(rifPerimetro(10,15,20));

---------------------------------------------------------------------------------------
45

Attenzione, le funzioni lambda e le funzioni anonime, se sono composte da una sola riga di comando, possono essere implementate senza usare le parentesi graffe e senza indicare il return, come mostra l'esempio seguente:

var rifPerimetro=(latoA:number,latoB:number,latoC:number):number => latoA+latoB+latoC;
console.log(rifPerimetro(10,15,20));
---------------------------------------------------------------------------------------
45

 

FUNZIONI RICORSIVE

In TypeScript le funzioni sono ricorsive, cioè possono chiamare se stesse. Questa caratteristica è molto importante perché la ricorsività permette di simulare il comportamento di un ciclo while al contrario.

Per capire l'utilità della ricorsività delle funzioni facciamo alcuni esempi.

Esempio 4

Visualizzare il contenuto di una array d'interi partendo dall'ultimo valore al primo.

A) Soluzione utilizzando un while.

//inverti_interi.ts
var interi:number[]=[2,10,25,8,80,30,70,5,15,90];
var indice:number=interi.length-1;
while(indice>=0){
    console.log(interi[indice]);
    indice--;
}
-----------------------------------------------------
90

15

5

70

30

80

8

25

10

2

B) Soluzione utilizzando una funzione ricorsiva.

 
//inverti_interi_ricorsivo.ts
function inverti_interi(indice:number){
  if(indice<interi.length-1){
      inverti_interi(indice+1);
   }
   console.log(indice+","+interi[indice]);
}
 
// main
var interi:number[]=[2,10,25,8,80,30,70,5,15,90];
inverti_interi(0);
-------------------------------------------------------
9,90

8,15

7,5

6,70

5,30

4,80

3,8

2,25

1,10

0,2
 

Esempio 5

Calcolare il fattoriale di un numero intero N.
Il fattoriale di un numero intero N è dato dal prodotto di tutti i valori compresi tra 1 ad N, ad esempio il fattoriale di 3 = 1 * 2 * 3 = 6.

A) Soluzione utilizzando un while.

 
//fattoriale_while.ts
function fattoriale(numero:number):number{
var totale=1;
while(numero>1){
    totale*=numero;
    numero--;
}
return totale;
}
// main
console.log(fattoriale(5));
-------------------------------------------------
120
 

B) Soluzione utilizzando una funzione ricorsiva.

 
//fattoriale.ts
function fattoriale(numero:number):number{
    if(numero>1){
        numero*=fattoriale(numero-1);
    }else {

        return 1;
    }
    return numero;
}
 
// main
console.log(fattoriale(5));
-------------------------------------------------
120
 

Attenzione, per convenzione, il fattoriale di 0 = 1.

 
//fattoriale.ts
function fattoriale(numero:number):number{
    if(numero>1){
        numero*=fattoriale(numero-1);
    }else {
        return 1;
    }
    return numero;
}
// main
console.log(fattoriale(0));
-------------------------------------------------
1
 
 

FUNZIONI CON ARGOMENTI OPZIONALI

In TypeScript si possono creare funzioni con argomenti opzionali, per rendere l'argomento di una funzione opzionale basta inserire un "?" dopo il nome dell'argomento, come mostra l'esempio seguente:

function infoFiguraGeometrica(tipoFigura:string, valoreUno:number,valoreDue?:number,valoreTre?:number){...}

La dichiarazione della funzione infoFiguraGeometrica indica che gli argomenti tipoFigura:string, valoreUno:number, sono obbligatori e gli argomenti valoreDue?:number,valoreTre?:number sono opzionali.

L'attributo length dell'interfaccia arguments permette do conoscere il numero di argomenti passati ad una funzione con argomenti opzionali.

Esempio 6

 
// opzionali_01.ts
function infoFiguraGeometrica(tipoFigura:string, valoreUno:number,valoreDue?:number,valoreTre?:number):void{
var scelta:number=arguments.length;
var perimetro:number,area:number;
// Controllo se tipoFigura è corretto altrimenti controllo se i valori sono maggiori
// di zero
// Scelta=5 imposta il default che corrisponde ad un errore
if(tipoFigura.toLowerCase()!="cerchio" && tipoFigura.toLowerCase()!="quadrato" && 
   tipoFigura.toLowerCase()!="rettangolo" && tipoFigura.toLowerCase()!="triangolo"){
       scelta=5;
}else if(arguments.length==2 && valoreUno<=0){
    scelta=5;
}else if(arguments.length==3 && (valoreUno<=0 || valoreDue<=0)){
    scelta=5
}else if(arguments.length==4 && (valoreUno<=0 || valoreDue<=0 || valoreTre<=0)){
    scelta=5
}
//Controllo se i lati del triangolo sono coerenti altrimenti imposto la scelta=5
if(scelta!=5 && arguments.length==4){
    if(valoreUno>=valoreDue+valoreTre || valoreUno<=valoreDue-valoreTre){
        scelta=5;
    } else if(valoreDue>=valoreUno+valoreTre || valoreDue<=valoreUno-valoreTre){
        scelta=5;
    } else if(valoreTre>=valoreDue+valoreUno || valoreTre<=valoreDue-valoreUno){
        scelta=5;
    } 
}
switch(scelta){
    case 2:
        if(tipoFigura.toLowerCase()=="cerchio"){
            perimetro=2*Math.PI*valoreUno;
            area=Math.pow(valoreUno,2)*Math.PI;
            console.log("Tipo figura:"+tipoFigura);
            console.log("Raggio     :"+valoreUno);
            console.log("Perimetro  :"+perimetro);
            console.log("Area       :"+area);
        }   else{
            perimetro=4*valoreUno;
            area=Math.pow(valoreUno,2);
            console.log("Tipo figura:"+tipoFigura);
            console.log("Lato       :"+valoreUno);
            console.log("Perimetro  :"+perimetro);
            console.log("Area       :"+area);
        }
        break;
    case 3:
        perimetro=(2*valoreUno)+(2*valoreDue);
        area=valoreUno*valoreDue;
        console.log("Tipo figura:"+tipoFigura);
        console.log("Lati       :"+valoreUno,valoreDue);
        console.log("Perimetro  :"+perimetro);
        console.log("Area       :"+area);
    break;
    case 4:
        perimetro=valoreUno+valoreDue+valoreTre;
        let sp=perimetro/2;
        area=Math.sqrt(sp*(sp-valoreUno)*(sp-valoreDue)*(sp-valoreTre));
        console.log("Tipo figura:"+tipoFigura);
        console.log("Lati       :"+valoreUno,valoreDue,valoreTre);
        console.log("Perimetro  :"+perimetro);
        console.log("Area       :"+area);
        break;
        default:
            console.log("Errore: Gli argomenti forniti alla funzione non sono esatti")
    } 
}
// main
console.log("----- Gestione Figure Geometriche -----");
infoFiguraGeometrica("Cerchio",10);
console.log("---------------------------------------");
infoFiguraGeometrica("Quadrato",20);
console.log("---------------------------------------");
infoFiguraGeometrica("Rettangolo",10,5);
console.log("---------------------------------------");
infoFiguraGeometrica("Triangolo",10,20,20);


----------------------------------------------------------------------
Tipo figura:Cerchio

Raggio     :10

Perimetro  :62.83185307179586

Area       :314.1592653589793

---------------------------------------

Tipo figura:Quadrato

Lato       :20

Perimetro  :80

Area       :400

---------------------------------------

Tipo figura:Rettangolo

Lati       :10 5

Perimetro  :30

Area       :50

---------------------------------------

Tipo figura:Triangolo

Lati       :10 20 20

Perimetro  :50

Area       :96.82458365518542
 

Un argomento opzionale a cui non viene passato nulla contiene il valore undefined, come mostra l'esempio seguente:

 
//opzionali_02.ts
function infoArgomenti(a?:number,b?:number){
    console.log("Argomenti:"+arguments.length)
    if(a==undefined && b==undefined){
      console.log("Non hai fornito argomenti");
      console.log("a=" +a);
      console.log("b=" +b);
  } else if (b==undefined){
        console.log("Hai fornito un solo argomento");
        console.log("a=" +a);
        console.log("b=" +b);
    } else{
        console.log("Hai fornito due argomenti");
        console.log("a=" +a);
        console.log("b=" +b);
    }
}
// main
infoArgomenti();
infoArgomenti(10);
infoArgomenti(10,20);
 
---------------------------------------------------------
Argomenti:0

Non hai fornito argomenti

a=undefined

b=undefined

Argomenti:1

Hai fornito due argomenti

a=10

b=undefined

Argomenti:2

Hai fornito due argomenti

a=10

b=20
 

Per passare ad una funzione con argomenti opzionali, gli argomenti richiesti, utilizzando i nomi degli argomenti, dovete usare un'interfaccia e passare gli argomenti alla funzione con la notazione JSON, come mostra l'esempio seguente:

 
//opzionali_03.ts
interface Parametri{
    a?:number;
    b?:number;
}
function infoArgomenti(parametri:Parametri){
    if(parametri.a==undefined && parametri.b==undefined){
      console.log("Non hai fornito argomenti {}");
      console.log("a=" +parametri.a);
      console.log("b=" +parametri.b);
  } else if (parametri.a==undefined){
        console.log("Hai fornito un solo l'argomento a {b:20}");
        console.log("a=" +parametri.a);
        console.log("b=" +parametri.b);
    }else if (parametri.b==undefined){
        console.log("Hai fornito un solo l'argomento b {a:10}");
        console.log("a=" +parametri.a);
        console.log("b=" +parametri.b);
    } else{
        console.log("Hai fornito due argomenti {a:10,b:20}");
        console.log("a=" +parametri.a);
        console.log("b=" +parametri.b);
    }
}
// main
infoArgomenti({});
infoArgomenti({a:10});
infoArgomenti({b:20});
infoArgomenti({a:10,b:20});
---------------------------------------------------------------------

Non hai fornito argomenti {}

a=undefined

b=undefined

Hai fornito un solo l'argomento b {a:10}

a=10

b=undefined

Hai fornito un solo l'argomento a {b:20}

a=undefined

b=20

Hai fornito due argomenti {a:10,b:20}

a=10

b=20
 

FUNZIONI CON ARGOMENTI REST

In TypeScript un altro modo per creare funzioni con argomenti opzionali è quello di utilizzare l'operatore "..." chiamato REST. L'argomento preceduto dall'operatore REST diventa un array che contiene i valori di tutti gli argomenti passati, come mostrano gli esempi seguenti:

Esempio 7

// opzionali_01_rest.ts
function infoFiguraGeometrica(tipoFigura:string, ...valori:number[]):void{
var scelta:number=valori.length;
var perimetro:number,area:number;
// Controllo se tipoFigura è corretto altrimenti controllo se i valori sono 
// maggiori di zero
// Scelta=5 imposta il default che corrisponde ad un errore
if(tipoFigura.toLowerCase()!="cerchio" && tipoFigura.toLowerCase()!="quadrato" && 
   tipoFigura.toLowerCase()!="rettangolo" && tipoFigura.toLowerCase()!="triangolo"){
       scelta=5;
}else if(valori.length==1 && valori[0]<=0){
    scelta=5;
}else if(valori.length==2 && (valori[0]<=0 || valori[1]<=0)){
    scelta=5
}else if(valori.length==3 && (valori[0]<=0 || valori[1]<=0 || valori[2]<=0)){
    scelta=5
}
//Controllo se i lati del triangolo sono coerenti altrimenti imposto la scelta=5
if(scelta!=5 && arguments.length==4){
    if(valori[0]>=valori[1]+valori[2] || valori[0]<=valori[1]-valori[2]){
        scelta=5;
    } else if(valori[1]>=valori[0]+valori[2] || valori[1]<=valori[0]-valori[2]){
        scelta=5;
    } else if(valori[2]>=valori[1]+valori[0] || valori[2]<=valori[1]-valori[0]){
        scelta=5;
    } 
}
switch(scelta){
    case 2:
        if(tipoFigura.toLowerCase()=="cerchio"){
            perimetro=2*Math.PI*valori[0];
            area=Math.pow(valori[0],2)*Math.PI;
            console.log("Tipo figura:"+tipoFigura);
            console.log("Raggio     :"+valori[0]);
            console.log("Perimetro  :"+perimetro);
            console.log("Area       :"+area);
        }   else{
            perimetro=4*valori[0];
            area=Math.pow(valori[0],2);
            console.log("Tipo figura:"+tipoFigura);
            console.log("Lato       :"+valori[0]);
            console.log("Perimetro  :"+perimetro);
            console.log("Area       :"+area);
        }
        break;
    case 3:
        perimetro=(2*valori[0])+(2*valori[1]);
        area=valori[0]*valori[1];
        console.log("Tipo figura:"+tipoFigura);
        console.log("Lati       :"+valori[0],valori[1]);
        console.log("Perimetro  :"+perimetro);
        console.log("Area       :"+area);
    break;
    case 4:
        perimetro=valori[0]+valori[1]+valori[2];
        let sp=perimetro/2;
        area=Math.sqrt(sp*(sp-valori[0])*(sp-valori[1])*(sp-valori[2]));
        console.log("Tipo figura:"+tipoFigura);
        console.log("Lati       :"+valori[0],valori[1],valori[2]);
        console.log("Perimetro  :"+perimetro);
        console.log("Area       :"+area);
        break;
        default:
            console.log("Errore: Gli argomenti forniti alla funzione non sono esatti")
    } 
}
// main
console.log("----- Gestione Figure Geometriche -----");
infoFiguraGeometrica("Cerchio",10);
console.log("---------------------------------------");
infoFiguraGeometrica("Quadrato",20);
console.log("---------------------------------------");
infoFiguraGeometrica("Rettangolo",10,5);
console.log("---------------------------------------");
infoFiguraGeometrica("Triangolo",10,20,20);
----------------------------------------------------------------------
Tipo figura:Cerchio

Raggio     :10

Perimetro  :62.83185307179586

Area       :314.1592653589793

---------------------------------------

Tipo figura:Quadrato

Lato       :20

Perimetro  :80

Area       :400

---------------------------------------

Tipo figura:Rettangolo

Lati       :10 5

Perimetro  :30

Area       :50

---------------------------------------

Tipo figura:Triangolo

Lati       :10 20 20

Perimetro  :50

Area       :96.82458365518542
 

Esempio 8

 
//rest.ts
class Persona{
    nome:string;
    cognome:string;
    luogoDiNascita:string;
    dataDiNascita:Date;
    sesso:boolean;
    toString():string{
        var gg:number=this.dataDiNascita.getDate(); 
        var mm:number=this.dataDiNascita.getMonth()+1;
        var aaaa:number=this.dataDiNascita.getFullYear();
        var dataValore=gg+"/"+mm+"/"+aaaa;
        var sessoValore:string="";
        if(this.sesso){
            sessoValore="Maschio";
        } else{
            sessoValore="Femmina"
        }
         return this.nome+","+this.cognome+","+this.luogoDiNascita+","+dataValore
                +","+sessoValore;
    }
    constructor(){} // In questo caso il costruttore non contiene codice d'inizializzazione
}
function infoArgomentiRest(...parametri:any[]){
    parametri.forEach(parametro =>{
        if(typeof parametro=="number"){
          console.log("number:"+parametro);
        }else if(typeof parametro=="string"){
            console.log("string:"+parametro);
        }else if(typeof parametro=="boolean"){
            console.log("boolean:"+parametro);            
        }else {
            console.log(typeof parametro+":"+parametro);
        }
    })
}
// main
var personaUno:Persona=new Persona();
personaUno.nome="Mario";
personaUno.cognome="Rossi";
personaUno.luogoDiNascita="Milano";
personaUno.dataDiNascita=new Date("12/5/1990");
personaUno.sesso=true;
infoArgomentiRest(10,10.5,"Rossi",true,personaUno);
 
-----------------------------------------------------------------
number:10

number:10.5

string:Rossi

boolean:true

object:Mario,Rossi,Milano,5/12/1990,Maschio
 
 

Nella prossima lezione iniziamo a parlare di Object Oriented in TypeScript, introducendo le Classi e gli Oggetti.

<< Lezione precedente Lezione successiva >> | Vai alla prima lezione

T U T O R I A L S S U G G E R I T I

EDUCATIONAL GAMING BOOK (EGB) "H2O"

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune e raro, indispensabile per la vita.

Per il DOWNLOAD di "H2O" clicca qui.

4359 Visualizzazioni

TypeScript - Lezione 3: Array (CRUD - JSON -ANALISI DATI)

Gino Visciano | Skill Factory - 26/06/2020 09:16:19 | in Tutorials

In questa lezione approfondiamo la gestione degli array, introducendo le principali tecniche di CRUD.

Come abbiamo già visto nella lezione precedente, un array è un contenitore dinamico d'informazioni, per poterlo usare in TypeScript lo dovete prima dichiarare:

var nominativi:string[];

Le parentesi quadre dopo il tipo differenziano gli array dalle variabili. Dopo aver dichiarato un array lo dovete sempre inizializzare come mostrano gli esempi seguenti:

var nominativi:string[];
nominativi=[]; // Inizializzazione di un array vuoto

oppure

var nominativi:string[];
nominativi=['Mario Rossi','Paola Verdi']; // Inizializzazione di un array con due nominativi.

Potete anche dichiarare in inizializzare contemporaneamente:

var nominativi:string[]=[]; // Dichiarazione ed inizializzazione di un array vuoto

oppure

var nominativi:string[]=['Mario Rossi','Paola Verdi']; // Dichiarazione ed inizializzazione di un array con due nominativi

CREATE (INSERIMENTO)

Per aggiungere le informazioni richieste in un array dovete usare il metodo push:

var nominativi:string[]=[]; // Dichiarazione ed inizializzazione di un array vuoto
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');

READ (LETTURA)

Per leggere il contenuto di un elemento di un array, dovete conoscere la sua posizione ed indicarla attraverso un indice che corrisponde ad un valore numerico compreso tra 0 ed n-1, dove n è il numero totale di elementi nell'array.
Attenzione il primo elemento di un array corrisponde all'indice 0, l'ultimo all'indice n-1, come mostra l'esempio seguente:

Esempio 1

UPDATE (MODIFICA)

Per modificare il contenuto di un elemento di un array basta sostituire semplicemente il vecchio valore con quello nuovo, come indica l'esempio seguente:

nominativi[3]='Pietro Morra"; // Sostituiamo Ugo Formisano con Pietro Morra

Esempio 2

DELETE (ELIMINA)

Per eliminare uno o più elementi da un array dovete usare il metodo splice, fornendo l'indice del primo elemento e quanti elementi volete cancellare, come mostra l'esempio seguente:

nominativi.splice(2,1); // l'indice 2 indica il 3° elemento dell'array, il valore 1 indica che vogliamo cancellare solo quello

oppure

nominativi.splice(2,2); // l'indice 2 indica il 3° elemento dell'array, il valore 2 indica che vogliamo cancellare il 3° ed il 4° elemento dell'array

oppure

nominativi.splice(2); // l'indice 2 indica il 3° elemento dell'array, non avendo indicato quanti elementi eliminare vengono cancellati tutti gli elementi dell'array dal 3° in poi

Esempio 3

Esempio 4

Esempio 5

COME TROVARE UN ELEMENTO IN UN ARRAY

Per trovare un valore contenuto in un elemento di un array dovete usare il metodo indexOf.
Se il valore cercato viene trovato il metodo indexOf ritorna l'indice dell'elemento in cui il valore è stato trovato, altrimenti ritorna -1.

Di seguito vediamo alcuni esempi:

VALORE INTERO TROVATO

 
var interi:number[]=[10,20,30];
console.log(interi.indexOf(20));
---------------------------------
1

VALORE INTERO NON TROVATO

 
var interi:number[]=[10,20,30];
console.log(interi.indexOf(50));
---------------------------------
-1
 

VALORE DI TIPO STRINGA TROVATO

 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
console.log(nominativi.indexOf('Roberta Bianchi'));
---------------------------------
2
 

VALORE DI TIPO STRINGA NON TROVATO

 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
console.log(nominativi.indexOf('Marco Risi'));
---------------------------------
-1
 

COME ORDINARE IL CONTENUTO DI UN ARRAY

Per ordinare il contenuto di un array dovete usare il metodo sort.

ORDINAMENTO CRESCENTE

 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
nominativi.sort();
for (var x = 0; x < nominativi.length; x++) {
    console.log((x + 1) + ")" + nominativi[x]);
}
--------------------------------
1)Carla Pinto

2)Mario Rossi

3)Paola Verdi

4)Roberta Bianchi

5)Ugo Formisano
 

ORDINAMENTO DECRESCENTE

 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
nominativi.sort((n,m)=>m.localeCompare(n))
for (var x = 0; x < nominativi.length; x++) {
    console.log((x + 1) + ")" + nominativi[x]);
}
--------------------------------
1)Ugo Formisano

2)Roberta Bianchi

3)Paola Verdi

4)Mario Rossi

5)Carla Pinto
 

L'ordine del contenuto degli elementi di un array si può anche invertire con il metodo reverse:

INVERSIONE DEL CONTENUTO DI UN ARRAY

 
var nominativi:string[] = [];
nominativi.push('Mario Rossi');
nominativi.push('Paola Verdi');
nominativi.push('Roberta Bianchi');
nominativi.push('Ugo Formisano');
nominativi.push('Carla Pinto');
nominativi.reverse();
for (var x = 0; x < nominativi.length; x++) {
    console.log((x + 1) + ")" + nominativi[x]);
}
--------------------------------
1)Carla Pinto

2)Ugo Formisano

3)Roberta Bianchi

4)Paola Verdi

5)Mario Rossi
 

COME DUPLICARE UN ARRAY

Per duplicare un array dovete usare il metodo slice, questo metodo ritorna il riferimento di memoria dove viene allocata la copia, come mostra l'esempio seguente:

Esempio 6

Attenzione, la dichiarazione:

var nominativiDue:string[];

serve per creare la variabile a cui verrà assegnato il riferimento del nuovo array creato dal metodo slice.

COME CONCATENARE GLI ELEMENTI DI UN ARRAY CON UN ALTRO ARRAY (MERGE)

Per concatenare gli elementi di un array con un altro array dovete usare il metodo concat.

Il metodo concat crea un terzo array in cui concatena gli elementi dei due array da concatenare.

Esempio 7

Attenzione, la dichiarazione:

var nominativiUnoDue:string[];

serve per creare la variabile a cui verrà assegnato il riferimento del nuovo array creato dal metodo concat.

COME CREARE UN ARRAY DI STRINGHE PARTENDO DA UN ELENCO DI VALORI DI TIPO STRINGA

Un elenco di valori di tipo stringa può essere definito come un insieme di dati divisi da un separatore qualsiasi, come mostra l'esempio seguente:

"Anna Neri,Mario Rossi,Roberta Bianchi,Ugo Formisano,Paola Verdi,Francesca Lombardo"

dove il separatore usato è una virgola oppure:

"Mela-Pera-Arancia-Uva-Anguria-Melone-Banana"

dove il separatore usato è un trattino.

Per trasformare un elenco di dati di tipo stringa in un array di stringhe dovete usare il metodo split indicando come argomento il separatore usato per dividere le informazioni.

Esempio 8

Esempio 9

COME CREARE UNA STRINGA DI VALORI PARTENDO DA UN ARRAY DI STRINGHE

Per trasformare un array di stringhe in un elenco di valori di tipo stringa dovete utilizzare il metodo join, fornendo come argomento il separatore da utilizzare per creare l'elenco, come mostra l'esempio seguente:

TRASFORMAZIONE DI UN ARRAY DI STRINGHE IN UNA STRINGA DI VALORI

 
var frutti:string[]=['Mela','Pera','Arancia','Uva','Anguria','Melone','Banana']
var elencoFrutti:string; 
elencoFrutti=frutti.join("-");
console.log(elencoFrutti);
-------------------------------------------------------------------------------
Mela-Pera-Arancia-Uva-Anguria-Melone-Banana
 

COME GESTIRE VELOCEMENTE IL CONTENUTO DI TUTTI GLI ELEMENTI DI UN ARRAY

Per gestire il contenuto di un array si usa un ciclo for che incrementa l'indice degli elementi da x=0 ad x<nomeArray.length, come mostra l'esempio seguente:

var interi:number[]=[10,20,30,40,50];

for(let x=0;x<interi.length;x++){

console.log(interi[x]):

}

oppure potete usare un ciclo for of:

for(let i of interi){

console.log(i);

}

Per rendere più veloce la gestione di una array potete usare il metodo foreach.

Questo metodo, a differenza del for, scorre gli elementi dell'array senza utilizzare un indice e ad ogni loop assegna ad una variabile il valore dell'elemento corrente, come mostrano gli esempi seguenti:

VISUALIZZAZIONE DEL CONTENUTO DI UN ARRAY

 
var interi:number[]=[10,20,30,40,50];   
interi.forEach((intero:number) => console.log(intero));
--------------------------------------------------------
10

20

30

40

50

In questo esempio il foreach legge tutti i numeri dell'array interi e ad ogni loop assegna il valore corrente alla variabile intero, il simbolo "=>" , chiamato freccia indica l'operazione da svolgere.
Attenzione se l'operazione che volte svolgere è composta da una sola istruzione potete evitare di usare le parentesi graffe, altrimenti sono obbligatorie.

VISUALIZZAZIONE DEL CONTENUTO DI UN ARRAY TIPO ELENCO NUMERICO

 
var interi:number[]=[10,20,30,40,50]; 
var indice=1;  
interi.forEach((intero:number) => {
    console.log(indice+") "+intero) // Concateno indice con ") " e con intero
    indice++;
});
--------------------------------------
1) 10

2) 20

3) 30

4) 40

5) 50
 

 
var interi:number[]=[10,20,30,40,50]; 
var somma=0;  
interi.forEach((intero:number) => somma+=intero);
console.log("Totale dei numeri inseriti nell'array:"+somma);
--------------------------------------------------------------
Totale dei numeri inseriti nell'array:150
 

GESTIONE DELLE CODE

Le code si usano per gestire sequenze di valori che devono essere usati necessariamente in base all'ordine d'inserimento oppure di estrazione.

Esistono due tipi di code:

1) Code FIFO (First In First Out - Primo entrato è il primo ad uscire);

2) Code LIFO (Last In First Out - L'ultimo entrato è il primo ad uscire).

CODA FIFO

 
var codaFIFO:number[]=[10,5,20,15,8,40,30,25,45,35];
console.log(codaFIFO);
for(let x=0;x<10;x++){
    console.log(codaFIFO.shift()+"<--"+codaFIFO);
}
---------------------------------------------------------------
[10,  5, 20, 15,  8, 40, 30, 25, 45, 35]

10<--5,20,15,8,40,30,25,45,35

5<--20,15,8,40,30,25,45,35

20<--15,8,40,30,25,45,35

15<--8,40,30,25,45,35

8<--40,30,25,45,35

40<--30,25,45,35

30<--25,45,35

25<--45,35

45<--35

35<--

CODA LIFO

 
var codaFIFO:number[]=[10,5,20,15,8,40,30,25,45,35];
console.log(codaFIFO);
for(let x=0;x<10;x++){
    console.log(codaFIFO.pop()+"<--"+codaFIFO);
}
-------------------------------------------------------
[10,  5, 20, 15,  8, 40, 30, 25, 45, 35]
35<--10,5,20,15,8,40,30,25,45

45<--10,5,20,15,8,40,30,25

25<--10,5,20,15,8,40,30

30<--10,5,20,15,8,40

40<--10,5,20,15,8

8<--10,5,20,15

15<--10,5,20

20<--10,5

5<--10

10<--
 

COME GESTIRE UN ARRAY DI OGGETTI JSON

JSON ( (JavaScript Object Notation)) è il formato testo più utilizzato nel mondo della programmazione per definire strutture di dati di tipo SQL e NOSQL.

Una struttura JSON oppure oggetto JSON è delimitata da parentesi graffe {...} che contengono gli attributi (nomi delle informazioni), associati ai dati corrispondenti, come mostra l'esempio seguente:

{

id:1,

nome:"Paola",

cognome:"Verdi",

luogoDiNascita:"Roma",

dataDiNascita:new Date("10/05/1990"),

sesso:true,

codiceFiscale:"pllvrd90l05l234f",

titoliDiStudio:["Diploma","Laurea"]

};

I dati di tipo stringa vanno racchiusi tra le virgolette, i valori booleani s'impostano con true o false e se un attributo è composto da più valori, per indicarli potete usare la stessa notazione utilizzata per inizializzare gli arrray [...], come ad esempio avviene per l'attributo titoliDiStudio:["Diploma","Laurea"].

Per creare un tipo di dato che corrisponde ad una struttura/oggetto JSON dovete creare un'interfaccia, come mostra l'esempio seguente:

interface Persona {

id:number,

nome:string,

cognome:string,

luogoDiNascita:string,

dataDiNascita:Date,

sesso:boolean,

codiceFiscale:string,

titoliDiStudio:string[]

}

Esempio 10

 
// array_esempio_10.ts
interface Persona {
    id:number,
    nome:string,
    cognome:string,
    luogoDiNascita:string,
    dataDiNascita:Date,
    sesso:boolean,
    codiceFiscale:string,
    titoliDiStudio:string[]
    } 
// Dichiaro ed inizializzo un array di persone di tipo Persona
var persone:Persona[]=[]; 
persone.push(
    {
    id:1,
    nome:"Paola",
    cognome:"Verdi",
    luogoDiNascita:"Roma",
    dataDiNascita:new Date("10/05/1990"),
    sesso:true,
    codiceFiscale:"pllvrd90l05l234f",
    titoliDiStudio:["Diploma","Laurea"]
    }
)   
persone.push(
    {
    id:2,
    nome:"Marco",
    cognome:"Rossi",
    luogoDiNascita:"Napoli",
    dataDiNascita:new Date("1/5/1996"),
    sesso:false,
    codiceFiscale:"mrcrss96l01l256g",
    titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]
    }
) 
persone.push(
    {
    id:3,
    nome:"Carla",
    cognome:"Rossini",
    luogoDiNascita:"Pesaro",
    dataDiNascita:new Date("10/15/1990"),
    sesso:true,
    codiceFiscale:"crlrss90f10l324a",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
) 
persone.push(
    {
    id:4,
    nome:"Roberta",
    cognome:"Bianchi",
    luogoDiNascita:"Firenze",
    dataDiNascita:new Date("03/20/2000"),
    sesso:false,codiceFiscale:"rbtbnc00f03p259b",
    titoliDiStudio:["Diploma"]
    }
)
persone.push(
    {
    id:5,
    nome:"Ugo",
    cognome:"Formisano",
    luogoDiNascita:"Salerno",
    dataDiNascita:new Date("07/28/2002"),
    sesso:false,codiceFiscale:"gggfrm07r28m260p",
    titoliDiStudio:["Diploma","Laurea Magistrale"]
    }
)
persone.forEach((persona:Persona)=>console.log(persona));
------------------------------------------------------------------
{

  id: 1,

  nome: 'Paola',

  cognome: 'Verdi',

  luogoDiNascita: 'Roma',

  dataDiNascita: 1990-10-04T23:00:00.000Z,

  sesso: true,

  codiceFiscale: 'pllvrd90l05l234f',

  titoliDiStudio: [ 'Diploma', 'Laurea' ]

}

{

  id: 2,

  nome: 'Marco',

  cognome: 'Rossi',

  luogoDiNascita: 'Napoli',

  dataDiNascita: 1996-01-04T23:00:00.000Z,

  sesso: false,

  codiceFiscale: 'mrcrss96l01l256g',

  titoliDiStudio: [ 'Diploma', 'Laurea Triennale', 'Laurea Magistrale' ]

}

{

  id: 3,

  nome: 'Carla',

  cognome: 'Rossini',

  luogoDiNascita: 'Pesaro',

  dataDiNascita: 1990-10-14T23:00:00.000Z,

  sesso: true,

  codiceFiscale: 'crlrss90f10l324a',

  titoliDiStudio: [ 'Diploma', 'Laurea Triennale' ]

}

{

  id: 4,

  nome: 'Roberta',

  cognome: 'Bianchi',

  luogoDiNascita: 'Firenze',

  dataDiNascita: 2000-03-19T23:00:00.000Z,

  sesso: false,

  codiceFiscale: 'rbtbnc00f03p259b',

  titoliDiStudio: [ 'Diploma' ]

}

{

  id: 5,

  nome: 'Ugo',

  cognome: 'Formisano',

  luogoDiNascita: 'Salerno',

  dataDiNascita: 2002-07-27T22:00:00.000Z,

  sesso: false,

  codiceFiscale: 'gggfrm07r28m260p',

  titoliDiStudio: [ 'Diploma', 'Laurea Magistrale' ]

}
 

Per creare una struttura/oggetto JSON, potete anche indicare come tipo direttamente le informazioni che ne descrivono il formato, come mostra l'esempio seguente:

var persona: {id:number,

nome:string,

cognome:string,

luogoDiNascita:string,

dataDiNascita:Date,

sesso:boolean,

codiceFiscale:string,

titoliDiStudio:string[]}={
id: 1,
nome: 'Paola',
cognome: 'Verdi',
luogoDiNascita: 'Roma',
dataDiNascita: 1990-10-04T23:00:00.000Z,
sesso: true,
codiceFiscale: 'pllvrd90l05l234f',
titoliDiStudio: [ 'Diploma', 'Laurea' ]}

Esempio 10_BIS

 
// array_esempio_10_bis.ts
var persone:{
    id:number,
    nome:string,
    cognome:string,
    luogoDiNascita:string,
    dataDiNascita:Date,
    sesso:boolean,
    codiceFiscale:string,
    titoliDiStudio:string[]
    }[]=[];
persone.push(
    {
    id:1,
    nome:"Paola",
    cognome:"Verdi",
    luogoDiNascita:"Roma",
    dataDiNascita:new Date("10/05/1990"),
    sesso:true,
    codiceFiscale:"pllvrd90l05l234f",
    titoliDiStudio:["Diploma","Laurea"]
    }
)   
persone.push(
    {
    id:2,
    nome:"Marco",
    cognome:"Rossi",
    luogoDiNascita:"Napoli",
    dataDiNascita:new Date("1/5/1996"),
    sesso:false,
    codiceFiscale:"mrcrss96l01l256g",
    titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]
    }
) 
persone.push(
    {
    id:3,
    nome:"Carla",
    cognome:"Rossini",
    luogoDiNascita:"Pesaro",
    dataDiNascita:new Date("10/15/1990"),
    sesso:true,
    codiceFiscale:"crlrss90f10l324a",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
) 
persone.push(
    {
    id:4,
    nome:"Roberta",
    cognome:"Bianchi",
    luogoDiNascita:"Firenze",
    dataDiNascita:new Date("03/20/2000"),
    sesso:false,codiceFiscale:"rbtbnc00f03p259b",
    titoliDiStudio:["Diploma"]
    }
)
persone.push(
    {
    id:5,
    nome:"Ugo",
    cognome:"Formisano",
    luogoDiNascita:"Salerno",
    dataDiNascita:new Date("07/28/2002"),
    sesso:false,codiceFiscale:"gggfrm07r28m260p",
    titoliDiStudio:["Diploma","Laurea Magistrale"]
    }
)
persone.forEach((persona:{
        id:number,
        nome:string,
        cognome:string,
        luogoDiNascita:string,
        dataDiNascita:Date,
        sesso:boolean,
        codiceFiscale:string,
        titoliDiStudio:string[]
        })=>console.log(persona));
 

PRINCIPALI METODI PER ANALIZZARE IL CONTENUTO DI UN ARRAY

Per analizzare le informazioni contenute in array potete utilizzare tre metodi: filter, map e reduce.

- Il metodo filter, crea un nuovo array che contiene gli elementi che soddisfano la condizione indica nella funzione lambda associata al metodo.

- Il metodo map, crea un nuovo array che contiene i risultati delle operazioni eseguite dalla funzione lambda associata al metodo.

- Il metodo reduce utilizza un accumulatore per eseguire operazioni di tipo somma o conteggio.

Vediamo alcuni esempi:

VISUALIZZA NUMERI DISPARI

var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var interiDispari:number[]=interi.filter((numero:number)=>{
    if (numero%2!=0){
        return numero;
    }
})
interiDispari.forEach((numero:number) => console.log(numero));
---------------------------------------------------------------------------------
5

15

33

53

67

91

65

79

35
 

L'argomento del metodo filter è una funzione lambda, una funzione anonima che riceve come argomenti di volta in volta, tutti i valori dell'array e ritorna solo quelli dispari:

// Funzione lambda
(numero:number) => {
if(numero%2!=0){
return numero; // Aggiunge al nuovo array solo i valori che soddisfano la condizione
}
}

Il simbolo => è detto freccia, si usa per associare gli argomenti della funzione lambda all'implementazione.

VISUALIZZA IL TOTALE DEI NUMERI DISPARI

 
var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var totaleNumeriDispari:number=interi.filter((numero:number)=>{
    if (numero%2!=0){
        return numero;
    }
}).reduce((totale:number,numero:number)=> totale+numero);
console.log("Totale numeri dispari:"+totaleNumeriDispari);
----------------------------------------------------------------------------------
Totale numeri dispari:443
 

La funzione lambda del metodo reduce, viene eseguita per ogni elemento dell'array. Il primo argomento della funzione è un accumulatore, conserva il valore del calcolo precedente, mentre il secondo argomento, corrisponde al valore corrente dell'array.

CALCOLA IL CUBO DEI VALORI DELL'ARRAY

 
var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var cuboInteri=interi.map((numero:number)=>Math.pow(numero,3));
cuboInteri.forEach((numero:number)=>console.log(numero));
-------------------------------------------------------------------------------
1000

125

3375

27000

35937

8000

148877

300763

474552

729000

753571

941192

343000

274625

493039

1728

2744

5832

42875

512000

TOTALE DEL CUBO DEI NUMERI PARI DELL'ARRAY

 
var interi:number[]=[10,5,15,30,33,20,53,67,78,90,91,98,70,65,79,12,14,18,35,80];
var totale=interi.filter((numero:number)=>{
    if(numero%2==0){
       return numero;
    }
}).map((numero:number)=>Math.pow(numero,3)).reduce((somma:number,numero:number)

=>somma+numero);
console.log("Totale del cubo dei numeri pari:"+totale);
------------------------------------------------------------------------------
Totale del cubo dei numeri pari:3046048
 
 

VISUALIZZA L'ETA' MEDIA DELLE DONNE CON LAUREA INSERITE NELL'ARRAY

 
interface Persona {
    id:number,
    nome:string,
    cognome:string,
    luogoDiNascita:string,
    dataDiNascita:Date,
    sesso:boolean,
    codiceFiscale:string,
    titoliDiStudio:string[]
    } 
var persone:Persona[]=[];
persone.push(
    {
    id:1,
    nome:"Paola",
    cognome:"Verdi",
    luogoDiNascita:"Roma",
    dataDiNascita:new Date("10/05/1990"),
    sesso:true,
    codiceFiscale:"pllvrd90l05l234f",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
)   
persone.push(
    {
    id:2,
    nome:"Marco",
    cognome:"Rossi",
    luogoDiNascita:"Napoli",
    dataDiNascita:new Date("1/5/1996"),
    sesso:false,
    codiceFiscale:"mrcrss96l01l256g",
    titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]
    }
) 
persone.push(
    {
    id:3,
    nome:"Carla",
    cognome:"Rossini",
    luogoDiNascita:"Pesaro",
    dataDiNascita:new Date("10/15/1990"),
    sesso:true,
    codiceFiscale:"crlrss90f10l324a",
    titoliDiStudio:["Diploma","Laurea Triennale"]
    }
) 
persone.push(
    {
    id:4,
    nome:"Roberta",
    cognome:"Bianchi",
    luogoDiNascita:"Firenze",
    dataDiNascita:new Date("03/20/2000"),
    sesso:true,
    codiceFiscale:"rbtbnc00f03p259b",
    titoliDiStudio:["Diploma"]
    }
)
persone.push(
    {
    id:5,
    nome:"Ugo",
    cognome:"Formisano",
    luogoDiNascita:"Salerno",
    dataDiNascita:new Date("07/28/2002"),
    sesso:false,
    codiceFiscale:"gggfrm07r28m260p",
    titoliDiStudio:["Diploma","Laurea Magistrale"]
    })
    persone.push(
        {
        id:6,
        nome:"Alessandra",
        cognome:"Bianchi",
        luogoDiNascita:"Milano",
        dataDiNascita:new Date("10/18/2005"),
        sesso:true,
        codiceFiscale:"ssnbnn10r18f345n",
        titoliDiStudio:["Diploma","Laurea Triennale"]
        })
    persone.push(
        {
        id:7,
        nome:"Nicola",
        cognome:"Morra",
        luogoDiNascita:"Torino",
        dataDiNascita:new Date("08/11/1990"),
        sesso:false,
        codiceFiscale:"nccmrr08r11l250u",
        titoliDiStudio:["Diploma"]
        })    
    persone.push(
        {
        id:8,
        nome:"Marina",
        cognome:"Rossi",
        luogoDiNascita:"Genova",
        dataDiNascita:new Date("03/01/1992"),
        sesso:true,
        codiceFiscale:"mrnrss03r01l250u",
        titoliDiStudio:["Diploma","Laurea Magistrale"]
        })    
    persone.push(
        {
        id:9,
        nome:"Daniele",
        cognome:"Verdi",
        luogoDiNascita:"Genova",
        dataDiNascita:new Date("02/05/1996"),
        sesso:false,
        codiceFiscale:"dnlvrd02r05l456g",
        titoliDiStudio:["Diploma","Laurea Triennale"]
        })    
    persone.push(
        {
        id:10,
        nome:"Michele",
        cognome:"Cuccurullo",
        luogoDiNascita:"Asti",
        dataDiNascita:new Date("11/11/1998"),
        sesso:false,
        codiceFiscale:"mccccc11g11l250s",
        titoliDiStudio:["Diploma"]
        })    
    persone.push(
        {
        id:11,
        nome:"Rosanna",
        cognome:"Neri",
        luogoDiNascita:"Ancona",
        dataDiNascita:new Date("11/10/1998"),
        sesso:true,
        codiceFiscale:"rssnrr11g10l251s",
        titoliDiStudio:["Diploma"]
        })                    
    persone.push(
        {
        id:12,
        nome:"Claudia",
        cognome:"Bianchi",
        luogoDiNascita:"Genova",
        dataDiNascita:new Date("10/01/2000"),
        sesso:true,
        codiceFiscale:"cldbnc10g00l255t",
        titoliDiStudio:["Diploma"]
        })                    
        var femmineLaureate:Persona[]=persone.filter((persona:Persona)=>{
                if(persona.sesso && 
                   (persona.titoliDiStudio.indexOf("Laurea Triennale")>=0 ||
                   persona.titoliDiStudio.indexOf("Laurea Magistrale")>=0)) {
                  return persona;
                }
                })
        var etaMedia:number=femmineLaureate.map((persona:Persona)=>
                     new Date().getFullYear()-persona.dataDiNascita.getFullYear())
                     .reduce((somma:number,eta:number)=>somma+eta)/

femmineLaureate.length;
console.log("Femmine laureate:"+femmineLaureate.length);
console.log("Età media:"+etaMedia);
-----------------------------------------------------------------------
Femmine laureate:4

Età media:25.75
 
 

Nella prossima lezione vedremo tutti i tipi di funzioni disponibili in TypeScript.

<< Lezione precedente Lezione successiva >> | Vai alla prima lezione

T U T O R I A L S S U G G E R I T I

EDUCATIONAL GAMING BOOK (EGB) "H2O"

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune e raro, indispensabile per la vita.

Per il DOWNLOAD di "H2O" clicca qui.

8702 Visualizzazioni

TypeScript - Lezione 2: Tipi di dati.

Gino Visciano | Skill Factory - 10/06/2020 16:07:16 | in Tutorials

TypeScript a differenza di Javascript, permette di dichiarare le variabili con 3 tipi di dati primitivi:

- number (interi e decimali);
- string (caratteri alfanumerici);
- boolean (true e false).

L'esempio seguente mostra come si dichiarano e si assegnano valori alle variabili in TypeScript:

Il comando var rende la variabile di tipo globale nel modulo in cui viene dichiarata.

COME DICHIARARE UNA VARIABILE A CUI ASSEGNARE QUALUNQUE TIPO DI VALORE

Una variabile a cui si può assegnare qualunque tipo di valore è di tipo "Variant".

In TypeScript il tipo "Variant" corrisponde al tipo di dato any.

Ad esempio alle variabili seguenti potete assegnare qualunque tipo di valore:

// Dichiarazione
var valoreQualunqueUno:any;
var valoreQualunqueDue:any;
var valoreQualunqueTre:any;
var valoreQualunqueQuattro:any;

// Inizializzazione
valoreQualunqueUno=30;
valoreQualunqueDue=10.80;
valoreQualunqueTre:any="Arancione"
valoreQualunqueQuattro=true;

// Visualizzazione
console.log(valoreQualunqueUno);
console.log(valoreQualunqueDue);
console.log(valoreQualunqueTre);
console.log(valoreQualunqueQuattro)

COME DICHIARARE UNA VARIABILE DI TIPO DATA
In TypeScript il tipo data non è un tipo di dato primitivo, ma una classe.
Per riconoscere se un tipo di dato è primitivo oppure è una classe è semplice, i nomi dei tipi primitivi sono minuscoli mentre le classi iniziano sempre con una lettere maiuscola, come mostra l'esempio seguente:

var nome:string // Tipo di dato primitivo
var dataDiNascita:Date //Tipo Classe

Le variabili di tipo classe, possono contenere sia valori, sia funzioni, chiamate metodi, che servono per fare operazioni sul valori memorizzati. Le variabile di tipo classe sono chiamate oggetti e si inizializzano con il comando new, come mostra l'esempio seguente:

var gg=number; // Variabile
var mm=number; // Variabile
var aaaa=number; // Variabile
var dataDiNascita=new Date("10/05/1990"); // Oggetto perché oltre ai valori può contienere anche metodi
gg=dataDiNascita.getData(); // Uso di un metodo che fornisce il giorno della data inserita
mm=dataDiNascita.getMonth(); // Uso di un metodo che fornisce il mese della data inserita
aaaa=dataDiNascita.gerFullYear(); // Uso di un metodo che fornisce l'anno della data inserita
console.log(gg+"/"+mm+"/"+aaaa);

COME LAVORARE CON GLI ARRAY

In TypeScript gli array si dichiarano come le variabili, l'unica differenza è che al tipo di dato , sia di tipo primitivo, sia di tipo classe, dovete aggiungere una coppia di parentesi quadre, come mostra l'esempio seguente:

var valori:number[]; // Array di tipo number, può contenere molti valori interi oppure decimali

Per dichiarare un array vuoto dovete usare la sintassi seguente:

var valori:number[]=[]; // Dichiarazione e inizializzazione

oppure

var valori:number[]; // Dichiarazione
valori=[]; // Inizializzazione

Per assegnare dei valori ad un array potete usare la sintassi seguente:

var valori:number[]=[10,5,20,15,30]; // Dichiarazione e inizializzazione

oppure

var valori:number[]; // Dichiarazione
valori=[10,5,20,15,30]; // Inizializzazione

Dopo aver dichiarato ed inizializzato un array, per aggiungere nuovi valori, dovete usare il metodo push():

valori.push(50);
valori.push(40);
valori.push(35);
valori.push(25);
valori.push(45);

Tutti i valori di un array sono identificati da un indice numerico. Il primo valore corrisponde all'indice 0, l'ultimo valore corrisponde all'indice n-1, dove n è il numero di valori inserito nell'array.

L'attributo length contiene il numero di valori inseriti in un array (n).

Per visualizzare il contenuto di un array potete utilizzare un ciclo for, come mostra l'esempio seguente:

for(let x:number=0;x<valori.length;x++){
console.log(valori[x]);
}

Il comando let permette di dichiarare una variabile visibile solo nel blocco in cui viene dichiarata.

Esempio 1

Aprite Visual Studio Code

create un nuovo file:

e scrivete il codice seguente:

// valori_inserimento.ts
var valori:number[]=[10,5,20,15,30];
valori.push(50);
valori.push(40);
valori.push(35);
valori.push(25);
valori.push(45);

console.log("Valori inseriti:"+valori.length);

for(let x:number=0;x<valori.length;x++){
console.log(valori[x]);
}

Salvate il file con il nome valori_inserimento.ts:

Dopo aver salvato il file apreite il terminale, compilate ed eseguite:

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc valori_inserimento
node valori_inserimento

---------- OUTPUT ----------
Valori inseriti:10
10
5
20
15
30
50
40
35
25
45

Per modificare una valore inserito in un array dovete prima conoscere in quale posizione si trova (indice) e successivamente lo potete sostituire con il nuovo valore.

Esempio 2

// nominativi_modifica.ts
var nominativi:string[]=[];
nominativi.push("Paola Rossi");
nominativi.push("Ugo Verdi");
nominativi.push("Mara Bianchi");
nominativi.push("Marco Borriello");
nominativi.push("Roberta Di Donna");

console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
console.log((x+1)+") "+nominativi[x]);
}

nominativi[0]="Michela De Pretis"; // Modifica del primo elemento dell'array con indice=0

nominativi[2]="Francesco Ferrara"; // Modifica del terzo elemento dell'array con indice=2
nominativi[4]="Carla Miranda"; // Modifica dell'ultimo (quinto) elemento dell'array con indice=4

console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
console.log((x+1)+") "+nominativi[x]); // (x+1) +")" permette di ottenere un elenco numerato
}

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc nominativi_modifica
node nominativi_modifica

---------- OUTPUT ----------
Nominativi inseriti:5

1) Paola Rossi
2) Ugo Verdi
3) Mara Bianchi
4) Marco Borriello
5) Roberta Di Donna
Nominativi inseriti:5
1) Michela De Pretis
2) Ugo Verdi
3) Francesco Ferrara
4) Marco Borriello
5) Carla Miranda

Per eliminare un valore inserito in un array, dovete usare il metodo splice(indice,quanti), dove:

indice=posizione nell'array da dove iniziare ad eliminare;
quanti=quanti valori eliminare partendo dalla posizione indice.

Esempio 3

// nominativi_elimina.ts
var nominativi:string[]=[];
nominativi.push("Paola Rossi");
nominativi.push("Ugo Verdi");
nominativi.push("Mara Bianchi");
nominativi.push("Marco Borriello");
nominativi.push("Roberta Di Donna");

console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
console.log((x+1)+") "+nominativi[x]);
}

nominativi.splice(2,1) // Elimina il terzo nominativo dall'array

console.log("Nominativi inseriti:"+nominativi.length);

for(let x:number=0;x<nominativi.length;x++){
console.log((x+1)+") "+nominativi[x]);
}

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc nominativi_elimina
node nominativi_elimina

---------- OUTPUT ----------
Nominativi inseriti:5
1) Paola Rossi
2) Ugo Verdi
3) Mara Bianchi
4) Marco Borriello
5) Roberta Di Donna
Nominativi inseriti:4
1) Paola Rossi
2) Ugo Verdi
3) Marco Borriello
4) Roberta Di Donna

COME CREARE UN TIPO CLASSE PER ISTANZIARE OGGETTI

Un tipo classe è un tipo di dato definito dal programmatore, si differenzia dai tipi primitivi number, string e boolean, perché permette di memorizzare più informazioni contemporaneamente, come avviene per le strutture in C.

Le classi a differenza delle strutture, possono contenere anche funzioni, chiamate metodi, che permettono di eseguire operazioni sulle informazioni memorizzate.

I costruttori sono funzioni come i metodi che si usano durante la creazione degli oggetti (istanza) e servono per inizializzare i suoi attributi.

Per creare una classe dovete usare la parola chiave class seguita dal nome e da una coppia di parentesi graffe in cui dichiarare le variabili (attributi), i metodi richiesti ed i costruttori, come mostra l'esempio seguente:

class MiaClasse{

valoreUno:tipo; // Attributo = variabile globale
valoreDue:tipo; // Attributo = variabile globale

// Metodo = funzione che permette di eseguire operazioni sugli attributi

metodoUno():tipo{

// Codice metodo

}

// Metodo = funzione che permette di eseguire operazioni sugli attributi
// tipo è void se il metodo non restituisce (return) un valore, altrimenti corrisponde al tipo del valore restituito
metodoDue():tipo{

// Codice metodo

}

// Costruttore = funzione che permette di inizializzare gli attributi di un oggetto quando lo istanziate
// Attenzione a differenza degli altri metodi il costruttore non può restituire valori, quindi non dovete indicare il tipo restituito

constructor(){

// Codice metodo costruttore

}

Attenzione ricordate le seguenti regole:

1) I nomi delle classi sono formati da una o più parole che iniziano sempre con la lettera maiuscola:MiaClasse;
2) I nomi degli attributi, dei metodi e dei costruttori, hanno sempre la prima parola minuscola, se sono composti da più parole, le successive iniziano con la lettera maiuscola:valoreUno e metodoUno;
3) Quando create un costruttore, a differrenza dei metodi, non dovete indicare i tipo restituito.

In un'applicazione per usare un tipo classe dovete istanziare un oggetto, come mostra la sintassi seguente:

// Istanza (creazione di un oggetto di tipo classe)

var personaUno:Persona=new Persona();

personaUno=Nome oggetto che permette di memorizzare valori negli attributi ed eseguire operazioni eseguendo i metodi;

Persona=Classe;
new=comando che crea in memoria l'oggetto. Questa operazione è detta istanza;
Persona()=Costruttore, metodo utilizzato per inizializzare gli attributi dell'oggetto.

Esempio 4

// Dichiarazione della Classe da utilizzare come tipo per istanziare oggetti
// gestione_persone.ts

class Persona{
nome:string;
cognome:string;
luogoDiNascita:string;
dataDiNascita:Date;
sesso:boolean;
toString():string{
var gg:number=this.dataDiNascita.getDate();
var mm:number=this.dataDiNascita.getMonth()+1;
var aaaa:number=this.dataDiNascita.getFullYear();
var dataValore:string=gg+"/"+mm+"/"+aaaa;
var sessoValore:string="";
if(this.sesso){
sessoValore="Maschio";
} else{
sessoValore="Femmina"
}
return this.nome+","+this.cognome+","+this.luogoDiNascita+","+dataValore+","+sessoValore;
}
constructor(){} // In questo caso il costruttore non contiene codice d'inizializzazione, verrà usato solo per istanziare oggetti di tipo Persona
}

// Istanza di tre oggetti di tipo Persona
var personaUno:Persona=new Persona();
var personaDue:Persona=new Persona();
var personaTre:Persona=new Persona();

personaUno.nome="Mario";
personaUno.cognome="Rossi";
personaUno.luogoDiNascita="Milano";
//Mese, Giorno e Anno
personaUno.dataDiNascita=new Date("12/5/1990");
personaUno.sesso=true;

personaDue.nome="Paola";
personaDue.cognome="Verdi";
personaDue.luogoDiNascita="Napoli";
//Mese, Giorno e Anno
personaDue.dataDiNascita=new Date("9/10/1998");
personaDue.sesso=false;

personaTre.nome="Roberta";
personaTre.cognome="Bianchi";
personaTre.luogoDiNascita="Roma";
//Mese, Giorno e Anno
personaTre.dataDiNascita=new Date("1/12/1995");
personaTre.sesso=false;

console.log(personaUno.toString());
console.log(personaDue.toString());
console.log(personaTre.toString());

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc gestione_persone
node gestione_persone

---------- OUTPUT ----------

Mario,Rossi,Milano,5/12/1990,Maschio
Paola,Verdi,Napoli,10/9/1998,Femmina
Roberta,Bianchi,Roma,12/1/1995,Femmina

Esempio 5

//rettangolo.ts

class Rettangolo {
latoA:number;
latoB:number;
getPerimetro():number{
return 2*(this.latoA+this.latoB);
}
getArea():number{
return this.latoA*this.latoB;
}
constructor(latoA:number,latoB:number){
this.latoA=latoA;
this.latoB=latoB;
}
}

var rettangolo:Rettangolo=new Rettangolo(10,20);
console.log("Perimetro:"+rettangolo.getPerimetro());
console.log("Area:"+rettangolo.getArea());

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc rettangolo
node rettangolo

---------- OUTPUT ----------

Perimetro:60
Area:200

COME LAVORARE CON UNA STRUTTURA JSON (JavaScript Object Notation)

In TypeScript una struttura JSON può essere definita come una variabile multivalore.

JSON è il nuovo formato testo (NOSQL) per organizzare dati, indipendente dal linguaggio di programmazione usato, molto utile per scambiare dati tra applicazioni scritte con linguaggi di programmazione diversi.

JSON è il formato di raccolta ed organizzazione dei dati più usato nel mondo dei Big Data, dove è molto diffuso l'uso di database NOSQL, come MONGODB, che usano strutture JSON al posto delle classiche tabelle usate nei database SQL (Relazionali).

Per dichiarare una struttura JSON, dovete indicare in una coppia di parentesi graffe tutte le variabili che la compongono, come mostra l'esempio seguente:

var persona:{id:number, nome:string, cognome:string, luogoDiNascita:string, dataDiNascita:Date,sesso:boolean, codiceFiscale:string, titoliDiStudio:string[]};

Esempio 6

// gestione_persone_json_01.ts

var personaUno:{id:number, nome:string, cognome:string, luogoDiNascita:string, dataDiNascita:Date,sesso:boolean, codiceFiscale:string, titoliDiStudio:string[]}; // Dichiarazione di una struttura JSON
var personaDue:{id:number, nome:string, cognome:string, luogoDiNascita:string, dataDiNascita:Date,sesso:boolean, codiceFiscale:string, titoliDiStudio:string[]}; // Dichiarazione di una struttura JSON
personaUno={id:1,nome:"Paola",cognome:"Verdi",luogoDiNascita:"Roma",dataDiNascita:new Date("10/05/1990"),sesso:true,codiceFiscale:"pllvrd90l05l234f",titoliDiStudio:["Diploma","Laurea"]}; // Assegnazione dei dai ad una struttura JSON
personaDue={id:2,nome:"Marco",cognome:"Rossi",luogoDiNascita:"Napoli",dataDiNascita:new Date("1/5/1996"),sesso:false,codiceFiscale:"mrcrss96l01l256g",titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]}; // Assegnazione dei dai ad una struttura JSON

console.log(personaUno);
console.log(personaDue);

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc gestione_persone_json_01
node gestione_persone_json_01

---------- OUTPUT ----------

L'output mostra i dati delle due persone secondo la convenzione JSON.

COME CREARE UN'INTERFACCIA PER DICHIARARE UNA STRUTTURA JSON (JavaScript Object Notation)

Per dichiarare una struttura JSON, potete anche usare un'interfaccia che contiene le dichiarazioni di tutte le variabili che la compongono.

Per creare un'interfaccia, dovete usare la parola chiave interface, come mostra l'esempio seguente:

interface PersonaJSON{
id:number,
nome:string,
cognome:string,
luogoDiNascita:string,
dataDiNascita:Date,
sesso:boolean,
codiceFiscale:string,
titoliDiStudio:string[]
}

In questo caso avete creato il tipo di dato PersonaJSON, che serve per dichiarare strutture JSON che contengono le informazioni inserite nell'interfaccia.

Esempio 7

// gestione_persone_json_02.ts

interface PersonaJSON{
id:number,
nome:string,
cognome:string,
luogoDiNascita:string,
dataDiNascita:Date,
sesso:boolean,
codiceFiscale:string,
titoliDiStudio:string[]
}
var personaUno:PersonaJSON;
var personaDue:PersonaJSON;
personaUno={id:1,nome:"Paola",cognome:"Verdi",luogoDiNascita:"Roma",dataDiNascita:new Date("10/05/1990"),sesso:true,codiceFiscale:"pllvrd90l05l234f",titoliDiStudio:["Diploma","Laurea"]};
personaDue={id:2,nome:"Marco",cognome:"Rossi",luogoDiNascita:"Napoli",dataDiNascita:new Date("1/5/1996"),sesso:false,codiceFiscale:"mrcrss96l01l256g",titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]};

console.log(personaUno);
console.log(personaDue);

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc gestione_persone_json_02
node gestione_persone_json_02

---------- OUTPUT ----------

Esempio 8

// gestione_persone_json_03.ts

interface PersonaJSON{
id:number,
nome:string,
cognome:string,
luogoDiNascita:string,
dataDiNascita:Date,
sesso:boolean,
codiceFiscale:string,
titoliDiStudio:string[]
}
var persone:PersonaJSON[]=[]; // Array si strutture JSON di tipo PersonaJSON
persone.push({id:1,nome:"Paola",cognome:"Verdi",luogoDiNascita:"Roma",dataDiNascita:new Date("10/05/1990"),sesso:true,codiceFiscale:"pllvrd90l05l234f",titoliDiStudio:["Diploma","Laurea"]});
persone.push({id:2,nome:"Marco",cognome:"Rossi",luogoDiNascita:"Napoli",dataDiNascita:new Date("1/5/1996"),sesso:false,codiceFiscale:"mrcrss96l01l256g",titoliDiStudio:["Diploma","Laurea Triennale","Laurea Magistrale"]});
persone.push({id:3,nome:"Ugo",cognome:"Bianchi",luogoDiNascita:"Milano",dataDiNascita:new Date("7/9/2000"),sesso:false,codiceFiscale:"uggbnc00q07l246e",titoliDiStudio:["Diploma","Laurea Triennale"]});

for(let x:number=0;x<persone.length;x++){
console.log(persone[x]);
}

---------- COMPILAZIONE ED ESECUZIONE ----------
tsc gestione_persone_json_03
node gestione_persone_json_03

---------- OUTPUT ----------

{
id: 1,
nome: 'Paola',
cognome: 'Verdi',
luogoDiNascita: 'Roma',
dataDiNascita: 1990-10-04T23:00:00.000Z,
sesso: true,
codiceFiscale: 'pllvrd90l05l234f',
titoliDiStudio: [ 'Diploma', 'Laurea' ]
}
{
id: 2,
nome: 'Marco',
cognome: 'Rossi',
luogoDiNascita: 'Napoli',
dataDiNascita: 1996-01-04T23:00:00.000Z,
sesso: false,
codiceFiscale: 'mrcrss96l01l256g',
titoliDiStudio: [ 'Diploma', 'Laurea Triennale', 'Laurea Magistrale' ]
}
{
id: 3,
nome: 'Ugo',
cognome: 'Bianchi',
luogoDiNascita: 'Milano',
dataDiNascita: 2000-07-08T22:00:00.000Z,
sesso: false,
codiceFiscale: 'uggbnc00q07l246e',
titoliDiStudio: [ 'Diploma', 'Laurea Triennale' ]
}

Nella prossima lezione approfondiremo la conoscenza degli array.

<< Lezione precedente Lezione successiva >> | Vai alla prima lezione

T U T O R I A L S S U G G E R I T I

EDUCATIONAL GAMING BOOK (EGB) "H2O"

L'obiettivo dell'EGB è quello di far conoscere ai giovani le proprietà dell'acqua, sotto molti aspetti uniche, per sensibilizzarli a salvaguardare un bene comune e raro, indispensabile per la vita.

Per il DOWNLOAD di "H2O" clicca qui.

3885 Visualizzazioni

TOP