typescript - typescript 的细长事件参数类型

Question

如此 slim 的新手，但它是如此之小，非常适合我正在从事的工作。
去 typescript 选项: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

对于完整输入，将事件引发器更改为:

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 。