У меня есть компонент с реквизитом, который представляет собой асинхронную функцию, которая должна выполняться компонентом Svelte.
нравится это
// MyComponent.svelte
<script lang = "ts">
export let icon: () => Promise<any>;
</script>
// do some stuff with icon...
И я хотел бы ввести этот параметр вместо использования любого.
Я пробовал со следующим:
<script lang = "ts">
import type { ComponentType } from 'svelte';
export let icon: () => Promise<Component>;
</script>
Но при вызове так:
<MyComponent icon = {() => import('./Logo.svelte')}>
Я получаю следующую ошибку:
Error: Type 'Promise<typeof import("./Logo.svelte")>' is not assignable to type 'Promise<ComponentType<SvelteComponentTyped<any, any, any>>>'.
Type 'typeof import("./Logo.svelte")' is not assignable to type 'ComponentType<SvelteComponentTyped<any, any, any>>'.
Type 'typeof import("./Logo.svelte")' provides no match for the signature 'new (options: ComponentConstructorOptions<any>): SvelteComponentTyped<any, any, any>'. (ts)
Также пробовал с export let icon: () => Promise<typeof SvelteComponent>;
, как указано здесь, и я обнаружил эту ошибку:
Error: Type 'Promise<typeof import("./Logo.svelte")>' is not assignable to type 'Promise<typeof SvelteComponentDev>'.
Property 'prototype' is missing in type 'typeof import("./Logo.svelte")' but required in type 'typeof SvelteComponentDev'. (ts)
Есть идеи, как этого добиться?
Примечание: я следил за этой статьей: https://www.viget.com/articles/typing-components-in-svelte/
() => Promise<ComponentType>
правильно, если учесть тот факт, что динамический импорт возвращает модуль.
Либо измените использование на:
import('./Logo.svelte').then(m => m.default)
Или измените тип на () => Promise<{ default: ComponentType }>
и извлеките экспорт по умолчанию внутри компонента.