typescript的svelte事件参数类型

对苗条来说是如此的新鲜，但它太小了，非常适合我正在从事的工作

选择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>

从“svelte”导入{createEventDispatcher}
const dispatch=createEventDispatcher（）
设isSubmitting=false
const handleSubmit=（e:HTMLFormElement）=>{
e、 预防默认值（）
isSubmitting=true
常数有效载荷={
用户名：e.target.username.value，
密码：e.target.password.value，
}
分派（“提交”，有效载荷）
}
用户名
密码
登录

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

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

从“./molecles/Login.svelte”导入登录名
const loginHandle=函数（a:任意）{
控制台日志（a）
}
{#如果！已验证}
{/if}

---

现在有一个丑陋的

any

添加到

loginHandle

中，但是当将事件转储到控制台时，它看起来非常苗条。。在哪里可以找到该类型？

Svelte现在附带了CustomEvent接口定义。因此，您可以如下声明您的函数

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

---

对于完整键入，请将事件引发器更改为：

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

const dispatch=createEventDispatcher（）

以及活动消费者：

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
}

const loginHandle=函数（a:CustomEvent）{
console.log（a.detail.username）//用户名是字符串类型
console.log（a.detail.password）//密码类型为string
}

---

这将使分派（“提交”、“错误详细类型”）失败。它消除了处理程序中类型为“any”的a.detail。

我想您可以使用

事件来键入它。

是的-添加了detail和explicitOriginalTarget。详细信息包含开发人员感兴趣的有效负载，我想应该在某个地方有一个SvelteEvent类型。Svelte没有事件的自定义类型，因为它们是一个。它们不像react那样伪造一些事件并具有自定义类型。因此，您应该可以使用

事件

类型。我应该把它写下来作为答案吗？您甚至可以进一步使用CustomEvent键入CustomEvent的详细成员。见下面我的答案。