Vue + typescript：如何使用类型注释计算？

Question

我有以下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: ComputedGetter<unknown>, debugOptions?: DebuggerOptions | undefined): ComputedRef<unknown>', gave the following error.
    Argument of type '{ get(): WalletName | null; set(newVal: WalletName): void; }' is not assignable to parameter of type 'ComputedGetter<unknown>'.
      Object literal may only specify known properties, and 'get' does not exist in type 'ComputedGetter<unknown>'.
  Overload 2 of 2, '(options: WritableComputedOptions<WalletName>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<WalletName>', gave the following error.
    Type '() => WalletName | null' is not assignable to type 'ComputedGetter<WalletName>'.
      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({
  > 46 |       get() {
       |       ^^^
    47 |         return wallet.value ? wallet.value!.name : null;
    48 |       },
    49 |       set(newVal: WalletName) {

我不完全明白，但我的直觉是 Vue 的 computed() 值认为 return 值应该只是 WalletName，当然 getter returns WalletName | null.

我尝试将类型放在各处，但错误不会消失。我该如何解决？

Answer 1

你尝试了吗？

const chosenWallet: WalletName | null  = computed({
      get(): WalletName | null {
        return return wallet.value ? wallet.value!.name : null;
      },
      set(newVal: WalletName) {}
}

Answer 2

computed 的 getter 的类型是从 setter 的参数推断出来的，即 WalletName。 getter 的 return 类型应该匹配，但条件 return 使类型 WalletName | null （不同于 setter 的参数），导致到您观察到的错误。

解决方案

要么使 setter 的论点 WalletName | null:

const chosenWallet = computed({
  get() {
    return wallet.value ? wallet.value.name : null
  },                        
  set(newVal: WalletName | null) {}
})

或者使 getter 的 return 值匹配 setter 的参数类型：

const chosenWallet = computed({
  get() {                                                 
    return (wallet.value ? wallet.value.name : null) as WalletName
  },
  set(newVal: WalletName) {}
})

Vue + typescript：如何使用类型注释计算？

Vue + typescript: how to annotate computed with types?

typescript

vue.js

vuejs3

vue-composition-api

解决方案