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

Issue

I'm playing along with the new Vue.js plugin for using composition API and TypeScript and there is something I'm not 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.

Solution

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
  },
});

Answered By - acme