Element Plus prop values not typechecked

[Ragura]

This may be a problem beyond the usage of Element Plus, but I will describe what happens for me:

When working inside a Vue template and using imported Element Plus components, there is no typechecking for values passed to a prop. It's strange, because when hovering over the component itself, it will correctly list the props and its accepted types.

For example: the <el-image> component has a prop called fit which can take the following values: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'. The prop 'fit' correctly shows as available with intellisense (though I have to select it from the list, it won't autocomplete while typing inside the component tag). However, the prop itself is typed as string and has no mention of the correct list of strings as defined by the component.

Is there anything wrong with the type recognition, or did I set something up the wrong way?

[Sight-wcg]

I used the Show Virtual Files to look at the generated code, SFCWithInstall causes type inference error.

element-plus: export type SFCWithInstall = T & Plugin

// vue/runtime-core.d.ts
declare type Plugin_2 = (PluginInstallFunction & {
    install?: PluginInstallFunction;
}) | {
    install: PluginInstallFunction;
};
export { Plugin_2 as Plugin }

declare type PluginInstallFunction = (app: App, ...options: any[]) => any;

// VLS_type.ts
export type ComponentProps<T> =
	Record<string, unknown> &
	(
		T extends (...args: any) => any ? (T extends (...args: any) => { props: infer Props } ? Props : {})
		: T extends new (...args: any) => any ? (T extends new (...args: any) => { $props: infer Props } ? Props : {})
		: T // IntrinsicElement
	);

After removing SFCWithInstall, automatic completion can work normally.

[johnsoncodehk]

@Sight-wcg Could you try does reverse T extends new (...args: any) => any, T extends (...args: any) => any fix the problem?

export type ComponentProps<T> =
	Record<string, unknown> &
	(
		T extends new (...args: any) => any ? (T extends new (...args: any) => { $props: infer Props } ? Props : {})
		: T extends (...args: any) => any ? (T extends (...args: any) => { props: infer Props } ? Props : {})
		: T // IntrinsicElement
	);

[Sight-wcg]

@Sight-wcg Could you try does reverse T extends new (...args: any) => any, T extends (...args: any) => any fix the problem?

export type ComponentProps<T> =
	Record<string, unknown> &
	(
		T extends new (...args: any) => any ? (T extends new (...args: any) => { $props: infer Props } ? Props : {})
		: T extends (...args: any) => any ? (T extends (...args: any) => { props: infer Props } ? Props : {})
		: T // IntrinsicElement
	);

Can't fix the problem.
The type of 'VLS_1' is 'T', but type of props 'type' is string.

---

edit: Yeah this seems to be working perfectly. My test method is wrong, should exit the takeover mode for testing @johnsoncodehk

[johnsoncodehk]

FIxed by #2180

[Ragura]

Thank you for the quick resolution!