How to type a computed property in the new composition API?

user_6905839 0
Viewed 26431

Im playing along with the new Vue plugin for using composition API and TypeScript and there is something I'm not quite understanding.

How am I supposed to type computed properties?

import Vue from 'vue'
import { ref, computed, Ref } from '@vue/composition-api'

export default Vue.extend({
  setup(props, context) {

    const movieName:Ref<string> = ref('Relatos Salvajes')
    const country:Ref<string> = ref('Argentina')

    const nameAndCountry = computed(() => `The movie name is ${movieName.value} from ${country.value}`);

    return { movieName, country, nameAndCountry }
  }
})

In this simple example I'm declaring two refs and a computed property to join both. VSC is telling me that computed properties are returning ReadOnly type... But I can't make it work.

vue-composition-api vue.js typescript
2 Answers

There are two different types for that.

If your computed prop is readonly:

const nameAndCountry: ComputedRef<string> = computed((): string => `The movie name is ${movieName.value} from ${country.value}`);

if it has a setter method:

const nameAndCountry: WritableComputedRef<string> = computed({
  get(): string {
    return 'somestring'
  },
  set(newValue: string): void {
    // set something
  },
});
user_1564810

I believe you should go with using generics:

const movieName = ref<string>("Relatos Salvajes")
const country = ref<string>("Argentina")

const nameAndCountry = computed<string>(
  () => `The movie name is ${movieName.value} from ${country.value}`
)
user_97644120
Related