如何在 TypeScript 中使用自定义 svelte 元素？

Question

我想使用 svelte:element 作为标签并设置“for”属性。然后我收到一条 ts 错误消息，“HTMLAttributes”类型中不存在“for” 如何正确输入 svelte:element？

错误

 Object literal may only specify known properties, 
 and '"for"' does not exist in type 'HTMLAttributes<any>'.

动态纤细元素，作为标签

<svelte:element
    this="label"
    for="labelOfInput"
>
   My label
</svelte:element>

Answer 1

抛出错误是因为并非每个 HTML 元素都具有属性

for

。

正如文档所示：

svelte:element

当你事先不知道要渲染什么样的 DOM 元素时使用。

所以，如果这不是你的情况，并且你确定你会使用标签，那么就使用标签，如果不是，那么你应该尽可能通用地处理该元素，或者只使用一个简洁的组件来处理逻辑。

Answer 2

如此问题中所述，要解决此错误，您需要指定传递给

this

属性的变量的类型。

例如：

<script>
  /** @type {'label' | 'div' }*/
  let tag = 'label';
</script>

<svelte:element
    this={tag}
    for="labelOfInput"
>
   My label
</svelte:element>