Vue 3多源watch搭配TypeScript出现类型报错该如何解决？

报错根因 #

你传入watch的监听源数组同时包含布尔类型的pressed和数字类型的x/y，TypeScript 默认会将该数组的元素类型推导为 (boolean | number)[] 联合类型，因此解构出来的newX/newY/prevX/prevY都会被识别为boolean | number类型，和数值运算、getActiveConstellation入参要求的number类型不匹配，才触发了上述报错。

可行解决方案 #

方案1：给watch显式声明泛型（最推荐，类型安全无冗余） #

直接通过Vue的watch泛型指定每个监听源对应位置的类型，TypeScript就会准确识别每个解构变量的类型：

// 泛型顺序和监听数组的元素顺序一一对应：第一个是pressed的类型boolean，第二第三个是x和y的类型number
watch<[boolean, number, number], [boolean, number, number]>(
  [pressed, x, y], 
  ([newPressed, newX, newY], [prevPressed, prevX, prevY]) => {
  // 内部代码无需改动，TS已经能正确识别newX/newY等都是number类型
  if (showConstellations.value) {
    if (!newPressed && newX !== prevX) {
      activeConstellation.value = getActiveConstellation(newX, newY)
    }
  }

  dragging.value = pressed.value

  if (newPressed && newX !== prevX) {
    azimuthalOffset.value -= (newX - prevX) / 6
  }
})

方案2：使用类型断言（适合快速临时修复） #

如果不想改动watch的声明，也可以在使用变量的位置显式断言为number类型：

// 对应报错行修改示例
activeConstellation.value = getActiveConstellation(newX as number, newY as number)
azimuthalOffset.value -= ((newX as number) - (prevX as number)) / 6

内容的提问来源于stack exchange，提问作者Micheal J. Roberts