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.