Adding types to computed properties in Vue 3's Composition API is a seamless process

Question

Adding types to computed properties in Vue 3's Composition API is a seamless process

Having an issue where I am trying to add type to computed but keep encountering this error:

Overload 1 of 2, '(getter: ComputedGetter<AuthFormType>, debugOptions?: DebuggerOptions | undefined): ComputedRef<AuthFormType>', gave the following error

. Any ideas on how to properly add type to computed?

File: Auth.vue

type AuthFormType = 'Form1' | 'Form2';
const getForm = computed<AuthFormType>(
  () => tabs.value.find((tab) => tab.id === currentTab.value)!.component, // will return Form1 or Form2
);

Adding a simple type like string as shown in the documentation here works, but I specifically need to incorporate the type AuthFormType.

typescript vuejs3 vue-composition-api

Answer 1

Answer №1

When it comes to computed properties, there's usually no need to explicitly specify the type since it can be inferred from the return value. https://i.stack.imgur.com/KO7py.png

As shown in my VS Code "peek type definition" hover feature, the correct type ComputedRef<AuthFormType> is automatically detected. However, if you still prefer to define the type explicitly for the computed property, you can import and utilize the same ComputedRef interface.

import { computed, ref, ComputedRef } from 'vue';
import type { Ref } from 'vue';

interface tabObj {
  id: number;
  component: AuthFormType;
}
const tabs: Ref<tabObj[]> = ref([]);
const currentTab = ref(0);

type AuthFormType = 'Form1' | 'Form2';
const getForm: ComputedRef<AuthFormType> = computed(
  (): AuthFormType =>
    tabs.value.find(tab => tab.id === currentTab.value)!.component
);

Answer 2

When it comes to computed properties, there's usually no need to explicitly specify the type since it can be inferred from the return value. https://i.stack.imgur.com/KO7py.png

As shown in my VS Code "peek type definition" hover feature, the correct type ComputedRef<AuthFormType> is automatically detected. However, if you still prefer to define the type explicitly for the computed property, you can import and utilize the same ComputedRef interface.

import { computed, ref, ComputedRef } from 'vue';
import type { Ref } from 'vue';

interface tabObj {
  id: number;
  component: AuthFormType;
}
const tabs: Ref<tabObj[]> = ref([]);
const currentTab = ref(0);

type AuthFormType = 'Form1' | 'Form2';
const getForm: ComputedRef<AuthFormType> = computed(
  (): AuthFormType =>
    tabs.value.find(tab => tab.id === currentTab.value)!.component
);

Adding types to computed properties in Vue 3's Composition API is a seamless process

Answer №1

Similar questions

TypeScript's type casting will fail if one mandatory interface property is missing while an additional property is present

I encounter an issue when trying to declare an enum in TypeScript

What is the correct way to add type annotations to an Axios request?

TypeScript does not verify keys within array objects

Creating subclass mappings and defining subclasses dynamically using Typescript at runtime

The React useState Props error message TS2322: Cannot assign type 'string' to type 'number'

Updating text inputs in Angular can be done more efficiently using Angular Update

Tips for effectively managing index positions within a dual ngFor loop in Angular

Challenges with overwriting TailwindCSS classes within a React component library package

MatDialog displaying no content

Submit information by utilizing' content-type': 'application/x-www-form-urlencoded' and 'key': 'key'

Divide the enhanced document into sections using TypeScript

A programming element that is capable of accessing a data member, but mandates the use of a setter method for modifications

Changing the way in which text is selected and copied from a webpage with visible white space modifications

Issues with Nuxt 3 middleware causing layout to fail updating post-navigation when using distinct login layout

Generating automatic generic types in Typescript without needing to explicitly declare the type

What is the capability of dynamically generating an index in Typescript?

Solving runtime JavaScript attribute issues by deciphering TypeScript compiler notifications

The return type is not undefined but the switch covers all possibilities

Steps to display a modal dialog depending on the category of the label