Svelte 组件作为对象属性

Question

我想接受一个组件作为道具。

import AComponent from './AComponent.svelte';

type MyType = {
  [key: string]: any; // just an example
}

type IWantToAcceptAComponent<T> = {
  component: SvelteComponentTyped<{ record: T }>;
}

const componentPropObject: IWantToAcceptAComponent<MyType> = {
  component: AComponent // error here
}

Error: Type 'typeof AComponent__SvelteComponent_' is missing the following properties from type 
'SvelteComponentTyped<{ record: MyType; }>': $set, $on, $destroy, $$prop_def, and 5 
more.ts(2740)

我认为 typedef 应该是：

type IWantToAcceptAComponent<T> = {
  component: typeof SvelteComponentTyped<{ record: T }>;
}

但这会导致更奇怪的错误。

这种类型是显式的，这一点相当重要，因为它应该是用户导出界面的一部分。

Answer 1

您需要调整IWantToAcceptAComponent 的输入。您不能直接使用SvelteComponentTyped，因为这意味着您需要实例类型，而不是构造函数类型。但是你也不能这样做 typeof SvelteComponentType<..some generic> 因为这是 TypeScript 的语法错误。您需要像这样键入“接受返回特定实例的类构造函数”：

type IWantToAcceptAComponent<T> = {
  component: new (...args: any) => SvelteComponentTyped<{ record: T }>;
}

请注意，您需要 Svelte for VS Code 版本 105 或更高版本以及（如果您使用它）svelte-check 2.0.0 或更高版本才能正常工作。之前的类型略有不匹配。

如果你想使用 TypeScript 文件中的代码，你需要激活 Svelte for VS Code 扩展的 TypeScript 插件。否则，所有 Svelte 导入都被键入为通用 SvelteComponentDev，而没有正确的类型。

Answer 2

尽管我不使用打字稿，但我看不出有什么理由可以使用纯 JS 而不是 TS。 我制作了REPL，它基本上包含了作为道具传递的另外两个“子组件”。

结构类似于：

App.svelte

<script>
  //App.svelte
  import A from "./A.svelte";
  import B from "./B.svelte";
  import Wrapper from "./Wrapper.svelte";

  let props = [  { component: A }, { component: B } ];
</script>

<Wrapper {props} />

Wrapper.svelte：

<script>
    //Wrapper.svelte
    export let props = [];
</script>

{#each props as prop}
    <p>
        <svelte:component this={prop.component} />
    </p>
{/each}

A.svelte：

   <!-- A.svelte -->
   <h2>COMP A</h2>

B.svelte：

    <!-- B.svelte -->    
    <h3>COMP B</h3>