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.