withDefaults with options defined in an other file ?

[julie-seebauer]

I'm trying to use this syntax :

<script setup lang="ts">
import './OrionAlert.less';
import OrionAlertSetupService from './OrionAlertSetupService';
import type { OrionAlertProps, OrionAlertEmits } from './OrionAlertSetupService';
const emits = defineEmits<OrionAlertEmits>() as OrionAlertEmits;

const props = withDefaults(defineProps<OrionAlertProps>(), OrionAlertSetupService.defaultProps);

const setup = new OrionAlertSetupService(props, emits);
</script>

and the defaultProps are defined like this in another file:

export default class OrionAlertSetupService extends SharedSetupService {
	static readonly defaultProps : Partial<OrionAlertProps> = {
		center: false,
		close: false,
	};
}

The .d.ts file generated is like this:

declare const _default: import("vue").DefineComponent<any, {
    emits: OrionAlertEmits;
    props: any;
    setup: OrionAlertSetupService;
},

If I remove this import and use it like this it works:

const props = withDefaults(defineProps<OrionAlertProps>(), {
	center: false,
	close: false,
	color: 'default' as Orion.Color
});

declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    color: {
        type: null;
        required: false;
        default: Orion.Color;
    };
    center: {
        type: BooleanConstructor;
        required: false;
        default: boolean;
    };
    close: {
        type: BooleanConstructor;
        required: false;
        default: boolean;
    };
    title: {
        type: StringConstructor;
        required: false;
    };
}>, {
    emits: OrionAlertEmits;
    props: any;
    setup: OrionAlertSetupService;
}, 

Am I missing something ? Or is it not possible to import default options like this ?

[yuvalkarif]

Hi @julie-seebauer, According to the vue docs it seems like there is a limitation regarding complex types, which may seem to be the issue.
If you don't manage to resolve it, I suggest recreating a minimal reproduction over a repository or something like stackblitz.

docs link

Syntax Limitations​
In version 3.2 and below, the generic type parameter for defineProps() were limited to a type literal or a reference to a local interface.

This limitation has been resolved in 3.3. The latest version of Vue supports referencing imported and a limited set of complex types in the type parameter position. However, because the type to runtime conversion is still AST-based, some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.