Extension not recognizing props attributes inside setup method

[olegario96]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: Arch Linux (Kernel 5.11.11)
• Vetur version: 0.33.1``
• VS Code version: 1.54.3

Problem

I´m trying to use storybook along with vue and typescript. All linter, builds and tests are working fine, but when opening Button.vue file on my IDE it says: Property 'primary' does not exist on type 'Readonly<{ [x: number]: string; }

Component:

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
</template>

<script lang="ts">
import './button.css';
import { reactive, computed, SetupContext, defineComponent } from 'vue';

export default defineComponent({
  name: 'my-button',

  props: {
    label: {
      type: String,
      required: true,
    },
    primary: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      validator: function (value: string): boolean {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String,
    },
  },

  emits: ['click'],

  setup(props, { emit }: SetupContext) {
    props = reactive(props);
    return {
      classes: computed(() => ({
        'storybook-button': true,
        'storybook-button--primary': props.primary,
        'storybook-button--secondary': !props.primary,
        [`storybook-button--${props.size || 'medium'}`]: true,
      })),
      style: computed(() => ({
        backgroundColor: props.backgroundColor,
      })),
      onClick() {
        emit('click');
      },
    };
  },
});
</script>

Reproducible Case

I was following this tutorial

You can find the source right here in Gitlab.

[yoyo930021]

Please see this warning.
https://v3.vuejs.org/guide/typescript-support.html#annotating-props

[olegario96]

Hey @yoyo930021 I´ve changed my props to use the following setup:

export default defineComponent({
  name: 'my-button',

  props: {
    label: {
      type: String as PropType<String>,
      required: true,
    },
    primary: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    size: {
      type: String as PropType<String>,
      validator: function (value: string): boolean {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String as PropType<String>,
    },
  }
}

But I´m still seeing the same issue.

[yoyo930021]

Hey @yoyo930021 I´ve changed my props to use the following setup:

export default defineComponent({
  name: 'my-button',

  props: {
    label: {
      type: String as PropType<String>,
      required: true,
    },
    primary: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    size: {
      type: String as PropType<String>,
      validator: function (value: string): boolean {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String as PropType<String>,
    },
  }
}

But I´m still seeing the same issue.

The warning say using arrow function or (this: void)

[olegario96]

@yoyo930021 would mind to add more details? Not sure if I get it right.

[yoyo930021]

@yoyo930021 would mind to add more details? Not sure if I get it right.

{
  validator: (value: string) => {
    return ['small', 'medium', 'large'].indexOf(value) !== -1;
  },
}