Estoy creando una aplicación con React y TypeScript... Cuando intento .innerHTML o innerText algo, aparece este error:
El objeto es posiblemente 'nulo'. TS2531
Soy nuevo con TypeScript y no sé qué debo hacer, sé que es algo relacionado con la interfaz ... pero no puedo encontrar una solución específica.
Si alguien puede resolver mi problema con mi código, sería genial.
Gracias por adelantado . Dejo mi código a continuación:
const Home: FC = () => { const percentage = 91; const startingMinutes = 25; let time = startingMinutes * 60; const countdownEl = document.getElementById("countdown"); const updateCountDown = () => { const minutes = Math.floor(time / 60); let seconds = time % 60; countdownEl.innerHTML=`${minutes}: ${seconds}`; time--; }; const changeTimer = () => { var timer = document.getElementById("countdown"); var time = document.getElementById("time"); // timer.innerText=time; };document.getElementById teóricamente puede devolver un valor nulo si no existe ningún elemento con la identificación dada.
TypeScript es lo suficientemente inteligente como para ver que no está realizando ninguna validación antes de usar un objeto nulo potencial, es decir, countdownEl.innerHTML=`${minutes}: ${seconds};` .
Hay 2 formas principales de arreglar esto:
if (countdownEl) {} para asegurarse de que el código respectivo solo se ejecute cuando countdownEl sea verdadero.document.getElementById si "siempre" debe devolver un valor no nulo, es decir, const countdownEl = document.getElementById("countdown") as HTMLElement;Solo necesita asegurarse de que .innerText solo se ejecute cuando el timer no sea nulo, una simple declaración if hará el truco. if(timer){timer.innerText = time }