主页 / coding / 问题 / 79207136
Accepted
Kevin Renskers
Asked: 2024-11-20 20:07:29 +0800 CST

Svelte 5 动态组件加载：TypeScript 错误

  • 772

在我的 Svelte 4 应用中，我动态加载了组件，所有组件都有不同的 props。非常简单的复制（也可在Svelte Playground上使用）：

// App.svelte
<script lang="ts">
  import One from "./One.svelte";
  import Two from "./Two.svelte";

  import type { ComponentType } from "svelte";

  type Item = {
    component: ComponentType;
  };

  const items: Item[] = [
    { component: One, one: "World" },
    { component: Two, two: "Svelte" },
  ];
</script>

<div class="container py-20 text-white">
  {#each items as item}
    <div>
      <svelte:component this={item.component} {...item} />
    </div>
  {/each}
</div>

// One.svelte
<script lang="ts">
    export let one;
</script>

Hello {one}

// Two.svelte
<script lang="ts">
    export let two;
</script>

Goodbye {two}

运行良好，没有任何警告或错误，到目前为止没有任何投诉。但是我想迁移到 Svelte 5，现在我收到一堆 TypeScript 错误。例如ComponentType已弃用，以及类似以下内容：

Type '__sveltets_2_IsomorphicComponent<{ one: any; }, { [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'ComponentType'.
  Type '__sveltets_2_IsomorphicComponent<{ one: any; }, { [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'new (options: ComponentConstructorOptions<Record<string, any>>) => SvelteComponent<Record<string, any>, any, any>'.
    Types of parameters 'options' and 'options' are incompatible.
      Type 'ComponentConstructorOptions<Record<string, any>>' is not assignable to type 'ComponentConstructorOptions<{ one: any; }>'.
        Property 'one' is missing in type 'Record<string, any>' but required in type '{ one: any; }'.

我该如何重构代码，使其继续工作，而不会出现 TypeScript 错误，并且不必对每个组件进行强类型化？在我的实际应用中，涉及许多组件，每个组件都有一大堆不同的 props。我不想为每个组件创建类型别名。

只需更改ComponentType为Component即可消除弃用警告，但其他警告基本仍然相同：

Type '__sveltets_2_IsomorphicComponent<{ one: any; }, { [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'Component<{}, {}, string>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type '{}' is not assignable to type '{ one: any; } & { $$events?: { [evt: string]: CustomEvent<any>; } | undefined; $$slots?: {} | undefined; }'.
      Property 'one' is missing in type '{}' but required in type '{ one: any; }'.ts(2322)

更改ComponentType为SvelteComponent也不会让事情变得更好。当我使用该unknown类型时，我收到此警告：

Argument of type 'unknown' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent | Component<any, any, any> | null | undefined'.

至少那只是一个警告，而不是数组中的一大堆，所以更好，但这真的不能用更好的方法解决吗（无需输入每个组件）？

svelte

1 个回答

  1. Best Answer

    unknown意味着您必须首先断言一种类型才能以有意义的方式使用它，如果您想要不那么严格，您可能会想要any：

    type Item = {
  component: Component<any>;
  [key: string]: any; // for props
};

const items: Item[] = [
  { component: One, one: "World" },
  { component: Two, two: "Svelte" },
];

    （应该有方法使用泛型将 props 与给定的组件类型对齐，但​​这有点复杂。）

    在 Svelte 5 中您也不应该使用<svelte:component>，您可以直接使用组件：

    <item.component {...item} />

    （小写名称仅允许通过.符号表示。）

    • 1

相关问题