如何为作为label的svelte:element正确添加TypeScript类型？

方法1：使用标准的htmlFor属性 #

在JS/TS中，for是保留关键字，所以DOM元素的label关联属性在类型定义里对应htmlFor，Svelte会自动将其转换为HTML的for属性，这样不会触发类型错误：

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

方法2：通过类型断言强制允许for属性 #

如果你坚持要使用for作为属性名，可以用类型断言告诉TypeScript该属性是合法的：

<svelte:element
    this="label"
    { ...{ 'for': 'labelOfInput' } as { for: string } }
>
   My label
</svelte:element>

或者更简洁的写法：

<svelte:element
    this="label"
    { 'for': 'labelOfInput' as any }
>
   My label
</svelte:element>

错误原因说明 #

TypeScript中for是保留字，所以label元素的for属性在类型定义里被映射为htmlFor，而svelte:element默认的HTMLAttributes<any>只包含通用DOM属性，没有包含label的特有属性定义，因此直接写for会触发类型检查错误。

内容的提问来源于stack exchange，提问作者vuvu