向使用Svelte和TypeScript的HTMLElements添加类型

Question

我正在使用Svelte和typescript，我想将类型定义添加到我引用的html元素中。

例如，我有这样的东西：

<script>
let closeButtonEl;
let prevFocused;
[...]
prevFocused = document.activeElement;
[...]
</script>
[...]
<button bind:this={closeButtonEl}>Click me</button>

也就是说，我有一个closeButtonEl，我知道它肯定是一个按钮，还有一个prevFocused，它是一个带有focus()方法的HTMLElement。

我应该为它们中的每一个使用哪种类型？这种事情记录在哪里？

Answer 1

您可以使用以下接口之一键入元素：https://developer.mozilla.org/en-US/docs/Web/API#interfaces

Answer 2

正如Stephane所提到的，您可以在https://developer.mozilla.org/en-US/docs/Web/API#interfaces.实际类型信息来自lib.dom.d.ts，它是由Microsoft Edge生成的webidl文件生成的。

对于各种元素类型，您需要查看以"开头的接口；HTML"；。在这种特定情况下，您关心HTMLElement和HTMLButtonElement。

Answer 3

只需完成答案

正如斯科特和Stephane之前所说，这些元素的类型可以在https://developer.mozilla.org/en-US/docs/Web/API#interfaces

对于这种特殊情况，我找到了以下两种解决方案：

let closeButtonEl: HTMLButtonElement;
let prevFocusedEl: Element & { focus?: () => void };

document.activeElement是Element类型的，在这种情况下，我还定义它有一个焦点方法。

另一种解决方案是将document.activeElement转换为一个带有focus((方法的HTMLElement，如下所示：

let closeButtonEl: HTMLButtonElement;
let prevFocusedEl: HTMLElement;
$: if (isOpen) {
prevFocusedEl = <HTMLElement> document.activeElement;
closeButtonEl && closeButtonEl.focus();
}