How to use computed props in Vue.js with TypeScript?

Question

There is a lot of documentation how to interact with Vue.js using the JavaScript language and just a little about TypeScript. The question is how do you define computed props in a vue component if it is written in TypeScript?

According the official example, computed is an object with functions which will be cached based on their dependent props.

Here is an example I made:

import Vue from 'vue';
import { Component } from "vue-property-decorator";

@Component({})
export default class ComputedDemo extends Vue {
    private firstName: string = 'John';
    private lastName: string = 'Doe';
    private computed: object = {
        fullName(): string {
            return `${this.firstName} ${this.lastName}`;
        },
    }
}

And html:

<div>
    <h1>Computed props ts demo</h1>
    <ul>
        <li>First name: {{firstName}}</li>
        <li>Last name: {{lastName}}</li>
        <li>Together: {{fullName}}</li>
    </ul>
</div>

The third list item outputs nothing. Can anybody tell me how to define computed in this case, please?

Community · Accepted Answer · 2020-06-20 09:12:55Z

80

You can use property accessors to declare computed properties. See Vue Class Component. The getter will be triggered as soon as you type in the input.

For example:

<template>
    <div>
        <input type="text" name="Test Value" id="" v-model="text">

        <label>{{label}}</label>
    </div>

</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({})
export default class About extends Vue {
    private text = "test";

    get label() {
        return this.text;
    }
}
</script>

Update for Vue Composition Api

<template>
  <div>
    <input type="text" name="Test Value" id v-model="text" />

    <label>{{label}}</label>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const text = ref("test");

    const label = computed(() => {
      return text.value;
    });

    return {
      text,
      label
    };
  }
});
</script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 23, 2018 at 11:32

Jeremy Walters

2,15219 silver badges30 bronze badges

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

3 Comments

Lev Khruschev Over a year ago

It works and looks easy to use. And also Vue plugin in browser marks such getters as computed props.

lurscher Over a year ago

Watch is never used on the 1st example, am I missing something?

muzzletov Over a year ago

no, it doesnt matter. he forgot to remove it.

tony19 · Accepted Answer · 2022-07-15 19:56:55Z

23

Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like render and those in computed.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // need annotation due to `this` in return type
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // need annotation
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` is inferred, but `render` needs return type
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

If you find type inference or member completion isn’t working, annotating certain methods may help address these problems. Using the --noImplicitAny option will help find many of these unannotated methods.

More Info

edited Jul 15, 2022 at 19:56

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 23, 2018 at 11:18

niclas_4

3,6761 gold badge25 silver badges51 bronze badges

3 Comments

amoe Over a year ago

This works in my case and doesn't require rewriting to class-based component style.

Ali Bayat Mokhtari Over a year ago

So why we use typescript with this block of code? we can't set type to variables in the object that data function returns.

hutch90 Over a year ago

This fixed a problem I was having. Thanks!

Mises · Accepted Answer · 2022-01-10 05:39:10Z

4

Vite Vue 3.2+ TypeScript

<template>
    <input type="text" v-model="title" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore()

const title = computed({
    get: () => store.state.page.about.title,
    set: value => store.commit('setData', { about: { title: value }})
})
</script>

Mutation setData in store

setData(state: { about: any, blog: any, contact: any, home: any }, data: any) {
     if (data['about']) state.about = { ...state.about, ...data.about }
     if (data['blog']) state.blog = { ...state.blog, ...data.blog }
     if (data['contact']) state.contact = { ...state.contact, ...data.contact }
     if (data['home']) state.home = { ...state.home, ...data.home }
}

Function above by using spread operator ... will overwrite object field you send to them.

edited Jan 10, 2022 at 5:39

answered Nov 29, 2021 at 21:13

Mises

4,6332 gold badges24 silver badges37 bronze badges

1 Comment

Ho0ony Over a year ago

The answer what I want !

Collectives™ on Stack Overflow

How to use computed props in Vue.js with TypeScript?

3 Answers 3

Update for Vue Composition Api

3 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update for Vue Composition Api

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related