AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 79207136
Accepted
Kevin Renskers
Kevin Renskers
Asked: 2024-11-20 20:07:29 +0800 CST2024-11-20 20:07:29 +0800 CST 2024-11-20 20:07:29 +0800 CST

Carregamento dinâmico de componentes Svelte 5: erros de TypeScript

  • 772

No meu aplicativo Svelte 4, carrego dinamicamente componentes, todos com props diferentes. Reprodução muito simples (também disponível no 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}

Isso funciona bem sem nenhum aviso ou erro, sem reclamações até agora. No entanto, quero migrar para o Svelte 5 e agora estou recebendo um monte de erros do TypeScript. Por exemplo, ComponentTypeestá obsoleto, e coisas assim:

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

Como posso refatorar meu código para que ele continue funcionando, sem erros de TypeScript e sem ter que tipar fortemente cada componente? No meu aplicativo do mundo real, há muitos componentes envolvidos, cada um com um monte de props diferentes. Não quero ter que criar aliases de tipo para cada um deles.

A simples alteração ComponentTypepara Componentelimina o aviso de descontinuação, mas o outro aviso ainda é basicamente o mesmo:

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)

Mudar ComponentTypepara SvelteComponenttambém não melhora as coisas. Quando uso o unknowntipo, recebo este aviso:

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

Pelo menos é apenas um aviso em vez de vários no array, então é melhor, mas isso não pode ser resolvido de uma maneira melhor (sem digitar cada componente)?

svelte
  • 1 1 respostas
  • 31 Views

1 respostas

  • Voted
  1. Best Answer
    brunnerh
    2024-11-20T22:48:40+08:002024-11-20T22:48:40+08:00

    unknownsignifica que você tem que afirmar um tipo primeiro para usá-lo de forma significativa. Se você quiser ser menos rigoroso, você deve any:

    type Item = {
      component: Component<any>;
      [key: string]: any; // for props
    };
    
    const items: Item[] = [
      { component: One, one: "World" },
      { component: Two, two: "Svelte" },
    ];
    

    (Deve haver maneiras de alinhar os adereços com o tipo de componente fornecido usando genéricos, mas isso é um pouco mais complicado.)

    No Svelte 5 você também não deve usar <svelte:component>, você pode usar o componente diretamente:

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

    (Nome em minúsculas só é permitido por meio da .notação.)

    • 1

relate perguntas

  • Svetekit: Como posso alterar o caminho da ação do formulário?

  • Aplicar transições diferentes em telas menores

  • Como posso enviar um formulário de várias páginas no SvelteKit com ações de formulário?

  • Implemente o Svelte em um único contêiner HTML

  • Ao visualizar um componente svelte no VSCode, como ir para o arquivo pai que importa este componente

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

    • 1 respostas
  • Marko Smith

    Por que esse código Java simples e pequeno roda 30x mais rápido em todas as JVMs Graal, mas não em nenhuma JVM Oracle?

    • 1 respostas
  • Marko Smith

    Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

    • 1 respostas
  • Marko Smith

    Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

    • 6 respostas
  • Marko Smith

    `(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

    • 3 respostas
  • Marko Smith

    Quando devo usar um std::inplace_vector em vez de um std::vector?

    • 3 respostas
  • Marko Smith

    Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

    • 1 respostas
  • Marko Smith

    PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

    • 2 respostas
  • Marko Smith

    AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

    • 1 respostas
  • Marko Smith

    Estou tentando fazer o jogo pacman usando apenas o módulo Turtle Random e Math

    • 1 respostas
  • Martin Hope
    Aleksandr Dubinsky Por que a correspondência de padrões com o switch no InetAddress falha com 'não cobre todos os valores de entrada possíveis'? 2024-12-23 06:56:21 +0800 CST
  • Martin Hope
    Phillip Borge Por que esse código Java simples e pequeno roda 30x mais rápido em todas as JVMs Graal, mas não em nenhuma JVM Oracle? 2024-12-12 20:46:46 +0800 CST
  • Martin Hope
    Oodini Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores? 2024-12-12 06:27:11 +0800 CST
  • Martin Hope
    sleeptightAnsiC `(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso? 2024-11-09 07:18:53 +0800 CST
  • Martin Hope
    The Mad Gamer Quando devo usar um std::inplace_vector em vez de um std::vector? 2024-10-29 23:01:00 +0800 CST
  • Martin Hope
    Chad Feller O ponto e vírgula agora é opcional em condicionais bash com [[ .. ]] na versão 5.2? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench Por que um traço duplo (--) faz com que esta cláusula MariaDB seja avaliada como verdadeira? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng Por que `dict(id=1, **{'id': 2})` às vezes gera `KeyError: 'id'` em vez de um TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos 2024-03-20 03:12:31 +0800 CST
  • Martin Hope
    MarkB Por que o GCC gera código que executa condicionalmente uma implementação SIMD? 2024-02-17 06:17:14 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve