Closed bingzheyuan closed 4 years ago
You can declare your props' types like this:
export default {
props: {
/** @type {import('vue').PropOptions<{v1: number, v2: number}>} */
sum: {
type: Object,
required: true
}
}
}
I don't know if it's the recommended way, but it will enable IntelliSense with your object's properties.
@azuryus Thanks for the hint.
Vetur currently walks through AST to find out the information. For doing this, it needs to get the type information for each props.
If you use typescript:
import { PropType } from 'vue'
export default {
props: {
sum: {
type: Object as PropType<{v1: number, v2: number}>,
required: true
}
}
}
javascript:
export default {
props: {
sum: {
/** @type {import('vue').PropType<{v1: number, v2: number}>} */
type: Object,
required: true
}
}
}
If you use typescript:
import { PropType } from 'vue' export default { props: { sum: { type: Object as PropType<{v1: number, v2: number}>, required: true } } }
javascript:
export default { props: { sum: { /** @type {import('vue').PropType<{v1: number, v2: number}>} */ type: Object, required: true } } }
Thanks, your answer help me a lot. But i have another problem, how can i use jsdoc for "data" in vue component.
Something may like this:
...
mounted() {},
data() {
return {
/**
* @type {PlanDto}
*/
planList: [],
};
},
...
Yes, like that.
Also, to correct @yoyo930021's comment: for javascript you place the JSDoc comment above the prop name and not above the type
, like so:
export default {
props: {
/** @type {import('vue').PropType<{v1: number, v2: number}>} */
sum: {
type: Object,
required: true
}
}
}
@rchl It works when i hover on the variable, like this:
But it maybe not the perfect result. What i hope is that it can perform like JSDOC for vue's props. Like this:
Is it possible ?
Yes, it should work like that for data also. If it doesn't then you need to provide more information on what you are doing. Ideally, a small repo that reproduces.
Note that if you are missing some annotations in your code, it might break types in general. For example, you should add annotations to your methods too. And computed properties. At least when they are non-trivial or contain arguments.
Oh, i got it. The jsdoc comment should be about the "data" name, instead of in the object. Like this:
Then the property of data object can be auto-completed.
Thanks for help. @rchl
If it works for you then go ahead but I'm always annotating individual data properties instead and it works for me that way.
Related to #2193.
javascript:
export default { props: { sum: { /** @type {import('vue').PropType<{v1: number, v2: number}>} */ type: Object, required: true } } }
As mentioned by yoyo930021, this is indeed the right way (tested with Vue 3.2.47, jsdoc).
But I noticed my prop types were still referred to with any
within my computed/methods declarations until I added a data declaration (even if empty) for the types to be recognized within computed/methods/etc.
data() { }
Easy to miss if you only use props in your component, but no data field declarations.
[I use Volar so not sure if Volar specific, but this seems to be the most likely page anyone searching on Google may stumble upon, and I'd rather no one spend as much time as I did figuring it out]
Info
Problem
Props intelliSense has been provided to template interpolation since #1083 , however for
Object
type seems not enough, is that possible to provide intelliSence type base on jsDoc@type
? For the code in image, when I type.
aftersum
, there's no intelliSence at all, I shall expect to select fromv1
andv2
.Reproducible Case
Create a Vue component with following code