Typing computed properties in Vue - Step-by-Step Execution

Concept Flow - Typing computed properties

Define reactive state

↓

Create computed property

↓

Type computed property return

↓

Use computed property in template or code

↓

Access typed value safely

This flow shows how to define a reactive state, create a typed computed property, and use it safely in Vue.

Execution Sample

Vue

import { ref, computed } from 'vue'

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

console.log(doubleCount.value)

This code creates a reactive count and a computed property doubleCount that doubles count, then logs the computed value.

Execution Table

Step	Action	State Before	State After	Output
1	Initialize count with ref(0)	count: undefined	count: 0	none
2	Define doubleCount as computed(() => count.value * 2)	doubleCount: undefined	doubleCount: computed ref	none
3	Access doubleCount.value	count: 0	count: 0	0 * 2 = 0
4	Update count.value = 5	count: 0	count: 5	none
5	Access doubleCount.value	count: 5	count: 5	5 * 2 = 10

💡 Execution stops after accessing computed property with updated reactive state.

Variable Tracker

Variable	Start	After Step 1	After Step 4	Final
count.value	undefined	0	5	5
doubleCount.value	undefined	0	10	10

Key Moments - 2 Insights

Why do we use .value to access the computed property?

In Vue, both ref and computed return objects with a .value property holding the actual value. See execution_table steps 3 and 5 where doubleCount.value is accessed.

How does typing help with computed properties?

Typing ensures the computed property's return type is known, so editors and TypeScript can catch errors early. This is implied by defining computed with a function returning a specific type.

Visual Quiz - 3 Questions

Look at the execution table, what is doubleCount.value at step 3?

A undefined

B 5

C 0

D 10

💡 Hint

Check the Output column at step 3 in the execution_table.

At which step does count.value change from 0 to 5?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the State After column for count.value changes.

If we forgot to use .value when accessing doubleCount, what would happen?

A The code runs normally

B We get the computed ref object, not the number

C The value doubles automatically

D The count resets to zero

💡 Hint

Recall that computed returns an object with .value property, see key_moments about .value usage.

Concept Snapshot

Typing computed properties in Vue:
- Use computed(() => expression) to create reactive computed values.
- Access computed values with .value.
- TypeScript infers or you can specify return type for safety.
- Changes in reactive state update computed automatically.
- Always use .value to get the actual computed result.

Full Transcript

This visual execution shows how Vue's computed properties work with typing. First, a reactive state variable count is created with ref(0). Then, a computed property doubleCount is defined to double count's value. Accessing doubleCount.value returns the computed result. When count.value changes, doubleCount.value updates automatically. The .value property is essential to access the inner value of refs and computed properties. Typing helps ensure the computed property's return type is known, improving code safety and editor support.

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