1

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

例如我有这样的事情：

<script>
let closeButtonEl;
let prevFocused;

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

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

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

4

3 回答 3

1

You can type the elements with one of the interfaces found here: https://developer.mozilla.org/en-US/docs/Web/API#interfaces

于 2021-06-15T11:24:56.350 回答
1

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

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

于 2021-06-16T14:48:44.190 回答
1

只是为了完成答案

正如 Scot 和 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();
  }
于 2021-06-16T17:45:38.810 回答