Language-tools: [TypeScript] Escribir una variable que contiene un componente como valor

Creado en 26 ago. 2020 · 6Comentarios · Fuente: sveltejs/language-tools

Cuando se usa TypeScript, parece imposible usar un componente como tipo.
Por ejemplo, no es posible escribir una tienda para contener una instancia de componente como esta:

import AnyComponent from "./AnyComponent"

const componentStore = writable<SvelteComponent>(null)

$componentStore = AnyComponent

La última línea dará el siguiente error:

Escriba 'typeof \

Tal vez sea yo quien se haya perdido algo sobre cómo se escriben los componentes, pero me gustaría poder usar ese tipo de patrón.

Aquí hay una publicación de StackOverflow que abrí antes de escribir este número, donde @dummdidumm me indicó que abriera este problema. Espero que esté bien.

Fixed bug

Fuente

glecetre

👍2

Comentario más útil

Hola
Una cosa es que nos faltan algunas propiedades / métodos en nuestra definición interna de nuestra clase de componente Svelte. La otra cosa es que la escritura es incorrecta, debería ser writable<typeof SvelteComponent> , de lo contrario, se está refiriendo a la instancia de ese componente, no al tipo de clase.

dummdidumm en 26 ago. 2020

👍5

Todos 6 comentarios

dummdidumm en 26 ago. 2020

👍5

Me he encontrado con un problema similar.

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

La pregunta es por qué un componente importado tiene un tipo "typeof SvelteComponentDev" en lugar de SvelteComponentDev

mckravchyk en 16 mar. 2021

Porque Comp es la clase, no la instancia de esa clase.

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 en 16 mar. 2021

👍3

Ah. Tiene sentido. Gracias.

mckravchyk en 16 mar. 2021

Luchando con esto durante 2 días seguidos ahora. Simplemente no entiendo:

<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)

¿Qué estoy haciendo mal aquí? Solo quiero convertir esa instancia en una variable. 😭

Alfagun74 en 1 abr. 2021

@ Alfagun74, el problema al que se enfrenta no es el mismo que otros en este hilo. Lo que quieres es una instancia de la clase. Entonces solo necesitas:

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

<MyComponent bind:this={myComponent}/>

Otras personas quieren un componente dinámico, por lo que necesitan la clase en sí, una función especial.