Vue typescript: how to annotate computed with types?-CodePudding

I have the following vue code:

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

Which is throwing the following error:

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

I don't fully get it, but my hunch is that Vue's computed() value think the return value should only be WalletName, but of course the getter returns WalletName | null.

I tried putting types all over the place but the error won't go away. How do I fix it?

CodePudding user response：

The computed's getter has its type inferred from the setter's argument, which is WalletName. The getter's return type is expected to match, but the conditional return makes the type WalletName | null (differs from the setter's argument), leading to the error you observed.

Solution

Either make the setter's argument WalletName | null:

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