Estoy tratando de tener una opción para que un usuario defina la ventana gráfica de algo como un elemento html y, si no, vuelva a la ventana. Pero luego necesito obtener el getBoundingClientRect() del elemento si no es la ventana. Así que estoy haciendo esto ahora mismo. Estoy escribiendo la variable para que sea HTMLElement | Window pero luego cuando lo hago:
if (opts.viewport === window) { viewportHeight = window.innerHeight viewportWidth = window.innerWidth } else { const viewportRect = opts.viewport.getBoundingClientRect() viewportHeight = viewportRect.height viewportWidth = viewportRect.width }Me sale el siguiente error obviamente:
Property 'getBoundingClientRect' does not exist on type 'Window | HTMLElement'. Property 'getBoundingClientRect' does not exist on type 'Window'.¿Cómo haría para escribir esto con mecanografiado?
Puede decirle a TS cuál es el tipo en su bloque else:
if (opts.viewport === window) { viewportHeight = window.innerHeight; viewportWidth = window.innerWidth; } else { const viewportRect = (opts.viewport as HTMLElement).getBoundingClientRect(); viewportHeight = viewportRect.height; viewportWidth = viewportRect.width; }También puede crear y usar una protección de tipos:
const isHTMLElement = (target: Window | HTMLElement): target is HTMLElement => (target as HTMLElement).getBoundingClientRect() !== undefined; if (isHTMLElement(opts.viewport)) { const viewportRect = opts.viewport.getBoundingClientRect(); viewportHeight = viewportRect.height; viewportWidth = viewportRect.width; } else { viewportHeight = window.innerHeight; viewportWidth = window.innerWidth; }