Language-tools: [TypeScript] Digitando uma variável contendo um componente como valor

Criado em 26 ago. 2020 · 6Comentários · Fonte: sveltejs/language-tools

Ao usar o TypeScript, parece impossível usar um componente como um tipo.
Por exemplo, não é possível digitar um armazenamento para manter uma instância de componente como:

import AnyComponent from "./AnyComponent"

const componentStore = writable<SvelteComponent>(null)

$componentStore = AnyComponent

A última linha apresentará o seguinte erro:

Digite 'typeof \

Talvez seja eu que tenha esquecido algo sobre como os componentes são digitados, mas gostaria de poder usar esse tipo de padrão.

Aqui está uma postagem StackOverflow que abri antes de escrever este problema, onde @dummdidumm me instruiu a abrir esse problema. Espero que esteja tudo bem.

Fixed bug

Fonte

glecetre

👍2

Comentários muito úteis

Olá there
Uma coisa é que faltam algumas propriedades / métodos em nossa definição interna de nossa classe de componente Svelte. A outra coisa é que a digitação está errada, deveria ser writable<typeof SvelteComponent> , caso contrário, você está se referindo à instância desse componente, não ao tipo de classe.

dummdidumm em 26 ago. 2020

👍5

Todos 6 comentários

dummdidumm em 26 ago. 2020

👍5

Eu encontrei um problema semelhante.

import type { SvelteComponent } from 'svelte';
import Comp from './Comp.svelte';

const comp: SvelteComponent = Comp; // Type 'typeof SvelteComponentDev' is missing the following properties from type SvelteComponentDev: $set, $on, $destroy ...

v 3.35.0

A questão é: por que um componente importado tem um tipo "typeof SvelteComponentDev" em vez de SvelteComponentDev

mckravchyk em 16 mar. 2021

Porque Comp é a classe, não a instância dessa classe.

class Foo {
    bar: string;
}

class Comp extends Foo {}

const comp: Foo = new Comp(); // OK
const compClass1: Foo = Comp; // WRONG
const compClass2: typeof Foo = Comp; // OK

dummdidumm em 16 mar. 2021

👍3

Ahh. Faz sentido. Obrigada.

mckravchyk em 16 mar. 2021

Lutando contra isso por 2 dias seguidos agora. Eu simplesmente não entendo:

<script lang="ts">
  import MyComponent from "./MyComponent.svelte";
  let myComponent: typeof MyComponent;
</script>

<MyComponent bind:this={myComponent}/> //Error here

Argument of type 'typeof MyComponent__SvelteComponent_' is not assignable to parameter of type 'MyComponent__SvelteComponent_'.   
Type 'typeof MyComponent__SvelteComponent_' is missing the following properties from type 'MyComponent__SvelteComponent_': $$prop_def, $$events_def, $$slot_def, $on, and 5 more.ts(2345)

O que eu estou fazendo errado aqui? Eu só quero transformar essa instância em uma variável. 😭

Alfagun74 em 1 abr. 2021

@ Alfagun74 o problema que você está enfrentando não é o mesmo que os outros neste tópico. O que você quer é uma instância da classe. Então você só precisa:

<script lang="ts">
  import MyComponent from "./MyComponent.svelte";
  let myComponent: MyComponent;
</script>

<MyComponent bind:this={myComponent}/>

Outras pessoas querem um componente dinâmico, então precisam da própria classe, uma função especial.