Integrazione dei moduli TypeScript e gestione dei file JavaScript nidificati

TypeScript è stato un'aggiunta preziosa all'ecosistema JavaScript per oltre un decennio, guadagnando popolarità grazie alla sua capacità di fornire sicurezza nei tipi per il codice JavaScript.

Tipi per pacchetti JavaScript#

Per mantenere la retrocompatibilità e la flessibilità, TypeScript consente agli autori dei pacchetti di fornire definizioni di tipo per i loro pacchetti JavaScript. Tali definizioni di tipo sono generalmente archiviate nel repository "DefinitelyTyped". Puoi utilizzare lo scope @types per installare queste definizioni di tipo, ad esempio, @types/react è la definizione di tipo per il pacchetto React.

Dopo aver installato queste definizioni di tipo, puoi utilizzare il pacchetto con sicurezza nella sicurezza dei tipi. Ecco un esempio di definizione di un componente React con sicurezza nei tipi:

Integrazione dei moduli#

Mentre la maggior parte dei pacchetti JavaScript popolari ha definizioni di tipo disponibili nello scope @types, alcuni pacchetti potrebbero mancare di tali definizioni o averle obsolete. In tali casi, TypeScript fornisce una funzionalità potente chiamata "integrazione dei moduli" per aggiungere definizioni di tipo per questi pacchetti. Diamo un'occhiata a un esempio:

Ora puoi usare questa definizione di tipo integrata nel tuo codice:

L'integrazione dei moduli non solo ti consente di aggiungere definizioni di tipo per i pacchetti, ma anche di estendere le definizioni di tipo esistenti. Ad esempio, puoi aggiungere una nuova proprietà all'oggetto window:

E usarlo nel tuo codice:

In un post precedente, abbiamo parlato di un problema di tipo nella libreria React Router, e abbiamo dovuto superare l'impatto estendendo e integrando il tipo esistente tramite un file di dichiarazione personalizzato.

Ricorda che quando utilizzi l'integrazione dei moduli, è fondamentale garantire l'accuratezza delle tue definizioni di tipo esaminando attentamente il codice sorgente JavaScript. Definizioni di tipo errate possono portare a errori in fase di esecuzione. Nell'esempio sopra, la proprietà window.foo deve essere una stringa che esiste sull'oggetto window.

Integrazione globale#

A volte potresti incontrare script che introducono variabili globali e potresti voler fornire definizioni di tipo per queste variabili globali per utilizzarle nel tuo codice TypeScript. Ad esempio, se hai uno script che imposta una variabile globale chiamata __DEV__:

Puoi aggiungere definizioni di tipo per questa variabile globale in questo modo:

Ora puoi usarla nel tuo codice TypeScript:

Combinando l'integrazione dei moduli e l'integrazione globale, puoi persino estendere le definizioni di tipo per i prototipi JavaScript. Tuttavia, ciò non è generalmente raccomandato in quanto può inquinare lo scope globale.

Il potere dell’integrazione dei moduli consente tali estensioni, ma sii cauto nell' evitare l'inquinamento dello scope globale.

File JavaScript nidificati#

Nei casi menzionati in precedenza, abbiamo ipotizzato che gli importazioni potessero essere risolti tramite il file di ingresso del pacchetto. Tuttavia, alcuni pacchetti esportano file JavaScript nidificati senza le relative definizioni di tipo. Considera un pacchetto chiamato foo con la seguente struttura:

Il pacchetto foo esporta il file index.js come punto di entrada e esporta anche la directory bar.

Per integrare le definizioni di tipo per il pacchetto foo, puoi creare un file foo.d.ts:

Tuttavia, se tenti di importare il file baz.js in TypeScript, incontrerai un errore:

Per integrare le definizioni di tipo per il file baz.js, è necessario creare un file baz.d.ts separato:

Questo assicura che TypeScript possa localizzare il modulo e le sue definizioni di tipo associate:

Per mantenere organizzate le definizioni di tipo, puoi imitare la struttura del pacchetto nei tuoi file di definizione di tipo:

Questo approccio mantiene il tuo codice TypeScript strutturato e sicuro nei tipi, anche quando gestisci file JavaScript nidificati.