Как ввести вычисляемое свойство в новый API композиции?

Я играю вместе с новым плагином Vue для использования API композиции и TypeScript, и кое-что я не совсем понимаю.

Как мне вводить вычисленные свойства?

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

В этом простом примере я объявляю две ссылки и вычисляемое свойство, чтобы объединить их. VSC сообщает мне, что вычисленные свойства возвращают тип ReadOnly ... Но я не могу заставить его работать.


typescript vue.js vue-composition-api
person pegido    schedule 25.03.2020    source источник
comment
Но я не могу заставить его работать - что именно? Из вашего кода я ожидаю, что тип будет правильно выведен.   -  person Estus Flask    schedule 25.03.2020
comment
Я имею в виду, какой тип я должен добавить к nameAndCountry const, чтобы он был правильно набран. Должны ли мы это делать в приложении TS с вычисленными значениями?   -  person pegido    schedule 26.03.2020
comment
Я ожидаю, что это будет что-то вроде Ref ‹ReadOnly ‹string››. Здесь не нужно добавлять тип, он предполагается. Также нет необходимости в ссылках, они однозначно выводятся как строки. Убедитесь, что TS находится в строгом режиме, поэтому вы будете предупреждены, когда типы будут пропущены там, где они необходимы.   -  person Estus Flask    schedule 26.03.2020

Ответы (1)


arrow_upward
14
arrow_downward

Для этого есть два разных типа.

Если ваша вычисляемая опора предназначена только для чтения:

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

если у него есть метод установки:

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