Language-tools: [TypeScript] Saisie d'une variable contenant un composant comme valeur

Créé le 26 août 2020 · 6Commentaires · Source: sveltejs/language-tools

Lors de l'utilisation de TypeScript, il semble impossible d'utiliser un composant comme type.
Par exemple, il n'est pas possible de taper un magasin pour contenir une instance de composant comme ceci:

import AnyComponent from "./AnyComponent"

const componentStore = writable<SvelteComponent>(null)

$componentStore = AnyComponent

La dernière ligne donnera l'erreur suivante:

Tapez 'typeof \

C'est peut-être moi qui ai manqué quelque chose sur la façon dont les composants sont typés, mais j'aimerais pouvoir utiliser ce type de modèle.

Voici un article StackOverflow que j'ai ouvert avant d'écrire ce numéro, où @dummdidumm m'a demandé d'ouvrir ce problème. J'espère que ça va.

Fixed bug

Source

glecetre

👍2

Commentaire le plus utile

Salut 😄
Une chose est qu'il nous manque certaines propriétés / méthodes dans notre définition interne de notre classe de composant Svelte. L'autre chose est que la saisie est incorrecte, cela devrait être writable<typeof SvelteComponent> , sinon vous faites référence à l'instance de ce composant, pas au type de classe.

dummdidumm le 26 août 2020

👍5

Tous les 6 commentaires

dummdidumm le 26 août 2020

👍5

J'ai rencontré un problème similaire.

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 question est de savoir pourquoi un composant importé a un type "typeof SvelteComponentDev" plutôt que SvelteComponentDev

mckravchyk le 16 mars 2021

Parce que Comp est la classe, pas l'instance de cette 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 le 16 mars 2021

👍3

Ahh. Logique. Merci.

mckravchyk le 16 mars 2021

Se battre avec ça depuis 2 jours d'affilée maintenant. Je ne comprends tout simplement pas:

<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'est-ce que je fais de mal ici? Je veux juste obtenir cette instance dans une variable. 😭

Alfagun74 le 1 avr. 2021

@ Alfagun74 le problème auquel vous êtes confronté n'est pas le même que les autres dans ce fil. Ce que vous voulez, c'est une instance de la classe. Vous avez donc juste besoin de:

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

<MyComponent bind:this={myComponent}/>

D'autres personnes veulent un composant dynamique et ont donc besoin de la classe elle-même, d'une fonction spéciale.