What's the benefit/need for splitting tsconfig?

[janKir]

The react-ts template uses separate tsconfig files, one for everything in the src folder (tsconfig.app.json) and one that only includes vite.config.ts but might include other *.ts config files as well (tsconfig.node.json).

I struggle to understand why this is needed or recommended. As far as I understand, vite does not rely on a tsconfig to read the vite.config.ts. So, why not just include the vite.config.ts to the same tsconfig.json that is used for the source code or not include it at all in any tsconfig?

The only relevant aspect I see is type-checking the vite.config.ts. Of course some things allowed in browser-side javascript are not valid in node.js and might not be caught when simply using the same tsconfig as for the source code. But is that really the main advantage? And if so, would it be worth it?

I would be happy to get a good explanation why these multiple tsconfig files really make sense!

[DigitalNaut]

The main difference I can tell is which files are being targeted according to the template:

// tsconfig.node.json
{
   "include": ["vite.config.ts"]
}

vs

// tsconfig.app.json
{
  "include": ["src"]
 }

These settings cascade down to the code. This way, you can specify which rules govern your source files and which ones only affect Vite's build process. For example, this is useful when:

• Targeting an earlier version of JS for the frontend, while Vite is free to build with modern syntax without time-consuming transpilation under the hood. Eg. ES6 vs ES2020.
• You can also import only the necessary types. Vite's build process doesn't need to know browser-related typings or vendor-specific types either, which I think could affect TypeScript's performance for speedy hot reloads.
• You can have different compiler rules for how TypeScript transforms your code, like, for example, when using code-transforming options like those listed under erasableSyntaxOnly (namespaces, enums, etc.) that modify the code being generated and may create extra boilerplate.

There may be other reasons why you would only want to affect one part of the code and not the other, but these are the ones that come to mind.

Other than this, Vite itself doesn't appear to be tied down to the configuration files, so you're free to modify them however you wish.

It'd be interesting to know if there are any other reasons for this, though.

[janKir]

Is the tsconfig really affecting vite's build process? It's been a while since I've looked into this but as far as I remember vite does not rely on the tsconfig 🤔
Or maybe the idea of this setup is that usually devs will add several other config ts-files where the tsconfig would actually matter.