vue 3 и typescript - не удается получить доступ к ComputedRef, когда он находится внутри reactive();

#typescript #reactive-programming #typescript-typings #reactive #vuejs3

#typescript #реактивное программирование #typescript-типизации #реактивный #vuejs3

Вопрос:

 interface Intf {
    prop: ComputedRef<string>;
}

const obj = {} as Intf;

console.log(obj.prop.value);

У меня есть приведенный выше код, который выглядит так, как я и ожидал. Я могу получить доступ obj.prop.value , и из typescript не было выдано никакой ошибки. Однако, когда я помещаю это ComputedRef<string> в другой реактивный объект, я не могу получить его обратно, поскольку typescript сказал prop , что это тип string вместо ComputedRef<string> . Давайте посмотрим следующие коды:

 interface Intf {
    prop: ComputedRef<string>;
}

const re = reactive({
    obj: {} as Intf
});

console.log(re.obj.prop.value); // typescript shown error on this line, `re.obj.prop` is with type `string` instead of `ComputedRef<string>`. At the moment, I cannot retrieve `prop.value` by accessing `prop` as well, since prop is a `ComputedRef<string>` and I should get its value by accessing `prop.value`!!

Ответ №1:

computed являются ссылками и, как и все ссылки, они автоматически разворачиваются при использовании внутри объекта, созданного с помощью reactive()

Вот почему TS сообщает вам re.obj.prop , что имеет тип string — вам не нужно использовать .value для доступа к значению, просто используйте re.obj.prop

1. допустим, у меня есть reactive({ compute: undefined as ComputedRef<string> | undefined }) . Как я могу назначить a computed(() => 'value') в нем? Я столкнулся с этой проблемой, и typescript не позволяет мне назначать computed into compute , поскольку, когда код покидает reactive объявление, compute prop больше не является a ComputedRef<string> , вместо этого он становится a string !

2. ну, я вижу … интересная проблема, но отличается от вашего первоначального вопроса. Возможно, вам следует создать новый вопрос, и кто-нибудь сможет помочь. Я не являюсь..