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.