2

Sou novo no TypeScript e estou com um problema que estou há um tempo tentando resolver.

Estou pegando uma foto aleatória de uma API e tentando inserir ela em um elemento div. Porém, recebo o seguinte erro do compilador:

(parameter) element: HTMLElement | null
Object is possibly 'null'. ts(2531)

Uma das soluções foi desativar a flag --strictNullChecks, mas dizem que não é uma boa prática.

Segue o meu código:

const containerImg: 
HTMLElement | null = document.getElementById("container-img");

const handleWithImgFromApi: () => Promise<string> 
  = async() => {
      const url = "https://i.picsum.photos/id/338/200/300.jpg"
      const response = await fetch(url);
      return response.url;
};

const showImg: (element: HTMLElement | null) => void 
  = async(element: HTMLElement | null) => {
      const img: string = await handleWithImgFromApi();
      const template: string = `<img src=${img} />`

      element.innerHTML = template; //ERRO ACONTECE AQUI
}

showImg(containerImg);

1 Resposta 1

3

Qualquer operação de query no DOM, tal como querySelector pode, de fato, retornar um Element ou null, já que não há como garantir que o elemento estará de fato na página.

Há a opção de desativar a opção --strictNullChecks, o que, como você mesmo disse, não é uma boa prática, já que poderá silenciar outros possíveis erros.

Uma outra forma é garantir, utilizando um if, que o elemento não será null:

const element = document.querySelector('.foo');

if (element) {
  // Element aqui será não nulo.
  console.log(element.textContent);
}

Link para o TypeScript playground.

Você também pode garantir que o código seguinte não será executado caso o tipo for nulo. Isso pode ser feito, por exemplo, utilizando return dentro de uma função:

function getTextContent(selector: string) {
  const element = document.querySelector(selector);

  if (!element) {
    return null;
  }

  // Element aqui será não nulo.
  return element.textContent;
}

Link para o TypeScript playground.

O TypeScript irá inferir o tipo com base no código. Considero esse tipo de construção um tipo de type guard.

Uma outra opção é utilizar o operador de asserção não nula (!). Cuidado para não o confundir com o operador lógico NOT. Utilize-o somente se você tiver certeza que o elemento não será nulo:

const element = document.querySelector('.foo');

element.textContent; // Object is possibly 'null'.

element!.textContent; // OK

Link para o TypeScript playground.

Vale notar que esse operador, assim como a desativação da flag --strictNullChecks, pode silenciar eventuais erros em tempo de compilação — por isso é necessário utilizá-lo com cuidado e atenção. No entanto, esse operador tem a vantagem de não silenciar erros em toda aplicação, apenas em uma única localidade.

1
  • 1
    Muito obrigado pela ajuda! Commented 6/06/2020 às 14:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .