vue-tsc support for js emit

[DarrenTheDev]

I'm looking to distribute a component library built with Vue3 / TS in single file components. I'd like for the consuming application to have access to the types when using the components. An example of a library that does this well is Naive UI. It has components written in .tsx files which built into individual .js and .d.ts files with the tsc -b command.

Attempting to do the above with .vue files by running vue-tsc -b throws the message that "js emit is not support". Is this a feature that might be supported in the future to make this use case possible?

[sethidden]

Not familiar with this case but maybe you could just generate .d.ts files with vue-tsc, then compile .vue to .js files with Vite?

Even with Vue 2 I used to build libs like (vue cli): vue-cli-service build --target lib && tsc

[DarrenTheDev]

Thanks so much for your detailed help here! I had been down that route, but the missing piece of the puzzle was the typings attribute in the package.json file to point typescript to the definition for the entry file.

Here's what I ended up with in the package.json for anyone coming across this in the future. I set the outDir in the vite.config.ts to dist/lib and in the tsconfig.json to dist/types.

{
  "name": "library",
  "version": "0.0.0",
  "main": "./dist/lib/library.umd.js",
  "module": "./dist/lib/library.es.js",
  "typings": "./dist/types/main.d.ts",
  ...
}

[Jackie1210]

#1496 @sethidden have you ever meet this issue like this?

[reslear]

ok, vue-tsc generate types, vite clean folder :)
need only swap, first vite clean folder and generate files, then vue-tsc generate types

vite build && vue-tsc --declaration --emitDeclarationOnly

:)

[andredewaard]

@DarrenTheDev Thanks! So its not possible to just compile the individual vue files into js files and consume those?
I want something like this but with vue-tsc

[codethief]

@andredewaard Instead of writing .vue files you could define your Vue components in regular TSX files, see https://vuejs.org/guide/extras/render-function.html#jsx-tsx and, in particular, the code example at the very bottom of the page. (TL;DR This makes Vue components look quite similar to React components.)

[messenjer]

Hello,

This morning I was trying to do the same thing than @DarrenTheDev (to distribute a component library built with Vue3 / TS in single file components.)

I found your discussion, and I tested the final solution from @DarrenTheDev where we replace also the:

• vite.config.js
• tsconfig.json
• package.json

To have at the end, all the *.d.ts files in the dist folder.

It worked, but at the end I found another solution, the vite-plugin-dts

@DarrenTheDev have you tested it?

[DarrenTheDev]

Thanks Mathieu I hadn't come across that package.

Looks to work pretty well in my testing and gives pretty well the same result.

[johnsoncodehk]

Normally, vue-tsc and other solutions get similar results. The only difference is that vue-tsc reuses the logic of volar processing script setup, so vue-tsc can handle such as defineProps<{ ... }>() , defineEmit<{ ... }>() syntax and resolves to the expected component type.

[sethidden]

@johnsoncodehk Do you know what does vite-plugin-dts use under the hood to scan the .vue files and emit their typedefs? I thought vue-tsc was the only way

[messenjer]

Thank you very much for the answer.

I see that there is also the support for the script setup, defineProps<{...}>() in vite-plugin-dts qmhc/vite-plugin-dts@1b62755

At the moment, I don't use script setup anymore but defineComponents because Storybook (with vue-docgen-api) defineProps is not well supported. vue-styleguidist/vue-styleguidist#997

I would love to switch back to script setup.

[ccqgithub]

That seems all not work with slots (with volar)?

I can get the sot props type when I directly import the .vue file.

But if I build a lib, then import the component form the lib, the slot props type is any.

The slot props type lost in the declaration files for component?

And, their type is different in the volar.

From lib:

[sethidden]

This could indeed be a bug, though the underlying TS service should be the same for both vue-tsc and volar. Are you using the latest vue-tsc in package.json? npm list vue-tsc. It could be your vscode has updated volar automatically to the latest version (works) but your NPM vue-tsc stayed old or something.

[ccqgithub]

This could indeed be a bug, though the underlying TS service should be the same for both vue-tsc and volar. Are you using the latest vue-tsc in package.json? npm list vue-tsc. It could be your vscode has updated volar automatically to the latest version (works) but your NPM vue-tsc stayed old or something.

I just install the latest version of [email protected], the problem is the same.

After I run vue-tsc --declaration --emitDeclarationOnly, the output of .vue like below, no slots info?

// Follow.vue.d.ts
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
export default _default;
//# sourceMappingURL=Follow.vue.d.ts.map

And if I use vite-plugin-dts, output like this:

// Follow.vue.d.ts
import { ComponentPublicInstance, StyleValue } from 'vue';
declare const _sfc_main: import("vue").DefineComponent<{}, {
    parent: ResizeObserverEntry | null;
    target: import("vue").Ref<ResizeObserverEntry | null>;
    setTargetEl: (elm: Element | HTMLElement | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null) => void;
    popup: import("vue").Ref<ResizeObserverEntry | null>;
    setPopupEl: (elm: Element | HTMLElement | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null) => void;
    style: import("vue").ComputedRef<StyleValue>;
    slots: Readonly<{
        [name: string]: import("vue").Slot | undefined;
    }>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
export default _sfc_main;
//# sourceMappingURL=Follow.vue.d.ts.map

And when I use the latest version of vue-tsc, has other .d.ts files with __VLS_

[ccqgithub]

This could indeed be a bug, though the underlying TS service should be the same for both vue-tsc and volar. Are you using the latest vue-tsc in package.json? npm list vue-tsc. It could be your vscode has updated volar automatically to the latest version (works) but your NPM vue-tsc stayed old or something.

@sethidden When i install the latest version of vscode volar, it not suggestion the scoped slots props type event I import .vue file directly in then same project.....After i fallback to 0.33.9, same project is ok.

[Thy3634]

When I use vue-tsc generate dts from sfc (js + props comment)

<script>

export default {
    props: {
        /** comment */
        aProp: String
    }
}
</script>

output:

const Comp: DefineComponent<{any, ...... , {
    [x: string]: any;
}>

And if remove comment or change this into <script lang="ts"> ,it's ok.

[SavvyShah]

I'm using JSX in a Vue3 project. All the files are javascript .jsx. I assume we can't emit .d.ts file using vue-tsc for .jsx files. Is there a way I can create a .d.ts file manually? Is it safe to create it manually?

// SelectedFilters.jsx
import VueTypes from 'vue-types';

const SelectedFilters = {
	name: 'SelectedFilters',
	props: {
		className: VueTypes.string.def(''),
		clearAllLabel: VueTypes.string.def('Clear All'),
		showClearAll: VueTypes.bool.def(true),
		resetToDefault: VueTypes.bool.def(false),
		clearAllBlacklistComponents: VueTypes.array,
		resetToValues: VueTypes.object,
	},
	render() {
                 // rendering logic using JSX
	},
};