Как исправить ошибку TS при получении элемента img через ref vue 3?

Question

[Александра]

Получаю ref элемента img, ts выдает - Volar: Argument of type 'HTMLElement | HTMLImageElement | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.

let observer = ref<null | IntersectionObserver>(null);
const img = ref<HTMLElement | null | HTMLImageElement>(null);

// Тут нет предупреждения
const test = img.value;
console.log(test);

const observe = () => {
  if ('IntersectionObserver' in window) {
    observer.value = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          load();
          unobserve();
        }
      });
    });
// Тут есть предупреждение об ошибке TS
    observer.value.observe(img.value);
  } else {
    load();
  }
};

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[WbICHA]

Как исправить ошибку TS

Научиться читать, что пишет тс. Это помогает решить 99.99% демонстрируемых тсом ошибок.

Answer 1

[Дима Паутов]

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

// Не пишите тут лишних типов. Юзаете картинку, оставьте только тип картинки
const img = ref<HTMLImageElement | null>(null);

if (img.value) {
  observer.value.observe(img.value);
}

Когда вы делаете ref на какой либо DOM элемент или же компонент, это не значит, что он существует в DOM дереве. TS не умеет определять, существует ли html или нет.

P.S. Читайте ошибки, он вам там чёрным по белому пишет, что помимо картинки, может быть тип null, который у вас указан. А методу observe необходим существующий DOM элемент.

Comments

[Aetae]

Александра, стоит заметить, что явно использовать null необязательно, можно просто писать const img = ref<HTMLImageElement>(); - значение получит тип HTMLImageElement | undefined, что для любых практических целей ничем не отличен от HTMLImageElement | null, а писанины меньше. :)

[Дима Паутов]

Aetae, мне так человечески проще, т.к. я сразу знаю, что там будет лежать. А так да!