Vue composable returns string-CodePudding

I have the following vue composable method:

import {
  ref
} from 'vue';

const useCalculator = (num1: number, num2: number, operation: string) => {
  const result = ref(0);

  switch (operation) {
    case 'add':
      result.value = num1   num2;
      break;
    case 'sub':
      result.value = num1 - num2;
      break;
    case 'mul':
      result.value = num1 * num2;
      break;
    case 'divide':
      result.value = num1 / num2;
      break;
    default:
      result.value = 0;
  }

  return result;
}

When I pass the following params to the function useCalculator(10,11,"add"). I get the following result: "1011"

Although I've defined the data type for incoming params. The method is returning value by containing them as string

CodePudding user response：

First, do not declare result as a const if you are going to modify its value later, instead declare it as var.

And second, instead of require the type of de variables in the function props. Just convert your inputs to numbers. Example:

var result = ref(0);
      const useCalculator = (num1, num2, operation) => {
      //Here you convert the inputs in floats numbers
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        //Here you can also use parseInt() if you just want to have integer numbers

        switch (operation) {
          case "add":
            result.value = num1   num2;
            break;
          case "sub":
            result.value = num1 - num2;
            break;
          case "mul":
            result.value = num1 * num2;
            break;
          case "divide":
            result.value = num1 / num2;
            break;
          default:
            result.value = 0;
        }
        return result;
      };

CodePudding user response：

I did not see any issue in your code, As you are passing the params as a number it should concatenate properly and result should be 21. Also, As you define the param types in the function definition. It will throw an error during compile time itself if you will pass the num1 and num2 as a string instead of number.

Working Demo :

const { ref, onMounted } = Vue;

let options = {
  setup: function () {
    const useCalculator = (num1, num2, operation) => {
      const result = ref(0);
      switch (operation) {
        case 'add':
          result.value = num1   num2;
          break;
        case 'sub':
          result.value = num1 - num2;
          break;
        case 'mul':
          result.value = num1 * num2;
          break;
        case 'divide':
          result.value = num1 / num2;
          break;
        default:
          result.value = 0;
      }
      return result.value;
    }

    onMounted(function () {
      console.log(useCalculator(10, 11, 'add'))
    });
  }
};

let app = Vue
.createApp(options)
.mount('#app');

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

<div id="app">
</div>