Typing composables in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a typed ref in Vue Composition API.

Vue

import { ref } from 'vue';
const count = ref<[1]>(0);

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using string type when the value is a number.

Forgetting to add the type annotation.

The ref is typed with number because the initial value is 0, a number.

2fill in blank

medium

Complete the code to type a reactive object with Vue's Composition API.

Vue

import { reactive } from 'vue';
interface User {
  name: string;
  age: number;
}
const user = reactive<[1]>({ name: 'Alice', age: 30 });

Drag options to blanks, or click blank then click option'

AUser

BRecord<string, any>

Cobject

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic object types instead of the specific interface.

Not typing the reactive object at all.

The reactive object is typed with the User interface to ensure correct property types.

3fill in blank

hard

Fix the error in typing a computed property in Vue Composition API.

Vue

import { computed } from 'vue';
const doubleCount = computed<[1]>(() => count.value * 2);

Drag options to blanks, or click blank then click option'

Aboolean

Bstring

Cnumber

Dvoid

Attempts:

3 left

💡 Hint

Common Mistakes

Typing the computed as string or boolean incorrectly.

Omitting the type annotation causing implicit any.

The computed property returns a number because it doubles a numeric count.

4fill in blank

hard

Fill both blanks to type a composable function that returns a typed ref and a typed function.

Vue

import { ref } from 'vue';
function useCounter() {
  const count = ref<[1]>(0);
  function increment(): [2] {
    count.value++;
  }
  return { count, increment };
}

Drag options to blanks, or click blank then click option'

Anumber

Bvoid

Cstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Typing increment as returning number instead of void.

Using wrong types for count.

The count ref is a number, and increment returns nothing, so its return type is void.

5fill in blank

hard

Fill all three blanks to type a composable that returns a reactive object, a computed property, and a method with correct types.

Vue

import { reactive, computed } from 'vue';
interface Todo {
  text: string;
  done: boolean;
}
function useTodo() {
  const state = reactive<[1]>({ text: '', done: false });
  const status = computed<[2]>(() => (state.done ? 'Done' : 'Pending'));
  function toggle(): [3] {
    state.done = !state.done;
  }
  return { state, status, toggle };
}

Drag options to blanks, or click blank then click option'

ATodo

Bstring

Cvoid

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types for reactive state or computed property.

Typing toggle as returning a value instead of void.

The reactive object is typed as Todo. The computed property returns a string. The toggle method returns void because it does not return a value.

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