Ways to access Vue computed attributes in typescript

Question

Ways to access Vue computed attributes in typescript

When attempting to utilize a computed property within another one or inside a method, I encountered the following error message:

Property 'comments' does not exist on type 'Vue'

import { Component, Vue } from 'vue-property-decorator'
@Component({
  computed: {
    comments(): Comment[] {
      return this.$store.getters['comments/getComments'];
    },
    hasComments(): boolean {
      return (0 !== (this as any).comments.length); // Property 'comments' does not exist on type 'Vue'
    }
  }
})
export default class Test extends Vue {
  public get commentsCount(): number {
    return (this as any).comments.length; // Property 'comments' does not exist on type 'Vue'
  }
}

In order to avoid errors, I substituted (this as any).comments, but it raises the question of why we would use typescript and disregard type checking by using any.

typescript vue.js

Answer 1

Answer №1

One issue is that the variable comments exists in the Javascript runtime but is not defined in Typescript. To resolve this, declare the variable and use the ! operator after its definition to assert it as non-null. This operation informs Typescript that the variable will be initialized elsewhere (in this case, by a decorator).

Snippet:

public comments!: TYPE_OF_COMMENTS;

Full code:


import { Component, Vue } from 'vue-property-decorator'
@Component({
  computed: {
    comments(): Comment[] {
      return this.$store.getters['comments/getComments'];
    },
    hasComments(this: Test): boolean {
      return (0 !== this.comments.length);
    }
  }
})
export default class Test extends Vue {
  public comments!: TYPE_OF_COMMENTS;

  public get commentsCount(): number {
    return this.comments.length; // Property 'comments' does not exist on type 'Vue'
  }
}

Update:

To resolve the issue with hasComments, adjust the value provided for the this instance to reference the actual component instead of the default Vue instance. You can do this as follows:

hasComments(this: Test): boolean {
      return (0 !== this.comments.length);
    }

This way, the this instance will have the correct type definitions for the component (Test).

Answer 2

One issue is that the variable comments exists in the Javascript runtime but is not defined in Typescript. To resolve this, declare the variable and use the ! operator after its definition to assert it as non-null. This operation informs Typescript that the variable will be initialized elsewhere (in this case, by a decorator).

Snippet:

public comments!: TYPE_OF_COMMENTS;

Full code:


import { Component, Vue } from 'vue-property-decorator'
@Component({
  computed: {
    comments(): Comment[] {
      return this.$store.getters['comments/getComments'];
    },
    hasComments(this: Test): boolean {
      return (0 !== this.comments.length);
    }
  }
})
export default class Test extends Vue {
  public comments!: TYPE_OF_COMMENTS;

  public get commentsCount(): number {
    return this.comments.length; // Property 'comments' does not exist on type 'Vue'
  }
}

Update:

To resolve the issue with hasComments, adjust the value provided for the this instance to reference the actual component instead of the default Vue instance. You can do this as follows:

hasComments(this: Test): boolean {
      return (0 !== this.comments.length);
    }

This way, the this instance will have the correct type definitions for the component (Test).

Answer 3

Answer №2

In my experience with Vue 2, I have encountered similar errors in the past (Vue 3 is significantly improved, especially with the composition API). While there wasn't a single specific solution, one common fix that I found was ensuring that my computed properties had an accurate return type and that a default value was used for them.

I wanted to suggest adding this as a comment, but unfortunately I don't have enough reputation. Have you considered providing a default value in your comments() return? Although you've specified it to return a Comment[], TypeScript/Vue might not recognize that the store value you're fetching matches that type (or if it even exists yet).

Answer 4

In my experience with Vue 2, I have encountered similar errors in the past (Vue 3 is significantly improved, especially with the composition API). While there wasn't a single specific solution, one common fix that I found was ensuring that my computed properties had an accurate return type and that a default value was used for them.

I wanted to suggest adding this as a comment, but unfortunately I don't have enough reputation. Have you considered providing a default value in your comments() return? Although you've specified it to return a Comment[], TypeScript/Vue might not recognize that the store value you're fetching matches that type (or if it even exists yet).

Ways to access Vue computed attributes in typescript

Answer №1

Answer №2

Similar questions

Exploring Angular 2: Incorporating multiple HTML pages into a single component

I am currently utilizing Laravel 9.* along with Vue and InertiaJS to edit and modify the information of a pre-existing user

Issue: The formGroup function requires a valid FormGroup instance to be passed in. Data retrieval unsuccessful

How to reference 'this' within a d3 callback when using Angular 7

A guide to utilizing ngFor in Angular 7 to loop through nested JSON and display it in a ul li

Populating a class object with all fields simultaneously from a FormGroup

Clear out the information from the previous table and set up a fresh one using DataTables

limiting the number of HTTP requests within a JavaScript forEach loop

An improved approach for implementing ngClass condition in Angular components

What is the best way to fetch the chosen item in an Angular select dropdown

Is there a way to transform a complex nested class object into a simple object without losing its methods

Defining Multiple Types in Typescript

Using NestJS to pass request and response parameters

Creating layers of object declarations

The vuex module could not be located

Enhancing Twilio LocalVideoTrack with custom start and stop event handling

Mastering Checkbox State Control in Vue3 Using Component Props

Tips for retrieving next-auth authOptions from an asynchronous function

Implementing custom query filtering in apollo-server-express

Include a new course based on a specific situation