Typing computed properties in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this typed computed property?

Consider this Vue 3 component using the Composition API. What will be the rendered output inside the

tag?

Vue

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(5);
    const doubleCount = computed(() => count.value * 2);
    return { count, doubleCount };
  }
};

// Template:
// <p>{{ doubleCount }}</p>

A undefined

B 5

C 10

D NaN

💡 Hint

Remember computed properties return the value of the function inside them.

The computed property doubleCount multiplies count.value (which is 5) by 2, so it returns 10. The type number ensures the computed value is a number.

📝 Syntax

intermediate

Which option correctly types a computed property returning a string?

You want to create a computed property that returns a string greeting. Which code snippet correctly types it in Vue 3 Composition API?

A const greeting = computed<string>(() => `Hello, Vue!`);

B const greeting = computed((): string => `Hello, Vue!`);

C const greeting = computed(() => `Hello, Vue!` as string);

D const greeting = computed<string>(() => { return 123; });

💡 Hint

Typing the function return is the recommended way.

Option B correctly types the return value of the function as string. Option B is invalid because computed does not accept a generic type parameter directly. Option B uses a type assertion inside the function but does not type the computed itself. Option B returns a number but claims string, causing a type mismatch.

🔧 Debug

advanced

Why does this typed computed property cause a TypeScript error?

Examine the code below. Why does TypeScript report an error on the computed property?

Vue

import { ref, computed } from 'vue';

const count = ref(3);
const message = computed((): string => {
  if (count.value > 5) return 'High';
  // Missing return in else case
});

A Because the computed function does not return a string in all code paths.

B Because computed cannot be typed with <string> generic.

C Because ref must be typed explicitly when used with computed.

D Because count.value is not reactive inside computed.

💡 Hint

Check if all possible paths return the expected type.

The computed function must return a string in every possible path. Here, if count.value <= 5, the function returns nothing (undefined), causing a type error.

❓ state_output

advanced

What is the value of fullName after updating firstName?

Given this Vue 3 component, what will fullName.value be after firstName.value = 'Jane'?

Vue

import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

firstName.value = 'Jane';

A "Jane Doe"

B "John Doe"

C "Jane John"

D "Doe Jane"

💡 Hint

Computed properties update automatically when dependencies change.

When firstName.value changes to 'Jane', the computed fullName updates reactively to 'Jane Doe'.

🧠 Conceptual

expert

Which statement about typing computed properties in Vue 3 is correct?

Select the one true statement about typing computed properties in Vue 3 Composition API with TypeScript.

A You should cast the computed property to <code>ComputedRef&lt;T&gt;</code> manually after creation.

B Computed properties cannot be typed and always infer <code>any</code> type.

C You must always provide a generic type parameter to <code>computed</code> to type its return value.

D Typing the return type of the function passed to <code>computed</code> is the recommended way to ensure correct typing.

💡 Hint

Think about how TypeScript infers types from functions.

Vue's computed function infers the return type from the function passed in. Typing the function's return type is the recommended and cleanest way to type computed properties. Providing a generic parameter directly to computed is not supported. Casting manually is unnecessary if the function is typed properly.

Practice

1. What is the main benefit of typing computed properties in Vue?

easy

A. It disables reactivity for the computed property.

B. It helps catch errors early and improves code clarity.

C. It automatically updates the DOM without reactivity.

D. It makes the computed property run faster.

Solution

1. Step 1: Understand typing purpose

   Typing in computed properties helps the developer know what type of value to expect and prevents mistakes.

2. Step 2: Recognize benefits

   Typing improves code clarity and helps catch errors before running the code.

3. Final Answer:

   It helps catch errors early and improves code clarity. -> Option B

4. Quick Check:

   Typing computed properties = better error detection [OK]

Hint: Typing improves clarity and error detection [OK]

Common Mistakes:

• Thinking typing affects runtime speed
• Believing typing disables reactivity
• Confusing typing with DOM updates

2. Which of the following is the correct syntax to type a computed property returning a number in Vue 3 with TypeScript?

easy

A. const total = computed<number>(() => 42);

B. const total = computed((): string => 42);

C. const total = computed<string>(() => 42);

D. const total = computed(() => '42' as number);

Solution

1. Step 1: Identify correct typing syntax

   The correct way to type a computed property is using computed<Type>(() => value).

2. Step 2: Match return type and value

   The value 42 is a number, so computed<number>(() => 42) matches correctly.

3. Final Answer:

   const total = computed<number>(() => 42); -> Option A

4. Quick Check:

   Use computed<Type> for typing [OK]

Hint: Use computed<Type>(() => value) to type computed [OK]

Common Mistakes:

• Using wrong generic type like string for number value
• Typing the function return instead of computed generic
• Casting inside the function instead of typing computed

3. Given the code below, what is the type of fullName.value?

import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed<string>(() => `${firstName.value} ${lastName.value}`);

medium

A. string

B. Ref<string>

C. undefined

D. number

Solution

1. Step 1: Understand computed typing

   The computed property is typed as computed<string>, so its value is a string.

2. Step 2: Check .value type

   Accessing fullName.value gives the computed value, which is a string.

3. Final Answer:

   string -> Option A

4. Quick Check:

   Typed computed value = string [OK]

Hint: Access .value to get typed computed result [OK]

Common Mistakes:

• Confusing computed ref type with its value type
• Assuming fullName.value is a Ref<string>
• Thinking fullName.value is undefined before assignment

4. Identify the error in this Vue computed property typing:

const count = ref(0);
const doubleCount = computed<string>(() => count.value * 2);

medium

A. The computed function should not use an arrow function.

B. The ref should be typed as string, not number.

C. The computed type should be number, not string.

D. The computed property cannot depend on a ref.

Solution

1. Step 1: Check the computed return value type

   The expression count.value * 2 results in a number.

2. Step 2: Match computed generic type

   The computed is typed as string, which mismatches the number result.

3. Final Answer:

   The computed type should be number, not string. -> Option C

4. Quick Check:

   Computed type must match return value type [OK]

Hint: Match computed generic type to returned value type [OK]

Common Mistakes:

• Typing computed as string when returning number
• Thinking arrow functions are invalid in computed
• Believing computed can't depend on refs

5. You want to create a typed computed property that returns the count of items in a reactive array items. Which is the correct way to type it in Vue 3 with TypeScript?

const items = ref<string[]>([]);
const itemCount = computed<???>(() => items.value.length);

hard

A. Array<string>

B. string

C. Ref<number>

D. number

Solution

1. Step 1: Determine the return type of computed

   items.value.length returns a number representing the count.

2. Step 2: Use computed generic type matching return

   The computed should be typed as computed<number> to match the number return.

3. Final Answer:

   number -> Option D

4. Quick Check:

   Computed type = return value type [OK]

Hint: Type computed with the exact return value type [OK]

Common Mistakes:

• Typing computed as Ref<number> instead of number
• Using string type for a numeric length
• Confusing array type with count type