Svelte - Extend standard html elements with typescript

Viewed 596

I would like to define my custom component and specify which kind of "standard component" I would to extend.

This to consume VSCode intellisense for all standard attributes of the extended component without re-define all attributes.

This is what I would to do:

<script lang="ts">
    // Error: Cannot redeclare block-scoped variable '$$props'
    export let $$props: svelte.JSX.HTMLAttributes<HTMLButtonElement>;

    // OR

    // Error: Cannot redeclare block-scoped variable '$$restProps'
    export let $$restProps: svelte.JSX.HTMLAttributes<HTMLButtonElement>;

    export let myCustomProp: string;
</script>

<button {...$$restProps}>{myCustomProp}<slot /></button>

To explain better what I would like to do, I post the same case in React with Typescript

import React from 'react';

type Props = {
  myCustomProp: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
export default function ({ myCustomProp, ...rest }: Props) {
  return (
    <button {...rest}>
      {myCustomProp}
      {rest.children}
    </button>
  );
}
0 Answers
Related