向使用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

正如斯蒂芬提到的，你可以在https://developer.mozilla.org/en-US/docs/Web/API#interfaces上找到web界面的列表。实际的类型信息来自generated from the webidl files produced by Microsoft Edge的lib.dom.d.ts。

对于各种元素类型，您需要查看以"HTML“开头的界面。在这个特定的例子中，您关心的是HTMLElement和HTMLButtonElement。

Answer 3

只是为了完整的回答

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

对于这个特殊的案例，我找到了这两个解决方案：

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

焦点是Element类型，在本例中，我还定义了它有一个document.activeElement方法。

另一种解决方案是将document.activeElement转换为HTMLElement ()方法附带的焦点，如下所示：

  let closeButtonEl: HTMLButtonElement;
  let prevFocusedEl: HTMLElement;

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