Vue组合式函数useCalculator加法返回字符串而非数值问题

问题原因 #

你得到"1011"的核心原因是函数内部执行了字符串拼接而非数值加法。尽管你定义了入参的TypeScript类型，但如果实现逻辑有误（比如误将加法写成字符串拼接），或者在非严格类型检查环境下参数被隐式转换为字符串，就会出现这种结果。

修复步骤 #

1. 修正运算逻辑 #

检查useCalculator的内部实现，确保加法分支执行的是数值相加而非字符串拼接：

// 正确的加法逻辑示例
export function useCalculator(num1: number, num2: number, operation: string): number | string {
  switch (operation) {
    case 'add':
      return num1 + num2; // 此处为数值加法，返回21而非"1011"
    case 'subtract':
      return num1 - num2;
    case 'multiply':
      return num1 * num2;
    case 'divide':
      return num2 !== 0 ? num1 / num2 : '除数不能为0';
    default:
      return '不支持的操作类型';
  }
}

2. 增加参数类型校验（可选但推荐） #

如果你的代码运行在JavaScript环境，或TypeScript未开启严格模式，建议在函数内部增加类型校验，避免隐式类型转换导致的错误：

export function useCalculator(num1: number, num2: number, operation: string): number | string {
  // 校验参数是否为有效数字
  if (typeof num1 !== 'number' || isNaN(num1) || typeof num2 !== 'number' || isNaN(num2)) {
    return '请传入有效的数字参数';
  }
  
  switch (operation) {
    case 'add':
      return num1 + num2;
    // 其他运算分支...
    default:
      return '不支持的操作类型';
  }
}

3. 明确返回值类型 #

在TypeScript中，建议明确标注函数的返回值类型，避免意外返回字符串类型：

// 明确返回值为数字或错误信息字符串
export function useCalculator(num1: number, num2: number, operation: string): number | string {
  // ...逻辑实现
}

内容的提问来源于stack exchange，提问作者psudo