Typing ref and reactive in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue component with typed ref?

Consider this Vue 3 component using ref with TypeScript typing. What will be rendered inside the paragraph?

Vue

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(5);
    count.value += 3;
    return { count };
  },
  template: `<p>{{ count }}</p>`
});

A <p>NaN</p>

B <p>8</p>

C <p>undefined</p>

D <p>5</p>

💡 Hint

Remember that ref wraps the value and you access it with .value.

The count ref starts at 5, then 3 is added to count.value, making it 8. The template renders count which unwraps the ref automatically, so it shows 8.

📝 Syntax

intermediate

Which option correctly types a reactive object in Vue 3 with TypeScript?

Given this reactive object, which option correctly types it to have name as string and age as number?

Vue

import { reactive } from 'vue';

const person = reactive( /* ??? */ );

A { name: 'Alice', age: '30' } as { name: string; age: number }

B reactive<{ name: string; age: number }>({ name: 'Alice', age: 30 })

C reactive({ name: 'Alice', age: '30' })

D { name: 'Alice', age: 30 } as { name: string; age: number }

💡 Hint

Type assertion is done outside the reactive call in Vue 3.

Option D correctly asserts the type of the object before passing it to reactive. Option D incorrectly uses a generic parameter with reactive, which is not supported. Options C and D have age as string, which conflicts with the number type.

🔧 Debug

advanced

Why does this Vue 3 code cause a TypeScript error?

Look at this code snippet. Why does TypeScript show an error on state.count = 'ten'?

Vue

import { reactive } from 'vue';

const state = reactive({ count: 0 });

state.count = 'ten';

A Because <code>count</code> is typed as number and assigning a string is invalid

B Because <code>reactive</code> only accepts strings as values

C Because <code>state</code> is readonly and cannot be changed

D Because <code>count</code> must be accessed with <code>.value</code>

💡 Hint

Check the initial type of count in the reactive object.

The reactive object infers count as a number. Assigning a string to it violates the type, causing a TypeScript error. Option A is false because reactive accepts any type. Option A is false because reactive objects are mutable. Option A is false because .value is for refs, not reactive objects.

❓ state_output

advanced

What is the value of message.value after this code runs?

Given this Vue 3 setup, what is the final value of message.value?

Vue

import { ref } from 'vue';

const message = ref<string | null>(null);

if (!message.value) {
  message.value = 'Hello';
}

message.value += ' World!';

A 'Hello World!'

B null

C 'null World!'

D undefined

💡 Hint

Remember how null and string concatenation work in JavaScript.

Initially, message.value is null. The if block sets it to 'Hello'. Then ' World!' is appended, resulting in 'Hello World!'.

🧠 Conceptual

expert

Which statement about typing ref and reactive in Vue 3 is TRUE?

Choose the correct statement about how TypeScript typing works with ref and reactive in Vue 3.

A <code>reactive</code> objects always require generic type parameters to work correctly

B <code>ref</code> values are accessed directly without <code>.value</code> in TypeScript

C <code>ref</code> requires explicit type only when the initial value is <code>null</code> or <code>undefined</code>

D <code>reactive</code> returns a readonly object that cannot be mutated

💡 Hint

Think about when TypeScript needs help to infer types for refs.

Option C is true: when ref is initialized with null or undefined, you must specify the type to avoid any. Option C is false because reactive infers types from the object passed. Option C is false because ref values must be accessed with .value. Option C is false because reactive returns a mutable proxy.

Practice

1. Which Vue function should you use to create a reactive variable holding a simple number with type safety?

easy

A. ref<number>(0)

B. reactive<number>({ value: 0 })

C. ref({ count: 0 })

D. reactive(0)

Solution

1. Step 1: Understand the use of ref for simple values

   ref<Type> is used to create reactive primitive values like numbers or strings with type safety.

2. Step 2: Recognize the correct syntax for a typed ref

   The syntax ref<number>(0) correctly creates a reactive number initialized to 0.

3. Final Answer:

   ref<number>(0) -> Option A

4. Quick Check:

   Simple reactive value uses ref<Type> = D [OK]

Hint: Use ref<Type> for simple values, reactive<Type> for objects [OK]

Common Mistakes:

• Using reactive for simple primitive values
• Omitting the type parameter in ref
• Using ref with an object instead of reactive

2. Which of the following is the correct syntax to create a reactive object with type safety in Vue 3?

easy

A. const state = ref<{ count: number }>({ count: 0 })

B. const state = reactive<{ count: number }>({ count: 0 })

C. const state = reactive({ count: 0 })

D. const state = ref({ count: 0 })

Solution

1. Step 1: Identify the correct function for reactive objects

   Use reactive<Type> to create reactive objects with type safety.

2. Step 2: Check the syntax correctness

   const state = reactive<{ count: number }>({ count: 0 }) correctly types the object and makes it reactive.

3. Final Answer:

   const state = reactive<{ count: number }>({ count: 0 }) -> Option B

4. Quick Check:

   Reactive object with type uses reactive<Type> = A [OK]

Hint: Use reactive<Type> for objects, ref<Type> for primitives [OK]

Common Mistakes:

• Using ref instead of reactive for objects
• Missing type parameter in reactive
• Using reactive without an object

3. Given the code:

const count = ref<number>(5);
count.value = 10;
console.log(count.value);

What will be logged to the console?

medium

A. 5

B. undefined

C. 10

D. Error: count is not a function

Solution

1. Step 1: Understand ref and .value usage

   ref<number>(5) creates a reactive number with initial value 5. To update or read the value, use .value.

2. Step 2: Follow the code execution

   Setting count.value = 10 updates the reactive value. Logging count.value outputs 10.

3. Final Answer:

   10 -> Option C

4. Quick Check:

   ref value updated and logged = 10 [OK]

Hint: Access ref values with .value to get or set [OK]

Common Mistakes:

• Logging ref directly without .value
• Confusing reactive object access with ref
• Expecting initial value after update

4. What is wrong with this Vue 3 code snippet?

const state = reactive<{ count: number }>({ count: 0 });
state.count = 'one';

medium

A. Runtime error: reactive objects are immutable

B. Syntax error: reactive cannot be typed

C. No error, code works fine

D. Type error: assigning string to number property

Solution

1. Step 1: Check the declared type of reactive object

   The object is typed as { count: number }, so count must be a number.

2. Step 2: Analyze the assignment

   Assigning 'one' (a string) to count violates the type, causing a type error.

3. Final Answer:

   Type error: assigning string to number property -> Option D

4. Quick Check:

   Type mismatch in reactive object property = C [OK]

Hint: Check property types before assigning new values [OK]

Common Mistakes:

• Ignoring type errors in reactive objects
• Thinking reactive objects are immutable
• Confusing syntax errors with type errors

5. You want to create a reactive state in Vue 3 that holds a list of user objects with typed properties id: number and name: string. Which is the best way to type and initialize this state?

hard

A. const users = ref<Array<{ id: number; name: string }>>([])

B. const users = reactive<Array<{ id: number; name: string }>>({})

C. const users = reactive<{ id: number; name: string }>([])

D. const users = ref<{ id: number; name: string }>([])

Solution

1. Step 1: Decide between ref and reactive for arrays

   Arrays are objects, but Vue recommends using ref for arrays to keep reactivity simple and clear.

2. Step 2: Apply correct typing for array of objects

   Typing as Array<{ id: number; name: string }> ensures each user object has correct properties.

3. Step 3: Check initialization syntax

   ref<Array<{ id: number; name: string }>>([]) initializes an empty reactive array with proper typing.

4. Final Answer:

   const users = ref<Array<{ id: number; name: string }>>([]) -> Option A

5. Quick Check:

   Typed reactive array uses ref with array type = A [OK]

Hint: Use ref<Array<Type>> for reactive arrays of objects [OK]

Common Mistakes:

• Using reactive with array type incorrectly
• Typing reactive as single object instead of array
• Using ref with object type for array