DEV Community

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

Posted on • Edited on

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)