Language-tools: Penyelesaian kode yang membingungkan / salah

Jelaskan bugnya
Saya mengalami penyelesaian kode yang membingungkan dengan JS dan TS biasa. Tidak yakin apakah saya telah menyiapkan sesuatu yang salah.

Untuk Mereproduksi
lihat penyiapan sederhana dengan komponen Parent.svelte dan Child.svelte :

// Parent.svelte
<script>
    import {onMount} from "svelte"
    import Child from "./Child.svelte"

    let child

    onMount(()=> {

    })

</script>

<Child bind:this={child} />`

// Child.svelte
<script>
    export let foo
    export let bar = undefined

    export const baz = () => {
        console.log("executed function 'baz'!")
    }    
</script>

<div>
    foo is: <em>{foo}</em><br/>
    bar is: <em>{bar}</em>
</div>

JS dengan <script></script> :

• Penyelesaian kode pada komponen Anak menunjukkan bar , baz , foo , ref dll.
  diharapkan: hanya foo dan bar

  • mengapa ref ada, apa fungsinya?
  • Saya kira $$ prop_def, $$ slot_def, __sveltets_ensureType, __sveltets_p Partial terkait dengan svelte2tsx (?)
  • Anak / anak?
  • onMount?

• bar , baz , foo semuanya terdaftar sebagai opsional (? :)
  diharapkan: bar opsional, baz tidak terdaftar, foo wajib (lihat peringatan konsol).

• Penyelesaian kode pada child -referensi juga membingungkan saya, selain hal-hal terkait svelte2tsx dll .:
  foo terdaftar, meskipun tidak dapat diakses (lihat kesalahan konsol), baz tidak terdaftar.
  diharapkan: foo tidak terdaftar, baz terdaftar

• Meskipun baz tidak terdaftar, saya dapat memanggilnya dan berfungsi seperti yang diharapkan (lihat log konsol)

Versi TS dengan <script lang="typescript"></script> :

// Parent.svelte
<script lang="typescript">
    import {onMount} from "svelte"
    import Child from "./Child.svelte"

    let child:Child

    onMount(()=> {

    })

</script>

<Child bind:this={child} />`

// Child.svelte
<script lang="typescript">
    export let foo: number
    export let bar: number = undefined

    export const baz = (): void => {
        console.log("executed function 'baz'!")
    }    
</script>

<div>
    foo is: <em>{foo}</em><br/>
    bar is: <em>{bar}</em>
</div>

• Penyelesaian kode pada komponen Anak menunjukkan bar , baz , foo , ref dll.
  diharapkan: hanya foo dan bar + dll.

• bar , baz , foo semuanya terdaftar sebagai opsional (? :)
  diharapkan: bar opsional, baz tidak terdaftar, foo wajib (lihat peringatan konsol).

• Penyelesaian kode pada child -referensi hanya menampilkan $$prop_def dan $$slot_def

  • Setelah mengakses $$prop_def daftar berisi bar , baz , foo (hanya diharapkan baz )
  • Saat mencoba menyetel foo Saya mendapatkan "Cannot read ..." -kesalahan, tetapi mengharapkan "Props cannot be read directly from the component ..."
  • Memanggil $$prop_def.baz() tidak berfungsi (lihat kesalahan konsol)
  • Memanggil child.baz() berfungsi seperti yang diharapkan (lihat console.log), meskipun tidak terdaftar, tetapi ditandai sebagai kesalahan di VS Code: "Property 'baz' does not exist on type 'Child__SvelteComponent_'. (ts2339)

Kesimpulan:

Penyelesaian kode sebenarnya tampak sangat membingungkan / salah, sehingga saya tidak yakin apakah saya mungkin telah mengonfigurasi sesuatu yang salah? 🤔 Akan sangat menghargai petunjuk apa pun jika berasumsi demikian!

Sistem (lengkapi informasi berikut):

• OS: Windows 10
• IDE: VSCode 1.47.2
• Plugin / Paket: Svelte untuk VSCode 101.2.0

package.json yang relevan

"rollup": "^2.21.0",
"rollup-plugin-svelte": "^5.2.3",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-typescript": "^5.0.2",
"svelte": "^3.24.0",
"svelte-preprocess": "^4.0.8",
"tslib": "^2.0.0",
"typescript": "^3.9.7"

tsconfig.json

"compilerOptions": {
        "target": "es2017",
        "strict": false, 
        "moduleResolution": "node",
        "allowJs": false,
        "lib": [
            "es2017", "DOM"
        ],
        "types": [
            "svelte"
        ],
        "baseUrl": "."
    },
    "include": [
        "./src"
      ]
}

Terima kasih!