我試圖讓用戶選擇將某些東西的視口定義為 html 元素，如果不回退到視窗。但是，如果它不是視窗，我需要獲取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'.
我將如何用打字稿輸入這個？
uj5u.com熱心網友回復：
你可以告訴 TS 你的 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;
}
您還可以創建和使用型別保護：
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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/449556.html
標籤：javascript 打字稿 打字稿打字
下一篇：無法推送到UnionType陣列