چگونه از یک عنصر سفلت سفارشی با تایپاسکریپت استفاده کنیم؟

من میخواهم از svelte:element به عنوان label استفاده کنم و attribute «for» را تنظیم کنم. سپس یک پیام خطای ts دریافت میکنم که میگوید ‘"for"’ در نوع ‘HTMLAttributes’ وجود ندارد. چگونه میتوانم svelte:element را به درستی تایپ کنم؟

خطای ts

 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>

پاسخ شماره ۱

همانطور که در این مسئله ذکر شد، برای رفع این خطا، شما باید نوع متغیری که به ویژگی this میدهید را مشخص کنید.

به عنوان مثال:

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

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

پاسخ شماره ۲

این خطا به این دلیل رخ داد که هر عنصر HTML دارای صفت for نیست.

و همانطور که مستندات نشان میدهند:

از svelte:element زمانی استفاده میشود که از قبل نمیدانید چه نوع عنصر DOM را باید رندر کنید.

پس اگر این مورد برای شما صدق نمیکند و مطمئن هستید که از یک برچسب استفاده خواهید کرد، فقط از یک برچسب استفاده کنید، و اگر نه، باید عنصر را تا حد امکان به صورت عمومی مدیریت کنید یا فقط از یک کامپوننت Svelte برای مدیریت منطق استفاده کنید.