Ошибка Vue Watch 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 из 3, '(источник: SimpleEffect, параметры?: Pick, "deep" | "flush"> | undefined): StopHandle', выдает следующую ошибку. Аргумент типа "$q.screen.width" не может быть назначен параметру типа SimpleEffect.

Перегрузка 2 из 3, '(источник: WatcherSource, cb: WatcherCallBack, options? Partial | undefined): StopHandle', выдает следующую ошибку. Аргумент типа "$q.screen.width" не может быть назначен параметру типа "WatcherSource".

Перегрузка 3 из 3, '(источники: 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))

В настоящее время я передаю 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

Вот определениеwatch а также WatcherSource

function watch<T>(
  source: WatcherSource<T>,
  callback: (
    value: T,
    oldValue: T,
    onInvalidate: InvalidateCbRegistrator
  ) => void,
  options?: WatchOptions
): StopHandle

type WatcherSource<T> = Ref<T> | (() => T)

В соответствии с этим вы должны передать ref или callback.

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

Answer 2

У меня была эта проблема с Quasar, и оказалось, что VS Code каким-то образом автоматически импортировал неправильный объект «часы» следующим образом:

      import { watch } from 'fs';

вместо

      import { watch } from 'vue';

И именно поэтому он ожидал неправильные параметры типа.

Просто на всякий случай, если у кого-то еще есть такая же проблема.

Ваше здоровье