TypeScript: Återanvändning av gränssnitt och klasser för frontend (Angular) och backend

Jag har ett monorepo för ett nuvarande projekt baserat på en Frontend (Angular) och en Backend (utvecklad med NestJS - så det är NodeJS). Jag vill använda egna gränssnitt och klasser för både frontend och backend. Till exempel, skapa DTO:er så att min frontend vet parametern för min backend.

Jag tänkte på en gemensam mapp som den följande projektstrukturen visar, men detta fungerar inte, eftersom den gemensamma mappen är utanför Angulars omfattning (tsconfig) och därför fungerar inte automatisk komplettering.

project
├── client (Angular)
├── server (NestJS)
└── common (client and server share specific interfaces and classes)

Har någon erfarenhet av detta? För tillfället lägger jag till mina gränssnitt i båda mapparna, men detta är ont eftersom om jag uppdaterar ett gränssnitt måste jag ersätta det andra också.

Svar #1

I TypeScript 3.0 introducerades "Project references". Detta kan hjälpa dig att uppnå det du vill (jag använde det för att dela modeller mellan Angular och cloudfunktioner)

https://www.typescriptlang.org/docs/handbook/project-references.html

Det du behöver göra är att lägga till en extern projektreferens i tsconfig.json för det projekt som ska återanvända filer från någon annanstans

{
  "compilerOptions": {
    // The usual config
  },
  "references": [
    { "path": "../my-other-project" }
  ]
}

Svar #2

Ett verktyg som Lerna hjälper till med den här typen av setup, utifrån erfarenhet är detta det enklaste sättet att gå tillväga utan att skapa några privata npm-repon (vilket är ett annat alternativ).

I princip sätter du upp dina Angular- och serverpaket för att installera det gemensamma paketet precis som vilket annat npm-paket som helst och kör lerna för att skapa virtuella länkar för varje paket. På detta sätt, när du behöver dem för intellisense, kommer redaktören att gå igenom de virtuella fil-länkar som lerna skapar under bootstrap-fasen, vilket gör att du kan skapa valfritt antal gemensamma paket utan att behöva göra något tungt arbete för att koppla alla konsumerande paket.

Relaterade artiklar