Open
Description
What problem does this feature solve?
It would be useful if we can infer Props type from component (ExtendedVue).
For example, we can write type safe wrapper of CreateElement with it (or improve interface of CreateElement directly).
function renderComponent<Props>(
h: CreateElement,
component: ExtendedVue<Vue, {}, {}, {}, Props>,
data: VNodeData & { props: Partial<Props> },
children?: VNodeChildren): VNode {
return h(component, data, children);
}
const MyComponent = Vue.extend({
props: { foo: String },
render(h) { return h("div", this.foo) };
});
const Parent = Vue.extend({
render(h) {
return renderComponent(h, MyComponent, { props: { foo: 0 } }); // error: type of property 'foo' are imcompatible
}
});What does the proposed API look like?
Now, ExtendedVue<Vue, {}, {}, {}, { foo: string }> and ExtendedVue<Vue, {}, {}, { foo: string }, {}> generate same type.
This means we can't determine Props type from ExtendedVue object.
I think, easiest (and most reasonable) way to achieve this is adding types to $props and $data
- export type CombinedVueInstance<Instance extends Vue, Data, Methods, Computed, Props> = Instance & Data & Methods & Computed & Props;
+ export type CombinedVueInstance<Instance extends Vue, Data, Methods, Computed, Props> = Instance & Data & Methods & Computed & Props & { $data: Data, $props: Props };