Annotating Vue Computed Properties with TypeScript: A Step-by-Step Guide

Question

Annotating Vue Computed Properties with TypeScript: A Step-by-Step Guide

My vue code looks like this:

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

An error is being thrown with the following message:

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 am struggling to understand the issue, but it seems Vue's computed() function expects the return value to be strictly WalletName, while my getter returns WalletName | null.

I attempted to add types in various places, but the error persists. How can I resolve this?

typescript vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

The computed's getter will have its type determined based on the argument of the setter, which in this case is WalletName. However, due to the conditional return statement, the getter's return type becomes WalletName | null, causing a mismatch with the setter's argument and resulting in the error you encountered.

Solution

To resolve this issue, you have two possible solutions:

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

Alternatively, you can adjust the getter to match the type of the setter's argument:

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

Answer 2

The computed's getter will have its type determined based on the argument of the setter, which in this case is WalletName. However, due to the conditional return statement, the getter's return type becomes WalletName | null, causing a mismatch with the setter's argument and resulting in the error you encountered.

Solution

To resolve this issue, you have two possible solutions:

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

Alternatively, you can adjust the getter to match the type of the setter's argument:

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

Answer 3

Answer №2

Have you given it a shot?

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

Answer 4

Have you given it a shot?

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

Annotating Vue Computed Properties with TypeScript: A Step-by-Step Guide

Answer №1

Solution

Answer №2

Similar questions

What could be causing the issue with these overload calls?

Exploring the process of searching for an id within an array of objects received through axios in Vue 2

"Concealing a column in a PrimeNG data table with dynamic columns: A step-by-step

What is the best approach to incorporate a refresh feature for a data stream?

What should I do to resolve the "Too few arguments to function" issue in Laravel when using VueJS and implementing DOMPDF?

Creating Live Updates with Laravel Sanctum (SPA) - Implementing Private Channel Broadcasting in Real-Time Notifications

Filter the object by its unique identifier and locate the entry with the highest score

Mono repo project utilizing Angular 4+ and Typescript, enhanced with Bootstrap styling

Using ngbTypeahead to send arguments

Ways to pass a class list from a client to a webmethod using AJAX

"Implementing type definitions for a function that updates records with nested properties and callback support

Guide to correcting the file path of an external css within the public directory on Express framework

Reactivity issue with Vue's data property

Creating a layout of <video> components in vue.js, complete with the ability to rearrange and resize them through drag and drop functionality

Steps to successfully pass a reference from a parent component to a child component that utilizes TouchableOpacity in React Native

Comparing JSON objects with JavaScript models: A guide

Can you please provide instructions on how to obtain the TypeScript definitions file for a specific version of Jquery, such as 3.2.1

Populate a div multiple times in Vue by utilizing v-for

Troubleshooting compatibility issues between Sailsjs Services and TypeScript in Vscode

How can I toggle button states within a v-for loop based on input changes in Vue.js?