Question

非常苗条，但是它很小，非常适合我正在从事的工作。

使用了打字稿选项：https://svelte.dev/blog/svelte-and-typescript

如何或在哪里可以找到自定义组件事件的类型：

一种简单的登录组件形式：

<script lang="ts">
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()
  let isSubmitting = false
  const handleSubmit = (e: HTMLFormElement) => {
    e.preventDefault()
    isSubmitting = true
    const payload = {
      username: e.target.username.value,
      password: e.target.password.value,
    }
    dispatch('submit', payload)
  }
</script>

<form on:submit={handleSubmit}>
    <label for="username"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="username" required id="username">

    <label for="password"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="password" required id="password">

    <button type="submit" disabled={isSubmitting}>Login</button>
</form>

包含在另一个组件中以处理提交：

<script lang="ts">
  import Login from './molecules/Login.svelte'
  const loginHandle = function (a: any) {
    console.log(a)
  }
</script>

<main class="{open}">
   {#if !authenticated}
      <Login on:submit={loginHandle}/>
   {/if}
</main>

现在any上添加了一个丑陋的loginHandle，但是在将事件转储到控制台时，它看起来非常苗条。.在哪里可以找到类型？

Answer 1

Svelte 现在附带了一个 CustomEvent 接口定义。所以你可以声明你的函数如下。

const loginHandle = function (a: CustomEvent) {
    console.log(a)
}

Answer 2

要完整输入，请将事件引发器更改为：

const dispatch = createEventDispatcher<{submit:{username:string, password:string}}>()

事件消费者：

const loginHandle = function (a: CustomEvent<{username:string, password:string}>) {
    console.log(a.detail.username) //username is type string
    console.log(a.detail.password) //password is type string
}

这将使 dispatch("submit", "wrongDetailType") 失败。它消除了处理程序中类型为“any”的 a.detail。

打字稿的严重事件参数类型

2 个答案: