如何在Svelte中为组件传递带泛型的Props？

云原生阿岚

2026-7-14

解决Svelte自定义Form组件泛型onSubmit的类型错误问题

要让自定义Form组件的onSubmit支持泛型适配不同场景，需在组件中正确声明泛型参数并完善类型定义，以下是具体解决步骤：

正确声明组件泛型
在Svelte组件的<script>标签上添加generics="T"明确泛型参数，同时为T设置默认类型（如unknown），避免未指定泛型时的类型报错。
完善onSubmit的类型约束
将onSubmit的类型指定为SubmitFunction<T>，确保TypeScript能识别泛型参数T。

修改后的组件代码如下：

<script lang="ts" generics="T = unknown">
    import { enhance } from '$app/forms';
    import type { SubmitFunction } from '@sveltejs/kit';

    export let action: string;
    export let onSubmit: SubmitFunction<T>;
</script>

<form method="POST" {action} use:enhance={onSubmit}>
  <slot />
</form>

使用组件时指定泛型（可选）
在父组件中使用自定义Form时，可根据业务场景指定T的具体类型，比如表单提交的数据结构：

<script lang="ts">
    import CustomForm from './CustomForm.svelte';
    import type { SubmitFunction } from '@sveltejs/kit';

    type LoginFormData = {
        username: string;
        password: string;
    };

    const handleLoginSubmit: SubmitFunction<LoginFormData> = async ({ data }) => {
        // data会被自动推断为LoginFormData类型
        console.log('提交的用户名：', data.username);
    };
</script>

<CustomForm action="/api/login" onSubmit={handleLoginSubmit} />

若仍出现Cannot find name 'T'错误，检查以下两点：