TypeScript: Reuse of interfaces and classes for frontend (Angular) and backend

Question

I have a monorepo for a current project based on a Frontend (Angular) and a Backend (developed with NestJS - so it's NodeJS). I want to use custom interfaces and classes for both - frontend and backend. For example, creating DTOs so my frontend knows the parameter of my backend.

I thought about a common folder like the following project structure shows, but this is not working, because the common folder is outside the scope of Angular (tsconfig) and so auto completition isn't working

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

Does anyone has experience for this? At the moment I add my interfaces to both folders, but this is is evil because if I update one interface, I have to replace the other, too.

Answer 1

In TypeScript 3.0 "Project references" were introduced. This could help you achieve what you want (I was using it to share models between angular and cloud function)

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

What you need to do is add an external project reference to the tsconfig.json of the project that should reuse files from somewhere else

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