vue-tsc How to generate for .vue files only and merge into one file

[DGollings]

Hi,

The first question, how to declare for .vue files only I could probably solve with some bash hacking (simply delete whatever is changed in git and isn't *.vue.d.ts) but I can't figure out how to merge all the declaration files into one. Tried to RTFM but neither --outDir nor --outFile worked for me.

Actually, checked StackOverflow and saw this

To map a .d.ts file to its javascript file you need to give the .d.ts file the same name as the javascript file, keep them in the same folder, and point the code that needs it to the .d.ts file.

So its possible that everything is working as designed. They're basically header like files. But I'll ask the question anyway so you can confirm and others wondering the same will be able to find it here

But it would be nice if you could process .vue files only and overwrite existing .d.ts files. Because the script I'm currently thinking of will be something along the lines of

find -name '*.vue.d.ts' | xargs rm || true
npx vue-tsc --declaration --emitDeclarationOnly
git ls-files --others --exclude-standard | grep -v vue | grep .d.ts | xargs rm || true

which is.... ok :)

[xiaoxiangmoe]

😳Did you mean you need to bundle all .d.ts file into one, like what vue 3 did?

[DGollings]

well, not need, I just don't love the 100+ files its adds to my repo :) but from what I can tell, it works as designed so I guess I'll have to if I want types available in unit tests

EDIT: maybe its better to say what I want instead of asking for what I think need:

Volar has fantastic support for types in .vue files, but .test.ts files that mount a Vue component do not. And its just painful to have to (wrapper.vm as any).foo everything when you know the types are there. Running vue-tsc makes wrapper.vm.foo typed, but adds x amount of 'useless' files. Files that you only care about whilst writing unit tests. What I really want and tried to hack together using vue-tscis types in test files

Or is there a better way to mount and test vue components with types?

[xiaoxiangmoe]

Generate it to another dir such as ./generated/src/App.vue.ts and use rootDirs to resolve it.

[johnsoncodehk]

You could use different tsconfig to vue-tsc.

// tsconfig.build-dts.json
{
    "extends": "./tsconfig.json",
    "exclude": ["**/*.test.ts"],
}

Run $ vue-tsc -p tsconfig.build-dts.json

[DGollings]

thanks @johnsoncodehk

For anyone wondering what his tsconfig.build-dts.json snippet does, it does what my bash hack does. Delete (or better, prevents creating) unwanted files

But I added xstate and Pinia to my exports and now it complains about TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed. I have a feeling I'll have to rethink how to approach testing

[Rusinas]

@DGollings did you find the solution for this? Struggling with the exact same problem. After running vue-tsc, the project becomes bloated with all those .vue.d.ts and d.ts.map files and this is stupid. I need to generate all the types in one file and put it into dist folder, why this should be so complicated 😭

[DGollings]

@Rusinas , sorry, no, I gave up on it all. In fact, I gave up on using testing-library and moved to storybook test runners. Much easier to write and debug :) (but slower, so might not be useful for you)

[johnsoncodehk]

After running vue-tsc, the project becomes bloated with all those .vue.d.ts and d.ts.map files and this is stupid.

Did you have outDir in your tsconfig?

[chemist-repo]

You could use different tsconfig to vue-tsc.

// tsconfig.build-dts.json
{
  "extends": "./tsconfig.json",
  "exclude": ["**/*.test.ts"],
}

Run $ vue-tsc -p tsconfig.build-dts.json

This worked for me, thanks! I think it is necessary to specify it in the documentation.