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.