Console
TypeScript ha cambiato il modo in cui molti sviluppatori scrivono JavaScript. Aggiunge un sistema di tipi statici su un linguaggio che per sua natura non ne ha, e il risultato è codice più prevedibile, più facile da mantenere e con molti meno errori che arrivano in produzione senza essere stati scoperti prima. Con un compilatore TypeScript online puoi sperimentare con questo linguaggio direttamente nel browser, senza installare nulla e senza configurare il processo di compilazione che normalmente è necessario per usarlo.
L'editor TypeScript di Biadets è completamente gratuito e pensato per chi vuole capire come funziona TypeScript, testare un comportamento specifico del sistema di tipi o semplicemente scrivere codice in modo più strutturato rispetto al JavaScript tradizionale.
TypeScript è un superset di JavaScript: qualsiasi codice JavaScript valido è anche codice TypeScript valido. Non si tratta di un linguaggio completamente diverso, ma di un livello aggiuntivo che si sovrappone a JavaScript introducendo funzionalità che quest'ultimo non ha nativamente, prima tra tutte la tipizzazione statica.
Questo significa che puoi iniziare ad adottare TypeScript in modo graduale, aggiungendo annotazioni di tipo solo dove ti servono e lasciando il resto invariato. Con il tempo, man mano che il progetto cresce, puoi rendere il codice sempre più tipizzato e beneficiare sempre di più dei vantaggi che TypeScript offre.
Prima di essere eseguito, il codice TypeScript viene compilato in JavaScript standard. È il compilatore che si occupa di verificare che tutti i tipi siano coerenti e di segnalare gli errori prima che il programma venga eseguito. Nell'editor di Biadets questo processo avviene automaticamente: tu scrivi codice TypeScript e il compilatore fa il resto in background.
La differenza più immediata tra codice TypeScript e JavaScript è la possibilità di dichiarare esplicitamente il tipo di ogni variabile, parametro e valore di ritorno. In JavaScript puoi assegnare qualsiasi valore a qualsiasi variabile in qualsiasi momento. In TypeScript il compilatore ti ferma se stai cercando di usare una stringa dove ti aspetti un numero, o se stai chiamando un metodo che non esiste sul tipo che stai usando.
let nome: string = "Federica";
let eta: number = 31;
let attivo: boolean = true;
nome = 42; // Errore: il tipo 'number' non è assegnabile al tipo 'string'Questo tipo di errore, in JavaScript, lo scopriresti solo durante l'esecuzione del programma, magari in un momento inopportuno e difficile da riprodurre. TypeScript te lo segnala mentre scrivi, prima ancora di eseguire qualcosa. Nei progetti di grandi dimensioni, con molti file e molti sviluppatori che lavorano insieme, questo fa una differenza enorme.
Una preoccupazione comune di chi si avvicina a TypeScript per la prima volta è che aggiungere annotazioni di tipo ovunque renda il codice verboso e pesante da scrivere. In realtà TypeScript è in grado di inferire il tipo di una variabile dal suo valore iniziale, senza che tu debba specificarlo esplicitamente.
let messaggio = "Ciao"; // TypeScript inferisce: string
let contatore = 0; // TypeScript inferisce: number
let flag = true; // TypeScript inferisce: boolean
contatore = "testo"; // Errore: anche senza annotazione esplicitaIl compilatore capisce da solo che messaggio è una stringa perché le hai assegnato una stringa. Da quel momento in poi, se provi ad assegnarle un valore di tipo diverso, TypeScript ti avvisa. Scrivi meno, ottieni comunque la sicurezza dei tipi.
Uno degli strumenti più potenti del codice TypeScript è la possibilità di definire la forma degli oggetti con interface e type. Invece di lavorare con oggetti generici la cui struttura è implicita e deve essere ricordata a memoria, puoi dichiarare esattamente quali proprietà un oggetto deve avere e di che tipo devono essere.
interface Prodotto {
id: number;
nome: string;
prezzo: number;
disponibile: boolean;
}
function mostraProdotto(p: Prodotto): string {
return `${p.nome} costa ${p.prezzo} euro`;
}
const scarpe: Prodotto = {
id: 1,
nome: "Sneaker classiche",
prezzo: 89,
disponibile: true
};
console.log(mostraProdotto(scarpe));Se provi a passare alla funzione un oggetto che manca di una proprietà richiesta, o che ha una proprietà con il tipo sbagliato, il compilatore TypeScript te lo segnala immediatamente. Questo rende il codice molto più robusto, soprattutto quando le strutture di dati vengono usate in molti punti diversi del progetto.
La differenza tra interface e type è sottile: entrambi permettono di descrivere la forma di un oggetto, ma type è più flessibile e può essere usato anche per descrivere unioni, intersezioni e tipi primitivi rinominati, mentre interface supporta l'estensione e la fusione di dichiarazioni in modo più naturale per la programmazione orientata agli oggetti.
Nel mondo reale i dati non sono sempre dello stesso tipo. A volte una funzione accetta sia una stringa che un numero. A volte una proprietà di un oggetto potrebbe non essere presente. TypeScript ha strumenti precisi per gestire questi casi senza rinunciare alla sicurezza dei tipi.
Gli union type permettono di dichiarare che un valore può essere di uno tra più tipi possibili:
function formatta(valore: string | number): string {
if (typeof valore === "number") {
return valore.toFixed(2);
}
return valore.trim();
}Le optional properties si indicano con un punto interrogativo e permettono di dichiarare che una proprietà di un'interfaccia può essere presente oppure assente:
interface Utente {
nome: string;
email: string;
telefono?: string; // Opzionale
}
const utente: Utente = {
nome: "Riccardo",
email: "[email protected]"
// telefono può essere omesso senza errori
};I generics sono uno dei concetti più potenti del sistema di tipi di TypeScript e uno di quelli che, una volta capiti, cambiano il modo di scrivere codice. Permettono di creare funzioni, classi e interfacce che lavorano con tipi diversi mantenendo piena sicurezza di tipo, senza dover scrivere la stessa logica più volte per ogni tipo specifico.
function primoElemento<T>(array: T[]): T | undefined {
return array[0];
}
const numeri = [10, 20, 30];
const parole = ["mela", "pera", "banana"];
console.log(primoElemento(numeri)); // 10
console.log(primoElemento(parole)); // "mela"La funzione primoElemento funziona con array di qualsiasi tipo. TypeScript inferisce automaticamente il tipo specifico in base all'array che passi, e il valore restituito ha esattamente quel tipo. Nessun cast manuale, nessuna perdita di informazione sul tipo.
TypeScript potenzia le classi di JavaScript aggiungendo modificatori di accesso, proprietà tipizzate, metodi astratti e molto altro. Il risultato è un sistema di classi che si avvicina a quello di linguaggi come Java o C#, ma che compila in JavaScript standard.
class Conto {
private saldo: number;
readonly titolare: string;
constructor(titolare: string, saldoIniziale: number) {
this.titolare = titolare;
this.saldo = saldoIniziale;
}
deposita(importo: number): void {
if (importo <= 0) throw new Error("Importo non valido");
this.saldo += importo;
}
getSaldo(): number {
return this.saldo;
}
}
const conto = new Conto("Marina", 1000);
conto.deposita(500);
console.log(conto.getSaldo()); // 1500
console.log(conto.titolare); // "Marina"Il modificatore private impedisce l'accesso diretto alla proprietà dall'esterno della classe. readonly permette la lettura ma non la modifica dopo l'inizializzazione. TypeScript verifica tutto questo a compile time, prima che il codice venga eseguito.
Le enumerazioni, o enum, sono un costrutto che TypeScript aggiunge a JavaScript e che manca completamente nel linguaggio di base. Permettono di definire un insieme di valori con nome, rendendo il codice molto più leggibile rispetto all'uso di stringhe o numeri magici sparsi nel codice.
enum Stato {
Attivo,
Inattivo,
Sospeso
}
function descriviStato(s: Stato): string {
switch (s) {
case Stato.Attivo: return "L'utente è attivo";
case Stato.Inattivo: return "L'utente non è attivo";
case Stato.Sospeso: return "L'utente è sospeso";
}
}
console.log(descriviStato(Stato.Attivo)); // L'utente è attivoTypeScript è diventato lo standard de facto per i progetti JavaScript di medie e grandi dimensioni. Angular lo adotta come linguaggio principale fin dalla sua seconda versione. React e Vue hanno entrambi un supporto eccellente per TypeScript e molti team lo usano come impostazione predefinita per i nuovi progetti. Node.js si usa sempre più spesso insieme a TypeScript per il backend.
Aziende come Microsoft, che ha creato TypeScript, Google, Slack, Airbnb e molte altre hanno adottato TypeScript su progetti di produzione con basi di codice enormi, e i risultati in termini di riduzione dei bug e miglioramento della produttività sono stati documentati pubblicamente.
Imparare TypeScript oggi non è solo un vantaggio tecnico: è sempre più spesso un requisito esplicito nelle offerte di lavoro per sviluppatori frontend e backend.
L'editor TypeScript di Biadets non ha nessun costo, non richiede registrazione e non ha limiti di utilizzo. Puoi usarlo ogni volta che vuoi esplorare una funzionalità del sistema di tipi, testare come si comporta il compilatore in un caso specifico o semplicemente scrivere codice TypeScript senza dover configurare un progetto locale con tutti i file di configurazione che normalmente questo richiede.
Configurare TypeScript da zero in un progetto locale implica installare il compilatore tramite NPM, creare il file tsconfig.json, impostare i percorsi di input e output e collegare tutto al resto del progetto. Con il compilatore online tutto questo scompare: apri il browser e inizi a scrivere codice TypeScript. Per imparare, per sperimentare e per testare idee, è esattamente lo strumento di cui hai bisogno.