Typing ref and reactive in Vue - Mini Project: Build & Apply

Typing ref and reactive in Vue 3 Composition API

📖 Scenario: You are building a simple Vue 3 app that tracks a user's profile information. You want to store the user's age as a single number and the user's profile as an object with name and email. You will use Vue's ref and reactive to hold this data and add TypeScript types to keep your code safe and clear.

🎯 Goal: Create a Vue 3 component using the Composition API where you:Define a typed ref for the user's age as a number.Define a typed reactive object for the user's profile with name and email as strings.Display the age and profile data in the template.

📋 What You'll Learn

Use ref with a type annotation for a number variable called age initialized to 30.

Use reactive with a typed object called profile having name and email as strings.

Use <script setup lang="ts"> syntax for the component.

Display age, profile.name, and profile.email in the template.

💡 Why This Matters

🌍 Real World

Typing reactive data in Vue helps prevent bugs and improves code clarity in real-world web apps that manage user data.

💼 Career

Vue developers often use TypeScript with Composition API to build maintainable and scalable frontend applications.

1

Setup Vue component with typed ref

Create a Vue 3 component using <script setup lang="ts">. Import ref from 'vue'. Then create a typed ref variable called age with type number and initialize it to 30.

Vue

// Your code here

Hint

Use ref(30) to create a typed ref holding the number 30.

2

Add typed reactive object for profile

Import reactive from 'vue'. Create a typed reactive object called profile with properties name and email both typed as string. Initialize name to 'Alice' and email to '[e-mail]'.

Vue

import { ref, reactive } from 'vue'

const age = ref(30)
// Your code here

Hint

Use reactive<{ name: string; email: string }>({ name: 'Alice', email: '[e-mail]' }) to create the typed reactive object.

3

Add template to display age and profile data

Add a <template> section below the script. Inside it, display the age value and the profile.name and profile.email values using mustache syntax {{ }}. Use semantic HTML tags: a <section> with a heading <h2> and paragraphs <p> for each piece of data.

Vue

import { ref, reactive } from 'vue'

const age = ref(30)

const profile = reactive({
  name: 'Alice',
  email: '[e-mail]'
})

Hint

Use <section> with aria-label for accessibility and display data inside <p> tags.

4

Add basic styling and accessibility improvements

Add a <style scoped> block below the template. Use CSS to set the section's max-width to 20rem, add padding of 1rem, and set a border with 1px solid #ccc. Also add a media query for screens narrower than 400px to reduce padding to 0.5rem. This improves readability and responsiveness.

Vue

import { ref, reactive } from 'vue'

const age = ref(30)

const profile = reactive({
  name: 'Alice',
  email: '[e-mail]'
})



  
    User Profile
    Age: {{ age }}
    Name: {{ profile.name }}
    Email: {{ profile.email }}
  

Hint

Use scoped styles to keep CSS local and add a media query for small screens.

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