Typescript + Svelte - วิธีเพิ่มประเภทให้กับ props ของคอมโพเนนต์ที่กระจาย

เป็นไปได้ไหมที่จะรับประกันความปลอดภัยของชนิดข้อมูลกับคอมโพเนนต์ที่ประกอบขึ้นจากคอมโพเนนต์อื่น ๆ?

เช่น ถ้าฉันต้องการสร้างอินพุตชนิดพิเศษที่มีการตรวจสอบเฉพาะบางอย่าง ฯลฯ ซึ่งควร ขยาย อินพุตฐานของฉัน

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 ได้ไหม?

คำตอบ #1

Svelte สร้าง input ประเภท number แตกต่างจากประเภท text.

สำหรับฝั่งของฉัน ฉันสร้างอินพุตสองประเภทเพื่อนำเข้า

สำหรับ 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>

หลังจากที่ฉันนำเข้ามาตามปกติ

คำตอบ #2

คุณสามารถใช้ตัวแปร $$props ของ svelte ได้

แอพ.svelte

<script>
    import AgeInput from './AgeInput.svelte'
</script>

<AgeInput 
    bi_p1="base input prop 1" 
    bi_p2="base input prop 2" 
    ai_p1="age input prop 1" 
    ai_p2="age input prop 2" 
/>

baseinput.svelte

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

<input />
<pre>
    base input properties
    bi_p1: {bi_p1}
    bi_p2: {bi_p2}
</pre>

ageinput.svelte

<script lang="ts">
  import BaseInput from './BaseInput.svelte';
    
    const {bi_p1, bi_p2, ai_p1, ai_p2, ...restProps} = $$props
</script>

<BaseInput {bi_p1} {bi_p2} type="number" />
<pre>
    age input props
    ai_p1: {ai_p1}
    ai_p2: {ai_p2}
</pre>

นี่คือลิงก์ REPL https://svelte.dev/repl/a22f404887164fc4a5a6d54dfdff1380?version=3.17.2