DEV Community

Cover image for Extending a HTML Element in a Svelte Component using TypeScript
Henrique Ramos
Henrique Ramos

Posted on • Edited on

2

Extending a HTML Element in a Svelte Component using TypeScript

When using Svelte with TypeScript, all properties of a component should be typed. Props are declared by exporting a let. However, when creating a superset of an HTML element, one wouldn't want to extensively declare all props. Here's a solution for this:

<script lang="ts">
  import type { HTMLInputAttributes } from 'svelte/elements';

  interface $$Props extends HTMLInputAttributes {
    prop: string;
  }

  export let prop: string;
  // ...
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay