how to setup a Typescript project with multiple source dirs and separate compile destinations?

Question

My package looks like this:

┌ tsconfig.json
├ src/
│ ├ index.ts         (import './dependence.ts')
│ └ dependence.ts
└ example/
  ├ index.html
  └ script.ts        (import '../src/index.ts')

I would like

• ./src/*.ts to be compiled in ./dist/*.js
• ./example/*.ts to be compiled in ./example/*.js

after running tsc, I expect my package to look like this:

┌ tsconfig.json
├ src/
│ ├ index.ts         (import './dependence.ts')
│ └ dependence.ts
├!dist/
│ ├!index.js         (import './dependence.js')
│ └!dependence.js
└ example/
  ├ index.html
  ├ script.ts        (import '../src/index.ts')
  └!script.js        (import '../dist/index.js')

I'm a little confused about all tsconfig options.
I have tried many things with options like baseUrl, paths, rootDir, outDir, rootDirs, ... without success.

Answer 1

Easy. Use separate tsconfig files, one in each source dir to establish each as a separate project and use Typescript project references to establish the dependency between the example project and the src project.

1. src/tsconfig.json:

{
    "compilerOptions": {
       "rootDir": ".",
       "outDir": "../dist/",
       "composite": true  // required if another project has a reference to this one.
    },
} 

2. example/tsconfig.json:

{
    "compilerOptions": {
      "rootDir": ".",
      "outDir": ".",  // because you want example to compile in place
    },
    "references": [   // declare the dependencies
      { "path": "../src" }  
    ]
}

3. use tsc -b instead of tsc -p for incremental (i.e. faster) builds:

   Running tsc --build (tsc -b for short) will do the following:

   • Find all referenced projects
   • Detect if they are up-to-date
   • Build out-of-date projects in the correct order

   e.g.

   • tsc -b src to just build src
   • tsc -b example will build both because of the dependency
   • tsc -b src example if you feel like being explicit

4. if you want to share some or most settings between projects to be DRY or to enforce consistency, you can:

   • put another tsconfig in the root and move all the common settings to it.
   • change each child config to extend the root config:

     "extends": "../tsconfig.json"
     

     adjusting the path if the child config is deeper in the tree.

5. You can take step 4 one further and use it as "a 'solution' tsconfig.json", as described in this section of the Project References documentation. This should enable you to build everything from your overall project root with tsc -b .

I think I covered everything you need. There's a detailed explanation of outDir and project references in this answer. Let me know if I'm missing something or if you have any questions.