Hvordan bruke TypeScript i et Monorepo-oppsett

Et monorepo-oppsett lar deg administrere flere pakker eller prosjekter i et enkelt depot. Med TypeScript er dette oppsettet spesielt kraftig for deling av typer, grensesnitt og til og med verktøy på tvers av forskjellige pakker. Denne veiledningen vil lede deg gjennom hvordan du setter opp TypeScript i et monorepo-miljø.

1. Sette opp Monorepo

For å sette opp en monorepo, kan du bruke verktøy som npm arbeidsområder eller garn arbeidsområder. Disse verktøyene lar deg administrere flere pakker i samme depot og gjør det enkelt å dele kode på tvers av prosjekter.

1.1 Initialisere en Monorepo

Først oppretter du en ny mappe for monorepoen din og initialiser den med npm eller yarn.

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

Deretter konfigurerer du arbeidsområder i package.json:

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

Dette oppsettet forteller npm eller garn at alle pakkene vil leve i packages-mappen.

2. Legge til pakker til Monorepo

Lag to pakker i monorepoen din. For dette eksemplet lager vi en delt-pakke for gjenbrukbar kode og en web-app-pakke for en grensesnittapplikasjon.

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

Inni hver pakke, initialiser en package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Legger til TypeScript til Monorepo

Deretter setter vi opp TypeScript. Installer TypeScript og de nødvendige avhengighetene i roten av monorepoen din:

npm install typescript --save-dev

Lag et rotnivå tsconfig.json for å definere TypeScript-konfigurasjonen for hele monorepoen:

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

Nøkkelen her er paths-alternativet, som lar TypeScript forstå import fra forskjellige pakker i monorepoen.

4. Konfigurere TypeScript i hver pakke

Hver pakke trenger sin egen tsconfig.json for å fungere ordentlig i monorepoen. Her er et eksempel på konfigurasjon for shared-pakken:

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

Og for web-app-pakken:

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

Nå kan TypeScript brukes i hver pakke, og konfigurasjonene deles fra roten tsconfig.json.

5. Legger til TypeScript-kode til pakkene

La oss legge til et eksempel på TypeScript-kode til begge pakkene. I shared-pakken oppretter du en src-mappe og legger til en TypeScript-fil:

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

I index.ts eksporterer du en enkel funksjon:

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

I web-app-pakken oppretter du en src-mappe og en index.ts-fil:

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

Importer nå den delte funksjonen:

import { greet } from 'shared';

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

6. Bygge Monorepo

For å kompilere all TypeScript-kode i monorepoen, må vi bruke TypeScript-kompilatoren. Ved roten av monorepoen, kjør:

npx tsc --build

Denne kommandoen vil kompilere alle pakkene ved å følge deres respektive tsconfig.json-filer.

Konklusjon

I denne veiledningen dekket vi hvordan du setter opp og bruker TypeScript i en monorepo. Ved å organisere koden din i en monorepo-struktur, kan du enkelt dele kode på tvers av flere pakker, noe som gjør utviklingsprosessen mer effektiv. Med TypeScripts sterke skrive- og prosjektreferanser er dette oppsettet perfekt for store applikasjoner eller delte biblioteker.