变量上 getBoundingClientRect 的 Typescript 类型可以是 window 或 htmlElement

Question

我正在尝试为用户提供一个选项，以将某物的视口定义为 html 元素，如果不回退到 window。但是如果它不是 window，我需要获取元素的 getBoundingClientRect()。所以我现在正在这样做。我输入的变量是 HTMLElement | Window 但是当我输入时：

if (opts.viewport === window) {
  viewportHeight = window.innerHeight
  viewportWidth = window.innerWidth
} else {
  const viewportRect = opts.viewport.getBoundingClientRect()
  viewportHeight = viewportRect.height
  viewportWidth = viewportRect.width
}

我明显得到以下错误：

Property 'getBoundingClientRect' does not exist on type 'Window | HTMLElement'.
  Property 'getBoundingClientRect' does not exist on type 'Window'.

我将如何使用打字稿打字？

Answer 1

你可以在你的 else 块中告诉 TS 类型是什么：



if (opts.viewport === window) {
    viewportHeight = window.innerHeight;
    viewportWidth = window.innerWidth;
} else {
    const viewportRect = (opts.viewport as HTMLElement).getBoundingClientRect();
    viewportHeight = viewportRect.height;
    viewportWidth = viewportRect.width;
}

您还可以创建和使用类型保护：

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

变量上 getBoundingClientRect 的 Typescript 类型可以是 window 或 htmlElement

Typescript type for getBoundingClientRect on a variable that could be window or htmlElement

javascript

typescript

typescript-typings