Isn't the create-vue types setup broken?

[bmulholland]

My understanding is that tsconfig overwrites previous values. But the multi-tsconfig approach mercilessly uses that, resulting in something that doesn't seem to match the intent.

Look at https://github.com/vuejs/create-vue-templates/tree/main/typescript-router-pinia-vitest-cypress for example

The tsconfig adds vitest as the final reference. And the vitest one sets lib to an empty array. The previous tsconfig, app, extends from vue's tsconfig https://github.com/vuejs/tsconfig/blob/main/tsconfig.dom.json, which almost exclusively sets lib. So, when running vue-tsc, won't it pick up the main tsconfig and compile the lib down to an empty array, effectively overwriting Vue's DOM tsconfig? This has been set like this for ages so I feel like I must be missing something...

Maybe this would make sense if e.g. only the tsconfig app was referenced in vue-tsc usage, but that's not the case. package.json just runs a raw vue-tsc, which will load tsconfig.json, not tsconfig.app.json.

How is this all supposed to work? Are there docs on the intent? How should I use this in my own project?

And then types... what's the intent there? Let's say I need to add types manually for a package I add. Do I put that in tsconfig.app.json? but then there's types in tsconfig.vitest.json, which would overwrite that. So then am I supposed to add it to both? Only to vitest? That seems wrong too...

[bmulholland]

I found other discussion of similar things, like vuejs/create-vue#159 and vuejs/create-vue#264 -- but the configuration has changed around since then. Previously, the package.json typecheck command specified tsconfig.app.json, but it doesn't anymore.

[LinusBorg]

I think you may not be fully aware of the use of references in tsconfig, or maybe I'm missing something?

They essentially allow you to set different configurations for different files. the referenced configs are not applied globally, instead they are only applied to the files matched by each referenced tsconfig.

So the empty lib config will only apply to the test files, not your app files, and vice versa. This is a good thing, because i.e. in test files, we don't want to use TS' lib types for the dom, we want to use the jsdom types - which are added in the vitest config only.

[bmulholland]

Yeah looks like that's right. I'd assumed that references worked like everything else, compiling down into a single config where everything overwrites everything else. Looks like that's not the case. Your explanation helped: I find Typescript's docs to be frankly inscrutable.

I took this info and wrote the docs I wish I had at vuejs/create-vue#265

Note that (I believe) this is only kinda true: "So the empty lib config will only apply to the test files, not your app files, and vice versa." The setup actually has it so tsconfig.vitest.json matches app files, too. The approach relies on the order of precedence applied by tsc and volar, though I don't understand why. This is one reason I was so confused. See also vuejs/create-vue#264.