Language-tools: Verwirrende / falsche Code-Vervollständigung

Beschreibe den Fehler
Ich habe eine verwirrende Code-Vervollständigung sowohl mit einfachem JS als auch mit TS. Ich bin mir nicht sicher, ob ich etwas falsch eingestellt habe.

Fortpflanzen
Siehe einfaches Setup mit einer Parent.svelte und einer Child.svelte -Komponente:

// 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 mit <script></script> :

• Die Code-Vervollständigung für die untergeordnete Komponente zeigt bar , baz , foo , ref usw. an.
  erwartet: nur foo und bar

  • Warum ist ref da, was macht es?
  • Ich denke, $$ prop_def, $$ slot_def, __sveltets_ensureType, __sveltets_partial sind mit svelte2tsx (?) Verwandt.
  • Kind / Kind?
  • onMount?

• bar , baz , foo sind alle als optional aufgeführt (? :)
  erwartet: bar optional, baz nicht aufgeführt, foo obligatorisch (siehe Konsolenwarnung).

• Die Vervollständigung des Codes auf child -Referenz verwirrt mich neben svelte2tsx-bezogenen Dingen usw.:
  foo ist aufgeführt, obwohl nicht zugänglich (siehe Konsolenfehler), baz ist nicht aufgeführt.
  erwartet: foo ist nicht aufgeführt, baz ist aufgeführt

• Obwohl baz nicht aufgeführt ist, kann ich es aufrufen und es funktioniert wie erwartet (siehe Konsolenprotokoll)

TS- Version mit <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>

• Die Code-Vervollständigung für die untergeordnete Komponente zeigt bar , baz , foo , ref usw. an.
  erwartet: nur foo und bar + etc.

• bar , baz , foo sind alle als optional aufgeführt (? :)
  erwartet: bar optional, baz nicht aufgeführt, foo obligatorisch (siehe Konsolenwarnung).

• Die Code-Vervollständigung bei child -Referenz zeigt nur $$prop_def und $$slot_def

  • Nach dem Zugriff auf $$prop_def enthält die Liste bar , baz , foo (würde nur baz erwarten)
  • Wenn ich versuche, foo festzulegen, erhalte ich "Cannot read ..." -Fehler, würde aber "Props cannot be read directly from the component ..." erwarten
  • Das Aufrufen von $$prop_def.baz() funktioniert nicht (siehe Konsolenfehler)
  • Das Aufrufen von child.baz() funktioniert wie erwartet (siehe console.log), obwohl es nicht aufgeführt ist, wird jedoch im VS-Code als Fehler markiert: "Property 'baz' does not exist on type 'Child__SvelteComponent_'. (ts2339)

Fazit:

Die Code-Vervollständigung scheint tatsächlich so verwirrend / falsch zu sein, dass ich nicht sicher bin, ob ich möglicherweise etwas Falsches konfiguriert habe. 🤔 Würde mich über jeden Hinweis sehr freuen, wenn ich dies annehme!

System (bitte vervollständigen Sie die folgenden Informationen):

• Betriebssystem: Windows 10
• IDE: VSCode 1.47.2
• Plugin / Paket: Svelte für VSCode 101.2.0

relevante package.json

"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"
      ]
}

Vielen Dank!