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

Question

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.

Answer 1

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

Answer 2

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}` )