Ошибка Vue Watch TypeScript TS2769: этому вызову не соответствует ни одна перегрузка

Рассмотрим следующий код:

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, options ?: 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

Как правильно это решить?


typescript javascript vue.js vue-component vue-composition-api
person DarkLite1    schedule 07.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот определение 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))
person Józef Podlecki    schedule 07.05.2020
comment
Хм ... Если я использую ваше предложение, TS жалуется, что не может найти $q, и когда я помещаю его в кавычки в виде строки, нет ошибки TS, но обратный вызов часов не запускается - person DarkLite1; 07.05.2020
comment
Исправлена ​​эта часть с помощью import { Screen } from 'quasar', как описано в документации Quasar, а затем использовать ее как watch(() => Screen.width, (width) => setMiniState(true, +width)) - person DarkLite1; 07.05.2020