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);