如何创建自定义输入 svelte 组件并重用 prop 类型？

Question

我正在尝试创建带有标签的输入组件的包装版本，我希望它具有与普通输入字段以及“标签”相同的属性。

我对如何导入类型定义和正确键入属性有点困惑。

<style>
    input {
        width: 100%;
        display: block;
    }
</style>

<script lang="typescript">
    import { SvelteInputProps } from 'svelte'
    export let label: string = '' 
    type $$Props = SvelteInputProps;
</script>

<label>
    {label}
    <input {...$$props} />
</label>

像这样反应：

interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
    label: string
}

export default function Input (props: Props) {
    const { label, ...inputProps } = props;
    return (
        <label>
            {label}
            <input {...inputProps}></input>
        </label>
    )
}

Answer 1

1. 我建议$$props改为$$restProps. $$restProps包括所有未明确编辑的道具export，这意味着label排除该道具，这可能就是您想要的。
2. 我建议更改lang="typescript"为lang="ts"，从长远来看，这将成为表明脚本代码是 TypeScript 的唯一有效方式。
3. 要表达“从所有有效的输入属性扩展”，请编写您现在需要自己定义的内容interface $$Props extends .. { label: string }。您可以将HTMLAttributes 定义..的内容作为开始（忽略它扩展自的接口）并删除所有对输入无效的属性，或者接受这包含的属性过多。

<style>
    input {
        width: 100%;
        display: block;
    }
</style>

<script lang="ts">
    import type { SvelteInputProps } from './filepath-to-your-typings'
    export let label: string = '' 
    interface $$Props extends SvelteInputProps {
        label: string;
    }
</script>

<label>
    {label}
    <input {...$$restProps} />
</label>