TypeScript linguaggio di programmazione Microsoft è una estensione di Javascript che basa le sue caratteristiche su ECMAScript6.
Sappiamo che uno dei punti di forza di Javascript è la sua flessibilità per quanto riguarda la gestione delle variabili, infatti possiamo attribuire qualsiasi valore senza dichiarare il tipo, invece TypeScript aggiunge i tipi molto similmente a quello che fanno altri linguaggi di programmazione come ad esempio Java.
TypeScript è utilizzato per la realizzazione di grandi progetti dove questa rigidità consente di commettere meno errori o per meglio dire ottimizzare il tempo, infatti con Javascript possiamo invocare funzioni con qualsiasi tipo di valore, ma non quello che gli occorre, ed accorgerci di questo solo quando andiamo ad eseguire il codice, mentre con TypeScript al momento dell’ utilizzo di una funzione già sappiamo cosa utilizzare e di che tipo.
La caratteristica di TypeScript è che può essere utilizzato sia in progetti Web che NodeJs, infatti il codice sorgente TypeScript (.TS) viene compilato e trasformato in codice JavaScript (.JS), per ottenere questo risultato il compilatore utilizza NodeJS che va comunque installato.
Installazione di TypeScript
Dopo aver installato Node.js, apri il terminale ed esegui il seguente comando per installare il compilatore TypeScript globalmente:
npm install -g typescript
L’ opzione -g installa il pacchetto globalmente quindi in una cartella centrale del sistema operativo, di solito è C:\Users\NOME_USER\AppData\Roaming
Nuovo Progetto TypeScript
In VSCode aprire il folder in cui si vuole creare il progetto Typescript e da terminale inizializzare la cartella con il comando: npm (node package manager)
npm init -y
la y sta per yes e questo genera il file package.json con le impostazioni predefinite.
Sempre da terminale dobbiamo fornire al progetto le dipendenze di sviluppo con la direttiva:
npm install typescript
infine creare il file json di configurazione tsconfig.ts con il seguente contenuto relativo ad alcune opzioni del compilatore ( è possibile ottenere il file preconfigurato con il comando: tsc –init ):
{
“compilerOptions”:
{
“target” : “es5”,
“module” : “commonjs”,
“outDir” : “./dist”,
“rootDir” : “./src” //esempio di cartella sorgente
“strict”: true
}
}
Terminate le configurazioni necessarie per il progetto, implementiamo un file main.ts (o qualsiasi altro nome ) per poi occuparci della compilazione ed esecuzione. Vediamo il file e la struttura del progetto VSCode:
La compilazione del progetto con tsc genera la cartella ./dist in automatico nel momento in cui legge la configurazione nel file tsconfig.json
Quindi è possibile eseguire il file javascript generato dalla compilazione con il comando npm (node package manager):
npm start
Vedi le stringhe di configurazione del file JSON
StrutturaTypeScript
Esploriamo la struttura di TypeScript attraverso variabili, costanti, assegnazioni, cicli e altri costrutti:
Variabili e Costanti
Operatori di Assegnazione
let x: number = 10;
let y: number = 5;
let somma: number = x + y;
let prodotto: number = x * y;
Incremento e Decremento
let contatore: number = 0;
contatore++; // Incremento
contatore–-; // Decremento
Union Type
risultato = “Dieci“; // È valido
Enumerazioni
Martedì,
Mercoledì,
Giovedì,
Venerdì,
Sabato,
Domenica
}
let giorno: Giorni = Giorni.Lunedì;
Iterazione FOR
for (let i: number = 0; i < 5; i++) {
console.log(i);
}
Iterazione WHILE
console.log(contatore);
contatore++;
}
Costrutto if/else
let numero: number = 10;
if (numero > 0) {
console.log(“positivo”);
} else if (numero < 0) {
console.log(“negativo”);
} else {
console.log(“numero zero”);
}
Tipizzazione delle variabili
let booleano: boolean = true;
let interoImplicito = 5;
let virgolaImplicito = 5.5;
let somma: number = x + y;
let differenza: number = x – y;
let prodotto: number = x * y;
let quoziente: number = x / y;
let resto: number = x % y;
Array
Operazioni Array
// Accesso a un elemento
let numero = numeri[0];
// Iterazione su un array
for (let numero of numeri) {
console.log(numero);
}
Spread Operator
Lo Spread Operator (...) lo strumento piu rivoluzionario per creare liste di dati. Il simbolo ... “spalma” il contenuto di un array. È fondamentale perché in TypeScript (e Angular) preferiamo la immutabilità: invece di modificare un array esistente, ne creiamo uno nuovo.
const base = [“MI”, “RM”];
const nuovi = [“NA”, “TO”];
// Unire i due array in uno nuovo
const totale = […base, …nuovi];
// Risultato: [“MI”, “RM”, “NA”, “TO”]
const province = [“MI”, “NA”];
const listaAggiornata = […province, “RM”]; // Aggiunge Roma alla fine
Dichiarazione Funzione
return a + b;
Questa è una funzione di base che prende due parametri di tipo number e restituisce un risultato di tipo number.
Funzione Parametri Opzionali
return `${saluto}, ${nome}!`;
return `Ciao, ${nome}!`;
}
}
Il parametro saluto è opzionale (marcato con ?), quindi può essere omesso durante la chiamata alla funzione.
Funzione Anonima con Assegnazione
}
Una funzione è definita “anonima” quando non ha un nome identificativo associato a essa. Nel codice che ti ho mostrato, la funzione è definita e assegnata direttamente a una variabile moltiplica, ma non ha un nome di funzione specifico come “aggiungi”, “sottrai”, ecc.
Con le variabili, puoi definire un’interfaccia o un tipo per la funzione stessa. Questo è utilissimo quando devi passare funzioni come parametri (callback). Vediamo un esempio :
Ogni funzione di tipo ‘Operazione’ deve avere due numeri e restituire un numero
type Operazione = (a: number, b: number) => number;
Ora posso creare diverse variabili che seguono questo schema
let moltiplica: Operazione = (x, y) => x * y;
let somma: Operazione = (x, y) => x + y;
Funzione Generica
E’ una funzione che può lavorare con diversi tipi di dati senza specificare il tipo in anticipo. Vediamo alcuni esempi:
}
let numero: number = identitaGenerica(5);
let stringa: string = identitaGenerica(“Ciao“);
for (let elemento of matrice) {
console.log(elemento);
}
}
stampaMatrice([“a“, “b“, “c“]);
function concatenaArray<T>(array1: T[], array2: T[]): T[] {
return array1.concat(array2);
}
let numeriConcatenati: number[] = concatenaArray([1, 2, 3], [4, 5, 6]);
let stringheConcatenate: string[] = concatenaArray([“a“, “b“], [“c“, “d“]);
Interfacce TypeScript
Specifica la forma degli oggetti, includendo i tipi di dati delle loro proprietà, senza implementare alcun comportamento. Le interfacce sono utilizzate per dichiarare la struttura che un oggetto deve seguire, fornendo un modo per enfatizzare il contratto tra il consumatore di un’interfaccia e l’implementazione effettiva di un oggetto. Vediamo un esempio di interfaccia:
cognome:string
età: number;
}
E’ anche possibile creare file TypeScript contenente solo dichiarazioni di interfacce e file Typescript contenente funzioni ti tipo interfacce. Vediamo l’ esempio successivo:
Nel prossimo esempio vediamo la creazione di un oggetto, studenti, utilizzando una interfaccia:
Possiamo notare che alla riga-10 del main.ts abbiamo utilizzato un template string. Questa sintassi è parte di ECMAScript 6 (ES6) e successivi e viene spesso utilizzata per creare stringhe multilinea o incorporare espressioni JavaScript all’interno di stringhe.
Arrow Function
Le arrow function (funzioni freccia) sono una caratteristica introdotta in ECMAScript 6 (ES6) che fornisce una sintassi più concisa e alcune differenze chiave rispetto alle funzioni tradizionali in JavaScript. Ecco alcune caratteristiche principali delle arrow function:
La sintassi di base di una arrow function è la seguente:
const somma = (a, b) => a + b;
In questo esempio, la arrow function somma accetta due parametri, a e b, e restituisce la loro somma.
Ecco un esempio di dichiarazione e utilizzo di una funzione arrow:
return a + b;
};
// Utilizzo della funzione arrow
const risultato = somma(3, 5);
console.log(“La somma è:”, risultato);
Le funzioni arrow in TypeScript possono essere utilizzate in diverse forme, a seconda dei casi d’uso. Ecco alcuni esempi di come possono essere utilizzate, in termini di parametri e restituzione di valori:
Funzione arrow senza parametri senza valore di ritorno:
const saluta = (): void => {
console.log(“Ciao!”);
};
Funzione arrow con parametri e valore di ritorno:
const somma = (a: number, b: number): number => {
return a + b;
};
Funzione arrow con parametri e valore di ritorno implicito:
const moltiplica = (a: number, b: number) => a * b;
Funzione arrow con restituzione di oggetti:
const creaPersona = (nome: string, eta: number): { nome: string, eta: number } => {
return { nome, eta };
};
Classi e Oggetti
Le classi in TypeScript offrono una struttura orientata agli oggetti che consente di organizzare e strutturare il codice in maniera più chiara e manutenibile. Possono contenere proprietà e metodi, fornendo un modo per modellare oggetti e relazioni tra di essi. Per creare una classe in TypeScript, utilizziamo la parola chiave class.
Se stai riscontrando un problema quando utilizzi le virgolette singole (' ') anziché i backticks (` `) con l’interpolazione delle stringhe, è possibile che ciò sia dovuto al fatto che le virgolette singole non supportano l’interpolazione delle stringhe in TypeScript o JavaScript.
L’interpolazione delle stringhe è possibile solo utilizzando le backticks (` `).
Possiamo notare che la riga-4 del main.ts crea un oggetto ricavato da una istanza di classe, ma è anche vero che in Typescript gli oggetti si possono implementare anche da struttre dati che contengono un insieme di coppie chiave-valore, simili agli oggetti in JavaScript. Vediamo nel prossimo esempio come creare oggetti letterali, dove non è necessario avere una classe: