reactjs Svelte -使用typescript扩展标准html元素

icomxhvb  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(99)

我想定义我的自定义组件,并指定哪种“标准组件”,我会扩展。
这将为扩展组件的所有标准属性使用VSCode智能感知,而无需重新定义所有属性。
这就是我要做的:

<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>

为了更好地解释我想做什么,我在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>
  );
}
czfnxgou

czfnxgou1#

使用svelte/elements提供一个interface $$Props,它扩展了您要键入的特定HTML元素。
Button.svelte

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

    interface $$Props extends HTMLButtonAttributes {
      myCustomProp: string
    }

    export let myCustomProp: string
</script>

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

+page.svelte

<script lang="ts">
  import Button from './Button.svelte'

  let disabled = false
</script>

<Button myCustomProp='foo' {disabled}>Click Me</Button>

相关问题