Lezioni del modulo (2/2)
Dichiarazioni e Merging
I file di dichiarazione di tipo (con estensione .d.ts) vengono utilizzati in TypeScript per descrivere la forma di codice JavaScript esistente senza implementare alcuna logica reale. Contengono solo definizioni di tipi, interfacce e firme di funzioni.
Questi file sono fondamentali quando usiamo librerie di terze parti scritte in puro JavaScript.
Declaration Merging (Fusione delle Dichiarazioni)
Il Declaration Merging è un comportamento in cui il compilatore unisce due o più definizioni distinte con lo stesso nome in una singola definizione.
Il caso più comune è la fusione delle interfacce:
interface User {
name: string;
}
interface User {
age: number;
}
// L'interfaccia risultante User possiede sia name che age!
const student: User = {
name: 'Alice',
age: 23,
};Se le proprietà hanno lo stesso nome, devono essere dello stesso tipo, altrimenti TypeScript segnalerà un errore.
Modificare Moduli Globali ed Esterni
Possiamo usare il declaration merging per estendere interfacce definite in altri moduli o nello scope globale.
Ad esempio, se vogliamo aggiungere una proprietà all'oggetto globale window del browser:
declare global {
interface Window {
analyticsToken: string;
}
}Usando declare global, indichiamo a TypeScript che stiamo inserendo una nuova firma all'interno dell'interfaccia Window già esistente a livello globale.
Prova tu
Esercizio 1: Declaration Merging Base
In TypeScript, le interfacce con lo stesso nome nello stesso scope vengono fuse automaticamente. Dichiara un'interfaccia User con proprietà name: string, poi in un secondo blocco dichiara la stessa interfaccia User aggiungendo la proprietà age: number. Dichiara infine una costante user di tipo User con valori appropriati.
Mostra suggerimento
Dichiara due volte interface User inserendo le rispettive proprietà, e poi assegna i campi all'oggetto user.
Soluzione disponibile dopo 3 tentativi
Esercizio 2: Estensione dell'Interfaccia Globale Window
Immagina di voler estendere l'interfaccia globale Window per aggiungervi una proprietà personalizzata chiamata config di tipo Record<string, string>. Scrivi la dichiarazione corretta usando declare global per fondere la nuova proprietà nell'interfaccia Window globale.
Mostra suggerimento
Usa declare global { interface Window { config: Record<string, string>; } }.
Soluzione disponibile dopo 3 tentativi