#typescript #vue.js #vuejs3 #vue-composition-api
Вопрос:
У меня есть следующий код vue:
const chosenWallet = computed({ get() { return return wallet.value ? wallet.value!.name : null; }, set(newVal: WalletName) {} }
Который выдает следующую ошибку:
TS2769: No overload matches this call. Overload 1 of 2, '(getter: ComputedGetterlt;unknowngt;, debugOptions?: DebuggerOptions | undefined): ComputedReflt;unknowngt;', gave the following error. Argument of type '{ get(): WalletName | null; set(newVal: WalletName): void; }' is not assignable to parameter of type 'ComputedGetterlt;unknowngt;'. Object literal may only specify known properties, and 'get' does not exist in type 'ComputedGetterlt;unknowngt;'. Overload 2 of 2, '(options: WritableComputedOptionslt;WalletNamegt;, debugOptions?: DebuggerOptions | undefined): WritableComputedReflt;WalletNamegt;', gave the following error. Type '() =gt; WalletName | null' is not assignable to type 'ComputedGetterlt;WalletNamegt;'. Type 'WalletName | null' is not assignable to type 'WalletName'. Type 'null' is not assignable to type 'WalletName'. 44 | const { wallet, setWallet } = useWallet(); 45 | const chosenWallet = computed({ gt; 46 | get() { | ^^^ 47 | return wallet.value ? wallet.value!.name : null; 48 | }, 49 | set(newVal: WalletName) {
Я не совсем понимаю это, но моя догадка в том , что computed()
значение Vue считает, что возвращаемое значение должно быть только WalletName
, но, конечно, возвращает получатель WalletName | null
.
Я пробовал расставлять типы повсюду, но ошибка никуда не исчезает. Как мне это исправить?
Комментарии:
1. Можете ли вы добавить
WalletName
к этому вопросу
Ответ №1:
Получатель computed
‘s имеет свой тип, выводимый из аргумента сеттера, который является WalletName
. Ожидается, что возвращаемый тип получателя будет совпадать, но условное возвращение создает тип WalletName | null
(отличается от аргумента установщика), что приводит к ошибке, которую вы наблюдали.
Решение
Либо приведите аргумент сеттера WalletName | null
:
const chosenWallet = computed({ get() { return wallet.value ? wallet.value.name : null }, 👇 set(newVal: WalletName | null) {} })
Или сделайте возвращаемое значение получателя соответствующим типу аргумента задатчика:
const chosenWallet = computed({ get() { 👇 return (wallet.value ? wallet.value.name : null) as WalletName }, set(newVal: WalletName) {} })
Комментарии:
1. о боже, конечно! Я пытался добавлять везде, кроме сеттера, но вы на 100% правы. Огромное спасибо.
Ответ №2:
Ты пробовал?
const chosenWallet: WalletName | null = computed({ get(): WalletName | null { return return wallet.value ? wallet.value!.name : null; }, set(newVal: WalletName) {} }