Typing ref and reactive in Vue

Introduction

Typing ref and reactive helps your code know what kind of data it holds. This makes your app safer and easier to understand.

When you want to store a simple value like a number or string and keep it reactive.

When you want to store an object or array and track changes inside it.

When you want to catch mistakes early by telling the code what type of data to expect.

When working with TypeScript in Vue to get better code suggestions and error checks.

Syntax

Vue

import { ref, reactive } from 'vue';

const count = ref<number>(0);
const user = reactive<{ name: string; age: number }>({ name: '', age: 0 });

Use ref<Type>() for simple reactive values.

Use reactive<Type>() for reactive objects or arrays.

Examples

This creates a reactive string called message.

Vue

const message = ref<string>('Hello');

This creates a reactive array of numbers called numbers.

Vue

const numbers = reactive<number[]>([1, 2, 3]);

This creates a reactive object profile with typed properties.

Vue

const profile = reactive<{ name: string; active: boolean }>({ name: 'Anna', active: true });

Sample Program

This Vue component uses typed ref for a number and typed reactive for an object. Buttons update the values reactively.

Vue

<script setup lang="ts">
import { ref, reactive } from 'vue';

const count = ref<number>(0);
const user = reactive<{ name: string; age: number }>({ name: 'John', age: 30 });

function increment() {
  count.value++;
}

function birthday() {
  user.age++;
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increase Count</button>

    <p>User: {{ user.name }}, Age: {{ user.age }}</p>
    <button @click="birthday">Happy Birthday!</button>
  </div>
</template>

Important Notes

Always access the value inside ref with .value.

reactive wraps objects and arrays, so you access properties directly.

Typing helps catch errors before running your app.

Summary

Use ref<Type> for simple reactive values.

Use reactive<Type> for reactive objects or arrays.

Typing improves safety and developer experience in Vue apps.

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