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 构建输入类型编号与类型文本不同。

就我而言，我为 inport 构建了 2 种类型的输入。

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

像往常一样导入之后。