typescript - 作为对象属性的 Svelte 组件

Question

我想接受一个组件作为 Prop 。

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

请注意，对于 VS Code 版本 105 或更高版本，您需要 Svelte 并且(如果您使用它) svelte-check 2.0.0 或更高版本才能工作。之前的类型略有不匹配。
如果要使用 TypeScript 文件中的代码，则需要激活 Svelte for VS Code 扩展的 TypeScript 插件。否则，所有 Svelte 导入都被输入为泛型 SvelteComponentDev没有正确的类型。