Implementing a Reusable Counter Hook in Vue with TypeScript

This challenge focuses on creating a custom Vue Composition API hook, useCounter, that manages a counter value and provides methods for incrementing, decrementing, and resetting it. Building reusable hooks is a core principle of the Composition API, promoting code organization and reusability across components.

Problem Description

You are tasked with implementing the useCounter hook in Vue using TypeScript. This hook should encapsulate the logic for managing a counter, providing a reactive counter value and functions to modify it. The hook should accept an initial value as an argument and expose the following:

• count: A reactive variable holding the current counter value.
• increment: A function that increases the counter by 1.
• decrement: A function that decreases the counter by 1.
• reset: A function that sets the counter back to its initial value.
• setCount: A function that allows setting the counter to a specific value.

The hook should utilize Vue's reactivity system to ensure that any component using the hook automatically re-renders when the counter value changes.

Key Requirements:

• The hook must be written in TypeScript.
• The hook must be reactive, meaning changes to the counter value should trigger updates in components using the hook.
• The hook must accept an initial counter value as an argument.
• The hook must expose the count, increment, decrement, reset, and setCount functions.
• The reset function should set the counter back to the initial value provided when the hook was created.
• The setCount function should allow setting the counter to any number.

Expected Behavior:

When a component uses the useCounter hook, it should receive a reactive count variable and the functions increment, decrement, reset, and setCount. Calling these functions should update the count variable and trigger re-renders in the component.

Examples

Example 1:

Input: Initial value: 0

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement, reset, setCount } = useCounter(0);

    return {
      count,
      increment,
      decrement,
      reset,
      setCount
    };
  }
}

Output:
- Initial count: 0
- increment() called once: count becomes 1
- decrement() called once: count becomes 0
- reset() called: count becomes 0
- setCount(5) called: count becomes 5

Explanation: The hook is initialized with a starting value of 0. The functions modify the counter as expected, and the component re-renders to reflect the changes.

Example 2:

Input: Initial value: 100

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement, reset, setCount } = useCounter(100);

    return {
      count,
      increment,
      decrement,
      reset,
      setCount
    };
  }
}

Output:
- Initial count: 100
- increment() called 5 times: count becomes 105
- decrement() called 2 times: count becomes 103
- reset() called: count becomes 100
- setCount(-5) called: count becomes -5

Explanation: The hook is initialized with a starting value of 100. The functions modify the counter as expected, demonstrating that the initial value can be any number.

Constraints

• The hook must be implemented using Vue 3's Composition API.
• The hook must be written in TypeScript.
• The initial value can be any number (integer or float).
• The increment and decrement functions should only modify the counter by 1.
• The reset function must set the counter back to the initial value provided to the hook.
• The setCount function must accept a number as an argument and set the counter to that value.

Notes

• Consider using ref from Vue to create the reactive counter variable.
• Think about how to properly expose the functions from the hook so they can be used in a component.
• Ensure that the hook is reusable and can be used with different initial values.
• Pay attention to TypeScript types to ensure type safety.
• This is a good opportunity to practice using the Composition API and TypeScript together.