template props intellisense respect to jsdoc type

[bingzheyuan]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: win7 x64
• Vetur version: 0.21.0
• VS Code version: 1.35.1

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 . after sum, there's no intelliSence at all, I shall expect to select from v1 and v2.

Reproducible Case

Create a Vue component with following code

// Test.vue
<template>
  <div class="container">
    <p v-if="loading">loading...{{sum}}</p>
    <h1 v-if="!loading">
      <p>{{sum.v1}}</p> <!--  <--- here after sum I shall have intelliSense -->
      <p>{{sum.v2}}</p>
    </h1>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    loading: {
      type: Boolean,
      required: true
    },
    /** @type {{v1: number, v2: number}} */
    sum: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      message: 'Using Parcel In A Vue.js App',
    };
  },
};
</script>

[azuryus]

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.

[bingzheyuan]

@azuryus Thanks for the hint.

[octref]

Vetur currently walks through AST to find out the information. For doing this, it needs to get the type information for each props.

[yoyo930021]

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
    }
  }
}

[xiezht]

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: [], 
    };
  },
...

[rchl]

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
    }
  }
}

[xiezht]

@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 ?

[rchl]

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.

[xiezht]

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

[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.

[octref]

Related to #2193.

[octref]

[fortune-max]

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]