How can I use project reference with difference tsconfig files?

Question

For example I have three projects

shared
frontend
backend

I want to use shared project as project reference in the frontend and the backend

But the backend use commonjs modules and frontend use esnext modules, so I want shared to have two configs tsconfig.commonjs.json and tsconfig.esmodules.json

How can I use shared as reference project in the backend with tsconfig.commonjs.json and in the frontend with tsconfig.commonjs.json

Answer 1

I believe extends option is what you're looking for.

// tsconfig.shared.json
  "compilerOptions": {
     ...
  }
...

// tsconfig.frontend.json
  "extends": "./tsconfig.shared",
  "compilerOptions": {
    "module": "esnext",
  }

// tsconfig.backend.json
  "extends": "./tsconfig.shared",
  "compilerOptions": {
    "module": "commonjs",
  }