Language-tools: [TypeScript] Mengetik variabel yang memegang komponen sebagai nilai

Dibuat pada 26 Agu 2020 · 6Komentar · Sumber: sveltejs/language-tools

Saat menggunakan TypeScript, tampaknya tidak mungkin untuk menggunakan komponen sebagai tipe.
Misalnya, tidak mungkin untuk mengetik toko untuk menampung instance komponen seperti ini:

import AnyComponent from "./AnyComponent"

const componentStore = writable<SvelteComponent>(null)

$componentStore = AnyComponent

Baris terakhir akan memberikan kesalahan berikut:

Ketik 'typeof \

Mungkin saya yang melewatkan sesuatu tentang bagaimana komponen diketik, tetapi saya ingin dapat menggunakan pola semacam itu.

Berikut adalah postingan StackOverflow yang saya buka sebelum menulis masalah ini, di mana @dummdidumm menginstruksikan saya untuk membuka masalah ini. Saya harap tidak apa-apa.

Fixed bug

Sumber

glecetre

👍2

Komentar yang paling membantu

Halo 😄
Satu hal adalah kita kehilangan beberapa properti / metode pada definisi internal kelas komponen Svelte kita. Hal lain adalah bahwa pengetikan salah, seharusnya writable<typeof SvelteComponent> , jika tidak, Anda merujuk ke instance komponen itu, bukan tipe kelas.

dummdidumm pada 26 Agu 2020

👍5

Semua 6 komentar

dummdidumm pada 26 Agu 2020

👍5

Saya mengalami masalah serupa.

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

Pertanyaannya adalah, mengapa komponen yang diimpor memiliki tipe "typeof SvelteComponentDev" daripada SvelteComponentDev

mckravchyk pada 16 Mar 2021

Karena Comp adalah kelasnya, bukan turunan dari kelas itu.

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 pada 16 Mar 2021

👍3

Ahh. Masuk akal. Terima kasih.

mckravchyk pada 16 Mar 2021

Berkelahi dengan ini selama 2 hari berturut-turut sekarang. Saya tidak mengerti:

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

Apa yang saya lakukan salah di sini? Saya hanya ingin membuat Instance itu menjadi variabel. 😭

Alfagun74 pada 1 Apr 2021

@ Alfagun74 masalah yang Anda hadapi tidak sama dengan orang lain di utas ini. Yang Anda inginkan adalah contoh kelas. Jadi, Anda hanya perlu:

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

<MyComponent bind:this={myComponent}/>

Orang lain menginginkan komponen dinamis sehingga mereka membutuhkan kelas itu sendiri, fungsi khusus.