Vue 观察 TypeScript 错误 TS2769：没有重载与此调用匹配

Question

考虑以下代码：

export default defineComponent({
  setup() {
    const miniState = ref(true)

    const setMiniState = (state: boolean, screenWidth: number) => {
      if (screenWidth > 1023) {
        miniState.value = false
      } else if (state !== void 0) {
        miniState.value = state === true
      }
      else {
        miniState.value = true
      }
    }

    watch('$q.screen.width', (width) => setMiniState(true, width))

    return { miniState, setMiniState }
  }
})

TypeScript 抛出此错误：

TS2769：没有与此调用匹配的重载。
重载 1 of 3, '(来源: SimpleEffect, options?: Pick, "deep" | "flush"> | undefined): StopHandle'，出现以下错误。类型“$q.screen.width”的参数不可分配给类型“SimpleEffect”的参数。

重载第 2 个（共 3 个）“（来源：WatcherSource，cb：WatcherCallBack，选项？部分 | 未定义）：StopHandle”，出现以下错误。“$q.screen.width”类型的参数不可分配给“WatcherSource”类型的参数。

重载 3 of 3, '(sources: WatcherSource[], cb: (newValues:unknown[], oldValues:unknown[], onCleanup: CleanupRegistrator) => any, options?: Partial | undefined): StopHandle'，给出以下内容错误。“$q.screen.width”类型的参数不可分配给“WatcherSource[]”类型的参数。

这是针对以下代码行：

watch('$q.screen.width', (width) => setMiniState(true, width))

按照目前的情况，我将 a 交给string函数watch而不是WatcherSource<any>。我尝试了以下方法，但都失败了：

watch('$q.screen.width' as WatcherSource, (width) => setMiniState(true, width)) // fails

watch(('$q.screen.width' as WatcherSource ), (width) => setMiniState(true, width)) // fails

解决这个问题的正确方法是什么？

Answer 1

我在使用 Quasar 时遇到了这个问题，结果是 VS Code 以某种方式自动导入了错误的“watch”对象，如下所示：

import { watch } from 'fs';

代替

import { watch } from 'vue';

这就是为什么它期望错误的类型参数。

只是提醒一下，以防其他人遇到同样的问题。

干杯