Use Vue component's Props type parameter for prop type validation #2344
Comments
|
Wow, I mentioned the same method in Discord with @octref .🤣 |
|
We can do that by injecting a fake attribute. Here's an example. // vue-editor-bridge
export declare const __veturInjectComponentData = <Data, Props>(instance: ComponentInstance<Data, Props>) => {
return instance as ComponentInstance<Data, Props> & {
__vlsComponentData: {
props: Props & { [other: string]: any },
on: ComponentListeners<ComponentInstance<Data, Props>>;
directives: any[];
}
}
}
// childComponent.vue
export default __veturInjectComponentData({
props: {
foo: {
type: String,
required: true
}
}
})
// parentComponent.vue
import childComponent from './childComponent.vue'
declare const __vlsComponentHelper__app_navbar: {
<T>(
vm: T,
tag: string,
data: childComponent.__vlsComponentData & ThisType<T>,
children: any[]
): any
} |
|
That's what's working for me, now hooking them up: Vue 2: import Vue from 'vue'
import type { ExtendedVue } from 'vue/types/vue'
const __veturInjectComponentData = <Instance extends Vue, Data, Methods, Computed, Props>(
instance: ExtendedVue<Instance, Data, Methods, Computed, Props>
) => {
return instance as ExtendedVue<Instance, Data, Methods, Computed, Props> & {
__vlsComponentData: {
props: Props & { [other: string]: any }
on: ComponentListeners<ExtendedVue<Instance, Data, Methods, Computed, Props>>
directives: any[]
}
}
}
const comp = __veturInjectComponentData(
Vue.extend({
props: {
foo: {
type: String,
required: true
}
},
data() {
return {
bar: this.foo
}
}
})
)
comp.__vlsComponentDataVue 3: import { defineComponent } from 'vue'
import type { Component, ComputedOptions, MethodOptions } from 'vue'
const __veturInjectComponentData = <Props, RawBindings, D, C extends ComputedOptions, M extends MethodOptions>(
instance: Component<Props, RawBindings, D, C, M>
) => {
return instance as Component<Props, RawBindings, D, C, M> & {
__vlsComponentData: {
props: Props & { [other: string]: any }
on: ComponentListeners<Component<Props, RawBindings, D, C, M>>
directives: any[]
}
}
}
const comp = __veturInjectComponentData(
defineComponent({
props: {
foo: {
type: String,
required: true
}
},
data() {
return {
bar: this.foo
}
}
})
)
comp.__vlsComponentData |
I don't think this PR will solve #2343. We should just import the component script in and try to pull it out. |
|
and I don't think we actually need to inject an export default for each component. We can keep it and inject when we use. In vue2 is call |
Looks like when we directly look at export const ${injectComponentDataName} = <Props, RawBindings, D, C extends ComputedOptions, M extends MethodOptions>(
instance: { new (...args: any[]): { $props: Props } }
) => {
return instance as Component<Props, RawBindings, D, C, M> & {
__vlsComponentData: {
props: Props & { [other: string]: any }
on: ComponentListeners<Component<Props, RawBindings, D, C, M>>
directives: any[]
}
}
}This is the same way how Vue 3 get props type on Just in case, we have to use the new API |
in my local test, with this modification this works for me perfectly (vue 3)... 👍 But this issue has been not updated for a while. I'm curious what is the plan for the next ?
export default {
emits: {
click: (e: Event, another: string) => {
return true
}
},
}this would works nicely with vue-styleguidist/vue-styleguidist#965 in the same style Thanks again guys, this is plugin is awesome. |
|
What is the status on this? |
|
An anonymous user has funded $100.00 to this issue.
|
issuehunt-oss
bot
added
the
💵 Funded on Issuehunt
|
Is this issue has be abandoned? Or there is another plan? @octref I got some ideas, would you like give me some advise?
Thanks all of your works, would be great to get your advise. |
Feature Request
To use Vue component
Propstype parameter for prop type validation feature.Vue component type has dedicated
Propstype parameter to represent props:CombinedVueInstancehttps://github.com/vuejs/vue/blob/dev/types/vue.d.ts#L64ComponentPublicInstancehttps://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/componentPublicInstance.ts#L163By using it, we can validate any kind of component if it is properly typed. An example use case is Vue Class Component. I'm planning to introduce a new way to define component props and it will be quite a different API interface from the basic Vue's prop definition. We can even use prop type validation with class component if we use
Propstype parameter from the component.It may also solve #2312 and #2343.
IssueHunt Summary
Backers (Total: $100.00)
Become a backer now!
Or submit a pull request to get the deposits!
Tips
The text was updated successfully, but these errors were encountered: