feature request: auto infer prop types
ngjuping opened this issue · 4 comments
Hi logue,
According to this link: kaorun343/vue-property-decorator#303
We can make vue-property-decorator
infer prop type from TypeScript types.
Why is this significant:
- First, a dry code is a good code, and declaring props like this:
@Prop({type: Boolean}) readonly trigger: boolean
is not dry. - One can easily forget that explicit prop type declaration is required, leading to unexpected behavior, e.g. a Boolean prop defaults to
false
but if not explicitly declared, it will result in empty string""
instead offalse
Hopefully this gets implemented.
Best regards,
Ju Ping
I have migrated to the composition api
, so it seems that vue-property-decorator
is left for compatibility, but after the migration, the location that was pointed out was a warning, so this release (0.5.0) I fixed it in.
Thanks for the response! It seems that there are practical issues to use reflect-metadata
to infer prop types automatically when the types are custom interfaces, which is stated here kaorun343/vue-property-decorator#354. As your plan is to move forward with composition-api
, I will start writing my components as such. One more follow-up confusion though, can you point out the place where warning occurred?
There was a warning in the previous writing style of @props. Actually, the content of this is an alias of the content inside the variable {} in the following way of writing.
props {
variable: {type: String, default: ''}
}
So, the warning is that the values of props must be type
and defalut
.
For objects and arrays, defaults seems to be a function.
props {
variable: {type: Object, default: () => { return undefined; } },
}
props {
variable1: {type: Object as () => SomeObject, default: () => { return undefined; } },
variable2: {type: Object as PropType<SomeObject>, default: () => { return undefined; } },
}
So, in the case of @Prop
, I think it is correct to enter the following in the same way.
@Props({type: Object as () => SomeObject, default: () => { return undefined; } })
variable1! :SomeObject;
I've been writing my props exactly like this. Thanks for making things clear!