Come usare TypeScript in una configurazione Monorepo

Una configurazione monorepo consente di gestire più pacchetti o progetti in un singolo repository. Con TypeScript, questa configurazione è particolarmente potente per condividere tipi, interfacce e persino utility tra diversi pacchetti. Questa guida ti guiderà attraverso la configurazione di TypeScript in un ambiente monorepo.

1. Impostazione del Monorepo

Per impostare un monorepo, puoi usare strumenti come npm workspaces o yarn workspaces. Questi strumenti ti permettono di gestire più pacchetti nello stesso repository e semplificano la condivisione del codice tra progetti.

1.1 Inizializzazione di un Monorepo

Per prima cosa, crea una nuova cartella per il tuo monorepo e inizializzala con npm o yarn.

mkdir my-monorepo
cd my-monorepo
npm init -y

Quindi, configura gli spazi di lavoro nel tuo package.json:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Questa configurazione indica a npm o yarn che tutti i pacchetti saranno salvati nella cartella packages.

2. Aggiunta di pacchetti al Monorepo

Crea due pacchetti nel tuo monorepo. Per questo esempio, creeremo un pacchetto shared per il codice riutilizzabile e un pacchetto web-app per un'applicazione frontend.

mkdir -p packages/shared
mkdir -p packages/web-app

All'interno di ogni pacchetto, inizializza un package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Aggiungere TypeScript al Monorepo

Successivamente, imposteremo TypeScript. Installa TypeScript e le dipendenze necessarie alla radice del tuo monorepo:

npm install typescript --save-dev

Creare un file tsconfig.json a livello di radice per definire la configurazione TypeScript per l'intero monorepo:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

La chiave qui è l'opzione paths, che consente a TypeScript di comprendere le importazioni da diversi pacchetti nel monorepo.

4. Configurazione di TypeScript in ogni pacchetto

Ogni pacchetto ha bisogno del proprio tsconfig.json per funzionare correttamente nel monorepo. Ecco un esempio di configurazione per il pacchetto shared:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

E per il pacchetto web-app:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Ora TypeScript può essere utilizzato in ogni pacchetto e le configurazioni vengono condivise dalla radice tsconfig.json.

5. Aggiunta di codice TypeScript ai pacchetti

Aggiungiamo un po' di codice TypeScript di esempio a entrambi i pacchetti. Nel pacchetto shared, crea una cartella src e aggiungi un file TypeScript:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

In index.ts, esporta una semplice funzione:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

Nel pacchetto web-app, crea una cartella src e un file index.ts:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

Ora, importiamo la funzione condivisa:

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. Costruire il Monorepo

Per compilare tutto il codice TypeScript nel monorepo, dobbiamo usare il compilatore TypeScript. Alla radice del monorepo, esegui:

npx tsc --build

Questo comando compilerà tutti i pacchetti seguendo i rispettivi file tsconfig.json.

Conclusione

In questa guida, abbiamo spiegato come impostare e usare TypeScript in un monorepo. Organizzando il tuo codice in una struttura monorepo, puoi facilmente condividere il codice tra più pacchetti, rendendo il tuo processo di sviluppo più efficiente. Con la tipizzazione forte e i riferimenti di progetto di TypeScript, questa configurazione è perfetta per applicazioni su larga scala o librerie condivise.