Cum să utilizați TypeScript într-o configurare Monorepo

O configurare monorepo vă permite să gestionați mai multe pachete sau proiecte într-un singur depozit. Cu TypeScript, această configurare este deosebit de puternică pentru partajarea tipurilor, interfețelor și chiar a utilităților în diferite pachete. Acest ghid vă va ghida prin cum să configurați TypeScript într-un mediu monorepo.

1. Configurarea Monorepo-ului

Pentru a configura un monorepo, puteți folosi instrumente precum spațiile de lucru npm sau spațiile de lucru yarn. Aceste instrumente vă permit să gestionați mai multe pachete în același depozit și ușurează partajarea codului între proiecte.

1.1 Inițializarea unui Monorepo

Mai întâi, creați un folder nou pentru monorepo și inițializați-l cu npm sau yarn.

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

Apoi, configurați spațiile de lucru în package.json:

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

Această configurare îi spune lui npm sau yarn că toate pachetele vor locui în folderul packages.

2. Adăugarea pachetelor la Monorepo

Creați două pachete în monorepo. Pentru acest exemplu, vom crea un pachet shared pentru cod reutilizabil și un pachet web-app pentru o aplicație frontend.

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

În interiorul fiecărui pachet, inițializați un package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Adăugarea TypeScript la Monorepo

În continuare, vom configura TypeScript. Instalați TypeScript și dependențele necesare la rădăcina monorepo-ului dvs.:

npm install typescript --save-dev

Creați un tsconfig.json la nivel rădăcină pentru a defini configurația TypeScript pentru întregul monorepo:

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

Cheia aici este opțiunea paths, care permite TypeScript să înțeleagă importurile din diferite pachete din monorepo.

4. Configurarea TypeScript în fiecare pachet

Fiecare pachet are nevoie de propriul tsconfig.json pentru a funcționa corect în monorepo. Iată un exemplu de configurare pentru pachetul shared:

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

Și pentru pachetul web-app:

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

Acum, TypeScript poate fi folosit în fiecare pachet, iar configurațiile sunt partajate de la rădăcina tsconfig.json.

5. Adăugarea codului TypeScript la pachete

Să adăugăm un exemplu de cod TypeScript la ambele pachete. În pachetul shared, creați un folder src și adăugați un fișier TypeScript:

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

În index.ts, exportați o funcție simplă:

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

În pachetul web-app, creați un folder src și un fișier index.ts:

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

Acum, importați funcția partajată:

import { greet } from 'shared';

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

6. Construirea Monorepo-ului

Pentru a compila tot codul TypeScript în monorepo, trebuie să folosim compilatorul TypeScript. La rădăcina monorepo, rulați:

npx tsc --build

Această comandă va compila toate pachetele urmând fișierele respective tsconfig.json.

Concluzie

În acest ghid, am abordat cum să configurați și să utilizați TypeScript într-un monorepo. Prin organizarea codului într-o structură monorepo, puteți partaja cu ușurință codul în mai multe pachete, făcând procesul de dezvoltare mai eficient. Cu tastarea puternică și referințele de proiect ale TypeScript, această configurație este perfectă pentru aplicații la scară largă sau biblioteci partajate.