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.