Moduli in TypeScript

Moduli in TypeScript

Questo articolo spiega i moduli in TypeScript.

YouTube Video

Moduli in TypeScript

I moduli in TypeScript sono una caratteristica importante per migliorare il riutilizzo e la manutenzione del codice. Come JavaScript, anche TypeScript si basa sul sistema di moduli ECMAScript 2015 (ES6), ma una caratteristica fondamentale è la possibilità di sfruttare il sistema di tipi di TypeScript.

Cosa sono i moduli?

Un modulo è un sistema per raggruppare codice correlato in un'unica unità che può essere importata e riutilizzata in altri file. In TypeScript, viene creato uno scope per file per incapsulare il codice, impedendo che influenzi altri file. Ciò aiuta a evitare conflitti di codice e rende la manutenzione più semplice.

Moduli interni ed esterni

  • Moduli interni (Namespace): Un metodo di definizione dei moduli utilizzato in TypeScript 1.5 e versioni precedenti, ora non raccomandato. Ora è trattato come un 'namespace.'.
  • Moduli esterni: Lo standard attuale, basato sul sistema di moduli ES6. Questa sezione spiega principalmente i moduli esterni.

Come esportare i moduli

Quando si creano moduli, è necessario esportarli per consentire l'accesso dall'esterno. In TypeScript, è possibile esportare valori, funzioni, classi, ecc. utilizzando la parola chiave export. Ci sono principalmente due tipi di esportazioni.

Esportazioni nominate

Utilizzate per effettuare esportazioni multiple, consentendo al lato dell'importazione di selezionare e utilizzare quelle specifiche.

 1// mathUtils.ts
 2export const pi: number = 3.14159;
 3
 4export function add(x: number, y: number): number {
 5    return x + y;
 6}
 7
 8export function subtract(x: number, y: number): number {
 9    return x - y;
10}

Esportazioni predefinite

Utilizzate quando si desidera che l'intero modulo abbia un'unica esportazione predefinita. Le esportazioni predefinite vengono esportate senza un nome, consentendo al lato dell'importazione di riceverle con qualsiasi nome.

 1// calculator.ts
 2export default class Calculator {
 3    add(x: number, y: number): number {
 4        return x + y;
 5    }
 6
 7    subtract(x: number, y: number): number {
 8        return x - y;
 9    }
10}

Come Importare i Moduli

Per utilizzare i moduli, importa valori, funzioni, classi, ecc. dal modulo utilizzando la parola chiave import.

Importazioni Nominate

Quando si importano elementi specifici da un'esportazione nominata, utilizzare le parentesi graffe {}.

1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);

Importazione Predefinita

Quando si importa un'esportazione predefinita, è possibile assegnarle qualsiasi nome.

1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);

Alias di Importazione

Per evitare conflitti di nomi o abbreviare nomi lunghi, è possibile importare con un alias.

1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);

Differenza tra Moduli e Namespace

Un namespace (namespace) è una struttura di modulo interna utilizzata nelle prime versioni di TypeScript per raggruppare il codice. Tuttavia, ora sono consigliati i moduli ES6 e i namespace sono raramente necessari.

I namespace possono essere definiti all'interno dello stesso file o su più file e, poiché possono essere espansi a livello globale, la gestione delle dipendenze può diventare complessa. Al contrario, i moduli hanno scope separati per file e dipendenze chiare, rendendoli un metodo più moderno e sicuro.

 1// Example of a namespace
 2namespace Geometry {
 3    export function calculateArea(radius: number): number {
 4        return Math.PI * radius * radius;
 5    }
 6}
 7
 8// Can be used directly without importing the module (not recommended)
 9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);

Risoluzione dei Moduli in TypeScript

In TypeScript, ci sono due strategie per la risoluzione dei moduli.

  • Risoluzione Moduli Node: Il metodo di risoluzione standard utilizzato negli ambienti Node.js che risolve i moduli cercando all'interno della cartella node_modules.
  • Risoluzione Moduli Classica: Metodo di risoluzione proprio di TypeScript che esegue ricerche più flessibili, ma che oggi è raramente utilizzato.

Generalmente viene utilizzata la risoluzione dei moduli Node, abilitata di default a meno che non sia specificato diversamente nel file di configurazione.

Esempio Pratico

Infine, viene presentato un esempio di implementazione e riutilizzo di funzioni computazionali utilizzando i moduli.

mathUtils.ts

 1export const pi: number = 3.14159;
 2
 3export function multiply(x: number, y: number): number {
 4    return x * y;
 5}
 6
 7export function divide(x: number, y: number): number {
 8    if (y === 0) {
 9        throw new Error("Cannot divide by zero");
10    }
11    return x / y;
12}

calculator.ts

 1import { multiply, divide } from './mathUtils';
 2
 3export default class Calculator {
 4    multiplyNumbers(x: number, y: number): number {
 5        return multiply(x, y);
 6    }
 7
 8    divideNumbers(x: number, y: number): number {
 9        return divide(x, y);
10    }
11}

main.ts

1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);

Riepilogo

Il sistema di moduli TypeScript è uno strumento potente per organizzare il codice, migliorare la riusabilità e incrementare la manutenibilità. Si consiglia l'uso di moduli esterni basati sui moduli ES6, e l'uso delle parole chiave export e import consente una facile esportazione e importazione dei moduli.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video