使用 Svelte 和 TypeScript 向 HTMLElements 添加类型

如何解决使用 Svelte 和 TypeScript 向 HTMLElements 添加类型

我正在使用 svelte 和 typescript，我想向我引用的 html 元素添加类型定义。

例如我有这样的东西：

<script>
let closeButtonEl;
let prevFocused;

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

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

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

解决方法

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

,

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

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

,

只是为了完成答案

就像 Scot 和 Stephane 之前所说的那样，这些元素的类型可以在 https://developer.mozilla.org/en-US/docs/Web/API#interfaces

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

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

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

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

  let closeButtonEl: HTMLButtonElement;
  let prevFocusedEl: HTMLElement;

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