Typing composables in Vue - Mini Project: Build & Apply

Typing Composables in Vue 3

📖 Scenario: You are building a small Vue 3 app that uses a composable function to manage a counter. You want to add TypeScript types to your composable to make it safer and easier to use.

🎯 Goal: Create a typed composable function called useCounter that returns a reactive count and an increment function. Use TypeScript types to define the return values.

📋 What You'll Learn

Create a reactive variable count with initial value 0

Create a composable function useCounter that returns count and an increment function

Add TypeScript types to the composable's return object

Use Vue 3 Composition API with ref and readonly

💡 Why This Matters

🌍 Real World

Typed composables help build reusable and safe logic blocks in Vue 3 apps, improving code quality and developer experience.

💼 Career

Understanding how to type composables is essential for Vue developers working with TypeScript in professional projects.

1

Setup a reactive count variable

Create a reactive variable called count using Vue's ref function and set its initial value to 0.

Vue

import { ref } from 'vue'

// Create a reactive count variable with initial value 0
// Your code here

Hint

Use const count = ref(0) to create a reactive number starting at zero.

2

Create the useCounter composable function

Create a function called useCounter that returns an object with count and an increment function. The increment function should increase count.value by 1.

Vue

import { ref } from 'vue'

const count = ref(0)

// Create useCounter function returning count and increment
// Your code here

Hint

Define useCounter as a function that returns count and increment. The increment function adds 1 to count.value.

3

Add TypeScript types to the composable return

Add TypeScript types to the useCounter function so it returns an object with count typed as Ref<number> and increment typed as a function returning void. Import Ref from 'vue'.

Vue

import { ref, Ref } from 'vue'

const count = ref(0)

function useCounter(): { count: Ref; increment: () => void } {
  function increment() {
    count.value++
  }
  return { count, increment }
}

// Add TypeScript types to useCounter return
// Your code here

Hint

Use Ref<number> to type count and () => void to type increment.

4

Make count readonly in the composable return

Import readonly from 'vue' and return count wrapped with readonly in the useCounter function to prevent external modification of count.

Vue

import { ref, Ref, readonly } from 'vue'

const count = ref(0)

function useCounter(): { count: Ref; increment: () => void } {
  function increment() {
    count.value++
  }
  // Return count as readonly
  return { count: readonly(count), increment }
}

// Wrap count with readonly before returning
// Your code here

Hint

Use readonly(count) to protect count from outside changes.

Practice

1. What is the main purpose of typing composables in Vue with TypeScript?

easy

A. To catch errors early and improve code understanding

B. To make the app run faster

C. To reduce the size of the final bundle

D. To avoid using reactive data

Solution

1. Step 1: Understand typing benefits

   Typing helps catch mistakes before running the code and clarifies what data types are used.

2. Step 2: Compare options

   Only To catch errors early and improve code understanding correctly states the purpose of typing composables; others are unrelated benefits.

3. Final Answer:

   To catch errors early and improve code understanding -> Option A

4. Quick Check:

   Typing composables = catch errors early [OK]

Hint: Typing helps find mistakes before running code [OK]

Common Mistakes:

• Thinking typing improves app speed
• Confusing typing with bundle size reduction
• Believing typing removes reactive data

2. Which of the following is the correct way to type a reactive number in a Vue composable using TypeScript?

easy

A. const count: Ref<number> = ref(0);

B. const count: reactive<number> = reactive(0);

C. const count: number = ref(0);

D. const count: Ref = ref('0');

Solution

1. Step 1: Identify correct typing for reactive refs

   Vue uses Ref<Type> to type reactive refs, so Ref<number> is correct for a number.

2. Step 2: Check each option

   const count: Ref<number> = ref(0); correctly types count as Ref<number>. const count: reactive<number> = reactive(0); uses wrong syntax, C assigns ref to number type, D uses wrong type and string value.

3. Final Answer:

   const count: Ref<number> = ref(0); -> Option A

4. Quick Check:

   Use Ref<Type> for reactive refs [OK]

Hint: Use Ref<Type> to type reactive refs in composables [OK]

Common Mistakes:

• Using reactive instead of Ref for refs
• Assigning ref() to plain types
• Mismatching value type and Ref generic

3. Given this composable code, what is the type of message inside the component?

import { ref } from 'vue';

export function useMessage() {
  const message = ref('Hello');
  return { message };
}

medium

A. string

B. Ref<string>

C. Ref<any>

D. any

Solution

1. Step 1: Understand ref return type

   The ref function returns a Ref object wrapping the value type, here a string.

2. Step 2: Determine message type

   Since message is created by ref('Hello'), its type is Ref<string>.

3. Final Answer:

   Ref<string> -> Option B

4. Quick Check:

   ref('text') returns Ref<string> [OK]

Hint: ref('text') returns Ref<string> type [OK]

Common Mistakes:

• Assuming message is plain string
• Using Ref<any> without specifying type
• Confusing Ref<string> with string

4. Identify the error in this typed composable code:

import { ref, Ref } from 'vue';

export function useCounter(): { count: Ref<number> } {
  const count = ref('0');
  return { count };
}

medium

A. Ref type is not imported

B. Return type is missing

C. count should be reactive, not ref

D. ref is called with a string instead of a number

Solution

1. Step 1: Check ref argument type

   The function expects count to be Ref<number>, but ref is called with a string '0'.

2. Step 2: Identify mismatch error

   This causes a type mismatch error because the initial value type does not match the declared Ref generic.

3. Final Answer:

   ref is called with a string instead of a number -> Option D

4. Quick Check:

   ref argument type must match Ref generic [OK]

Hint: Check ref initial value matches declared Ref type [OK]

Common Mistakes:

• Passing wrong type to ref()
• Ignoring return type mismatch
• Confusing reactive and ref usage

5. How would you correctly type a composable that returns a reactive object with a string title and a number count using Vue's Ref type?

import { ref, Ref } from 'vue';

export function useData() {
  const title = ref('My Title');
  const count = ref(10);
  return { title, count };
}

hard

A. export function useData(): { title: reactive<string>; count: reactive<number> }

B. export function useData(): { title: string; count: number }

C. export function useData(): { title: Ref<string>; count: Ref<number> }

D. export function useData(): { title: Ref<any>; count: Ref<any> }

Solution

1. Step 1: Identify types of returned refs

   Both title and count are refs holding string and number respectively, so their types are Ref<string> and Ref<number>.

2. Step 2: Match return type signature

   The function return type should reflect these as an object with keys typed as Ref<string> and Ref<number>.

3. Final Answer:

   export function useData(): { title: Ref<string>; count: Ref<number> } -> Option C

4. Quick Check:

   Return type matches Ref types of reactive data [OK]

Hint: Return type must match Ref types of reactive variables [OK]

Common Mistakes:

• Typing return values as plain string or number
• Using Ref<any> instead of specific types
• Using reactive instead of Ref in type