Почему TypeScript не допускает методы DOM элементов для Vue Ref'ов?

Question

[dicem]

Ошибка собственно в методе Vue компонента:

methods: {
...
  dropdownTrigger (e: Event | undefined) {
      if (e) {
        e?.stopPropagation()

        this.$refs.list.scrollTo(0, 0)
        this.isListVisible = !this.isListVisible
        if (!this.isListVisible) this.$refs.input.blur()
        this.selected = this.value
          ? [...this.value]
          : []
      }
  },
...
}

Ошибка указывающая на this.$refs.list.scrollTo(0, 0):

Property 'scrollTo' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'scrollTo' does not exist on type 'Vue'.ts(2339)

Использую дефолтный Nuxt + TypeScript, в @types есть 2 файла:

vue-shim.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

tsx-shim.d.ts

import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [element: string]: any;
    }
  }
}

Comments

[WbICHA]

e?.stopPropagation()

Какой смысл в этой проверке?

[dicem]

WbICHA, TSLint приказал, но суть вопроса все равно не в этом

[WbICHA]

dicem, что за ересь? У тебя идёт проверка "е" прямо перед чейнингом.

[dicem]

WbICHA, мужик, что нибудь по вопросу есть подсказать?

[Mikhail Osher]

Вдобавок к обоим ответам, почитайте вот это: https://stackoverflow.com/questions/46505813/vuejs...

Answer 1

[Алексей Ярков]

Property 'scrollTo' does not exist on type 'Vue | Element | Vue[] | Element[]'

Ну так всё же написано )) Тип рефа Vue | Element | Vue[] | Element[]
Если точно знаете что это за элемент, то попробуйте так:
(this.$refs.list as HTMLDivElement).scrollTo(0, 0)

Comments

[dicem]

Отличное решение, я также нашел решение, через создание интерфейсов для рефов

import Vue, { VueConstructor, VNode} from 'vue'

interface Refs {
  $refs: {
    list: HTMLElement,
    input: HTMLInputElement,
  }
}

export default (Vue as VueConstructor<Vue & Refs>).extend({
  ...
  methods: {
    dropdownTrigger (e: Event | undefined) {
      this.$refs.list.scrollTo(0, 0) // наконец то отлично отрабатывает
    }
  }
  ...
})

[Алексей Ярков]

dicem, это даже лучше

Answer 2

[dicem]

Также отличное решение в дополнение к ответу Алексей Ярков

import Vue, { VueConstructor, VNode} from 'vue'

interface Refs {
  $refs: {
    list: HTMLElement,
    input: HTMLInputElement,
  }
}

export default (Vue as VueConstructor<Vue & Refs>).extend({
  ...
  methods: {
    dropdownTrigger (e: Event | undefined) {
      this.$refs.list.scrollTo(0, 0) // наконец то отлично отрабатывает
    }
  }
  ...
})