Typescript + Svelte - 如何添加类型来传播组件道具

Question

是否可以确保由其他组件组成的组件的类型安全？

例如。如果我想构建一种具有某些验证的特殊输入，等等，这应该扩展我的基本输入。

BaseInput.svelte

<script lang="ts">
  export let value = '';
  // + a lot more props
</script>

<input bind:value ... />

AgeInput.svelte - 这扩展了 BaseInput

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

  export let {...inputProps}: /* Can we spread and infer BaseInput props? */;
</script>

<BaseInput {...inputProps} type="number" />

我们可以推断BaseInput道具吗？

Answer 1

Svelte 构建输入类型数字的方式与类型类型文本的方式不同。

对于我来说，我构建了两种类型的输入来进行导入。

对于inputText.svelte：

<script lang="ts">
  export enum TextType { text = "text", email = "email", password = "password" }

  export let id: string;
  export let type: TextType;
  export let label: string | null = null;
  export let placeholder: string | null = null;
  export let value: string | null = null;

  function typeAction(node: HTMLInputElement) {
    node.type = type
  }

</script>

<div class="textInput">
    <label class="textLabel" for={id}>{label}</label>
  <input on:input bind:value id={id} type="text" placeholder={ placeholder } use:typeAction />
</div>

这个功能：

 function typeAction(node: HTMLInputElement) {
    node.type = type

传递输入类型非常重要：

  export enum TextType { text = "text", email = "email", password = "password" }

这是我的inputNumber.svelte的一个示例：

<script lang="ts">
    export let id: string;
    export let label: string | null = null;
    export let placeholder: string | null = null;
    export let value: number | null = null;
    export let min: number | null = null;
    export let max: number | null = null;
</script>
  
<div class="numberInput">
  <label class="numberLabel" for={id}>{label}</label>
  <input on:change bind:value id={id} type="number" placeholder={placeholder} min = {min} max = {max} {...$$restProps}/>
</div>

我照常导入后。