jQuery na JavaScript

Probuje przerobic ten jQuery kod do edytowania pliku *.pdf na JavaScript, ale mam problem z .outerHeight() . Wiem, wiem powinnam zastapic go z offsetHeight, ale moj Typescripf wyrzuca mi bledy.

Typescript

	windowResizeHandler: () => void = () => {
		let body = document.querySelector("body");
		let height = parseInt(window.getComputedStyle(body).height);
		//suppose there is a #header element which takes some area.

		let headHeight = $("#header").outerHeight();
		let rightHeight = height;
		if ($("#header").is(":visible")) {
			rightHeight = height - headHeight;
		}
		$("#right").height(rightHeight);
		WebPDF.updateLayer();

HTML

	<page-container>
		<div id="docViewer" ref="docViewer" style="background: #dddedf;"></div>
	</page-container>

Oczywiscie przypisalam najpierw $("#header"). do zmiennej, ale Typescript nadal wyrzuca mi blad. oto moj kod:

		let right = document.querySelector("#right");
		let headHeight = document.querySelector("#header");
		let hdHeight = headHeight.offsetHeight;
		let rightHeight = height;

		if(headHeight.className == ":visible") {
			rightHeight = height - hdHeight;
		}
			right.height = rightHeight;
			WebPDF.updateLayer();
		}

Jeśli chcesz pobrać offsetHeight headera musisz najpierw mieć header w zmiennej.
Czyli tak jak z body - let headerHeight = document.querySelector("header").offsetHeight

Typescript mocno pilnuje typów. Spróbuj w ten sposób pobrać height:

let headHeight = document.querySelector< HTMLElement>("#header");
let hdHeight = headHeight.offsetHeight;

edit:
Ogólnie jak zaczynasz zabawę z typescript, to warto przy zmiennych deklarować ich typ, będzie Ci łatwiej.
Np:

let headHeight: HTMLElement = document.querySelector< HTMLElement>("#header");
let hdHeight: number = headHeight.offsetHeight;

Wtedy wiesz jaka zmienna za co odpowiada i prędzej unikniesz takich błędów

To coś:

headHeight.className == ":visible"

Nie ma raczej prawa działać, no chyba że, rzeczywiście element "#header" ma klasę :visible, ale to jest niezgodne ze specyfikacją (klasa nie może zaczynać się od :).

W praktyce raczej (patrząc na twoje jQuery) chcesz sprawdzić, czy ten element ma display: none, możesz to zrobić tak headHeight.offsetParent === null, o ile headHeight nie jest fixed.

Ogólnie cały kod powinien raczej wyglądać jakoś tak:

windowResizeHandler: () => {
    const bodyHeight = document.body.scrollHeight;
    const header = document.getElementById('header');
    const headerHeight = header.getBoundingClientRect().height;

     let rightHeight = headerHeight;
     if (header.offsetParent === null) {
        rightHeight = bodyHeight - headerHeight;
     }
     document.getElementById('right').style.height = `${rightHeight}px`;
     WebPDF.updateLayer();
}

A do czego ta dziwna konstrukcja?

() => void = () =>

Udal sie z podpowiedzia @TomRiddle! @Kondziowsky dziekuje serdecznie za czas i chec pomocy. Jestem wdzieczna za pomoc. Pozdrawiam