How can I make typescript compile only needed files?

Issue

This is an XY problem; answering any part would do.

X: I want to generate multiple bundles out of a single source tree. I'm aware of webpack supporting this, but I'm afraid, I can't use it. For example, my Router gets fed by one or more maps mapping a route (string) to a page (component). I'm storing these maps in separate files and comment importing and using them out as needed (I wrote a simple script doing this for me).

Is there a better solution?

Y: So when building the admin bundle, the user pages are not reachable from the index.tsx. Nonetheless, I'm getting typescript errors for them. The same happens even when I create a new unused file containing an error.

How can I avoid compiling unused files?

---

I'm not posting here all my config files as I hope, there's a simple setting for this somewhere. I'll do it when needed. Alone the list makes me depressed:

.babelrc
.env
.eslintrc
.gitignore
config-overrides.js
package.json
tsconfig.json
tslint-imports.json

Solution

This is a partial answer, but hopefully it will take you in the right direction. Typescript looks at tsconfig.json. Assuming your initiation is from an npm script, you can specify which tsconfig to use with the --project flag, like tsc --project tsconfig-1.json.

In your tsconfig.json file, only include the entry file, like

include: [
    "src/app/index.ts"
]

If you have something like "src/**/*", then it will process all files. But it you specify only the entry file, then it will process only the files in that import tree. The tree is defined by the import/import() statements.

For reference: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

If you want to create multiple bundles, then you'll need to run multiple npm scripts and have multiple tsconfig files or else specify the files from the command line.

Answered By - Matthias