Typing composables in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this typed composable usage?

Consider this Vue 3 composable using TypeScript. What will be the console output when the component using it is mounted?

Vue

import { ref } from 'vue';

function useCounter() {
  const count = ref<number>(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// In component setup
const { count, increment } = useCounter();
increment();
increment();
console.log(count.value);

A 2

B 0

C undefined

D NaN

💡 Hint

Remember that ref creates a reactive value with a .value property.

The count ref starts at 0. Each call to increment() increases count.value by 1. After two increments, count.value is 2.

📝 Syntax

intermediate

Which option correctly types a composable returning a reactive object?

Which of the following composable function signatures correctly types a reactive object with a message string property in Vue 3 with TypeScript?

A function useMessage(): { message: string } { const message = ref('hello'); return { message }; }

B function useMessage(): { message: Ref<string> } { const message = ref('hello'); return { message }; }

C function useMessage(): Ref<string> { const message = ref('hello'); return message; }

D function useMessage(): { message: Reactive<string> } { const message = ref('hello'); return { message }; }

💡 Hint

Remember that ref returns a Ref type wrapping the value.

Option B correctly types the returned object with message as a Ref<string>. Option B incorrectly types message as a string, but it is a Ref. Option B returns the Ref directly, not an object. Option B uses a non-existent Reactive type.

🔧 Debug

advanced

What error does this typed composable cause?

Given this composable, what error will TypeScript report?

Vue

import { ref } from 'vue';

function useFlag() {
  const flag = ref<boolean>(false);
  function toggle() {
    flag.value = 'true';
  }
  return { flag, toggle };
}

A Type 'string' is not assignable to type 'boolean'.

B Property 'value' does not exist on type 'boolean'.

C Cannot redeclare block-scoped variable 'flag'.

D No error, code is valid.

💡 Hint

Check the type assigned to flag.value inside toggle.

The flag ref is typed as boolean. Assigning a string 'true' to flag.value causes a type error: Type 'string' is not assignable to type 'boolean'.

❓ state_output

advanced

What is the value of fullName after calling updateName?

Analyze this typed composable and determine the value of fullName.value after updateName() is called.

Vue

import { ref, computed } from 'vue';

function useUser() {
  const firstName = ref<string>('John');
  const lastName = ref<string>('Doe');
  const fullName = computed(() => `${firstName.value} ${lastName.value}`);

  function updateName() {
    firstName.value = 'Jane';
    lastName.value = 'Smith';
  }

  return { fullName, updateName };
}

const { fullName, updateName } = useUser();
updateName();

A "John Smith"

B "John Doe"

C "Jane Doe"

D "Jane Smith"

💡 Hint

Remember that computed updates reactively when dependencies change.

After calling updateName(), firstName.value is 'Jane' and lastName.value is 'Smith'. The computed fullName reflects these changes, so its value is 'Jane Smith'.

🧠 Conceptual

expert

Which option best describes the purpose of typing composables in Vue 3 with TypeScript?

Why is it important to add explicit TypeScript types to Vue 3 composables?

A To prevent Vue from tracking reactivity and improve performance by disabling proxies.

B To make the composable run faster in the browser by optimizing JavaScript execution.

C To ensure the composable's reactive state and functions have clear, predictable types, improving code safety and editor support.

D To automatically generate UI elements based on the composable's types without writing templates.

💡 Hint

Think about benefits of TypeScript in code quality and developer experience.

Typing composables helps developers catch errors early, understand the data shapes, and get better autocomplete and documentation in editors. It does not affect runtime speed or UI generation automatically.

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