DOM typing • xkeshav.com

DOM typings

we will explore and set type for DOM method; such as document.querySelector() and document.querySelectorAll()

❌ below is not working

const radioInputList = document.querySelectorAll<RadioNodeList>("input[type=radio]");
radioInputList.forEach((r) => (r.checked = r.defaultValue === "X"));

✅ but this works

const radioInputList = document.querySelectorAll<HTMLInputElement>("input[type=radio]");
radioInputList.forEach((r) => (r.checked = r.defaultValue === "X"));

❌ but this will not work; adding typing ahead to variable

const radioInput: HTMLInputElement = document.querySelectorAll("input[type=radio]");

✅ this works ( with as)

const radioInputList = document.querySelectorAll("input[type=radio]") as NodeListOf<HTMLInputElement>;
radioInputList.forEach((r) => (r.checked = r.defaultValue === "X"));

❌ but this will not work ( type )

const radioInputList = document.querySelectorAll < NodeListOf<HTMLInputElement>("input[type=radio]");
radioInputList.forEach((r) => (r.checked = r.defaultValue === "X"));

❌ neither this works (assign)

const radioInputList: NodeListOf<HTMLInputElement> = document.querySelectorAll("input[type=radio]");

❎ below syntax are not working

const radioInputList: HTMLInputElement = document.querySelectorAll("input[type=radio]");
const radioInputList: Element = document.querySelectorAll("input[type=radio]");
const radioInputList: HTMLInputElement[] = document.querySelectorAll("input[type=radio]");
const radioInputList: Element[] = document.querySelectorAll("input[type=radio]");

✅ and here is separate type for both DOM method as per my approach

const video = document.querySelector<HTMLVideoElement>("video"); // HTMLVideoElement | null
const audios = document.querySelectorAll("audio") as NodeListOf<HTMLAudioElement>;

Hope it helps.