Vue машинопись: как аннотировать вычисляемые типы?

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