Moduli e Namespace in TypeScript

Man mano che i tuoi progetti TypeScript crescono, l’organizzazione del codice diventa cruciale per la manutenibilità e la scalabilità. Fortunatamente, TypeScript offre strumenti potenti per strutturare il codice in modo pulito: Moduli, Namespace e Configurazione tramite tsconfig.json.

In questo articolo, esamineremo come utilizzare ES Moduli, Namespace e configurare il tuo progetto TypeScript in modo efficiente.

ES Moduli (Import/Export)

Il JavaScript moderno (ES6+) ha introdotto un modo standardizzato per suddividere il codice in pezzi riusabili tramite moduli, e TypeScript lo supporta pienamente.

Ogni file in TypeScript è un proprio modulo, e puoi esplicitamente esportare o importare il codice tra i file.

Esportazione

Puoi esportare una funzione, una classe, una variabile o un tipo:

// utils/math.ts
export function add(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14;

Puoi anche esportare tutto in una volta:

// utils/math.ts
function subtract(a: number, b: number): number {
  return a - b;
}

function multiply(a: number, b: number): number {
  return a * b;
}

export { subtract, multiply };

O utilizzare esportazioni di default:

// utils/area.ts
export default function area(radius: number) {
  return Math.PI * radius * radius;
}

Importazione

Puoi importare singole esportazioni:

import { add, PI } from "./utils/math";
console.log(add(2, 3));

Oppure importare una esportazione di default:

import area from "./utils/area";
console.log(area(5));

I moduli aiutano a separare le preoccupazioni e migliorano la manutenibilità, funzionando naturalmente in TypeScript grazie alla verifica dei tipi tra i file.

Namespace (Organizzare il Codice Internamente)

Prima che gli ES Moduli diventassero lo standard, TypeScript offriva i Namespace per raggruppare il codice correlato in un singolo blocco.

I Namespace sono utili per organizzare il codice all’interno dello stesso file o tra più file compilati, specialmente quando si usa TypeScript in ambienti senza caricatori di moduli.

Ecco un esempio:

namespace Geometry {
  export function areaOfCircle(radius: number): number {
    return Math.PI * radius * radius;
  }

  export function perimeterOfCircle(radius: number): number {
    return 2 * Math.PI * radius;
  }
}

console.log(Geometry.areaOfCircle(5));
console.log(Geometry.perimeterOfCircle(5));

Nota:

• Devi usare export all’interno del namespace per rendere le funzioni accessibili dall’esterno.
• Accedi ai membri del namespace tramite notazione a punto (Geometry.areaOfCircle).

Quando Usare i Namespace

I Namespace sono meno comuni nei progetti TypeScript moderni, dove gli ES Moduli sono preferiti. Tuttavia, sono ancora utili quando:

• Stai mirando a sistemi legacy.
• Stai raggruppando tutto in un singolo file.
• Stai lavorando senza un caricatore di moduli come Webpack, Vite o Node.js.

Configurazione di TypeScript (tsconfig.json)

Gestire progetti TypeScript di grandi dimensioni diventa più facile con la configurazione giusta.

Il file tsconfig.json definisce come il compilatore TypeScript (tsc) dovrebbe comportarsi.

Ecco un esempio di base:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Opzioni Principali del Compilatore

• target: Specifica la versione di JavaScript a cui compilare (ad esempio, ES5, ES6).
• module: Definisce il sistema di moduli (commonjs, ES6, amd, ecc.).
• strict: Abilita tutte le opzioni di verifica dei tipi stretti.
• outDir: Directory di output per i file JavaScript compilati.
• rootDir: Directory di origine per i file TypeScript.
• esModuleInterop: Permette le importazioni di default dai moduli CommonJS.

Perché è Importante il tsconfig.json?

• Standardizza le impostazioni all’interno del tuo team.
• Automatizza il processo di compilazione.
• Evita l’uso manuale di flag di compilazione.
• Garantisce un output coerente.

Bonus: Impostare gli Import Assoluti

Man mano che i progetti crescono, gli import relativi come ../../../components/Button diventano confusi e difficili da gestire. Gli import assoluti risolvono questo problema permettendoti di importare moduli rispetto a un percorso base.

Ecco come configurarlo:

Passo 1: Aggiorna tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

• baseUrl: Imposta la directory base relativa alla quale i moduli vengono risolti. Di solito, è la tua cartella src.
• paths: Crea alias per semplificare gli import.

Passo 2: Usa gli alias nei tuoi import

Invece di:

import Button from "../../../components/Button";

Ora puoi scrivere:

import Button from "@components/Button";

Vantaggi degli Import Assoluti:

• Percorsi di importazione più puliti e leggibili.
• Riferimenti e spostamenti dei file più facili.
• Meno errori nelle strutture di cartelle profonde.

Nota: Se utilizzi strumenti come Webpack, Vite o Next.js, potrebbe essere necessario configurare separatamente il risolutore in quegli ambienti per abbinare la tua configurazione TypeScript.

Conclusione

Organizzare il codice in TypeScript con ES Moduli, Namespace e una configurazione ben strutturata di tsconfig.json è fondamentale per scrivere applicazioni scalabili e manutenibili.

• Usa gli ES Moduli per le applicazioni moderne.
• Affidati ai Namespace per i progetti più vecchi o per un raggruppamento interno più semplice.
• Configura tsconfig.json per controllare il processo di compilazione in modo efficiente.

Padroneggia questi strumenti e i tuoi progetti TypeScript saranno pronti per qualsiasi scala!