Vue TypeScript Object prop type is not correct

Question

When using Object properties in Vue Single File Components in TypeScript (generated with Vue CLI 3), the type of the prop is not correct, as shown by the minimal example below.

The type of this.product is (() => any) | ComputedOptions<any>. Does anyone know of a solution to this?

<script lang="ts">
import Vue, { PropType } from 'vue';

interface ProductInterface {
  units: number;
}

export default Vue.extend({
  name: 'Product',
  props: {
    product: {
      type: Object as PropType<ProductInterface>,
      required: true,
    },
  },
  computed: {
    unitsString() {
      return `${this.product.units} Units`;
    },
  },
});
</script>

This should work fine. Please create a small demo for this using codesandbox.io to show the issue happening. — palaѕн
– palaѕн, Commented Jun 1, 2020 at 6:38

Mercurial Uroboros · Accepted Answer · 2020-06-01 06:16:45Z

0

Did you try to put a type after the computed property like so?

unitsString() :string{
  return ... 
}

Typescript with Vue reacts weirdly with computed properties which are inferred.

answered Jun 1, 2020 at 6:16

Mercurial Uroboros

8587 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue TypeScript Object prop type is not correct

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related