Language-tools: Code compliqué / incorrect

Décrivez le bogue
Je rencontre un achèvement de code confus avec à la fois JS et TS. Je ne sais pas si j'ai configuré quelque chose de mal.

Reproduire
voir configuration simple avec un composant Parent.svelte et un composant 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 avec <script></script> :

• La complétion de code sur le composant enfant montre bar , baz , foo , ref etc.
  prévu: seulement foo et bar

  • pourquoi est-ce que ref là, que fait-il?
  • Je suppose que $$ prop_def, $$ slot_def, __sveltets_ensureType, __sveltets_partial sont liés à svelte2tsx (?)
  • Enfant / enfant?
  • onMount?

• bar , baz , foo sont tous listés comme facultatifs (? :)
  attendu: bar facultatif, baz non listé, foo obligatoire (voir l'avertissement de la console).

• La complétion de code sur child -reference me déroute également, à côté de choses liées à svelte2tsx, etc.
  foo est répertorié, bien qu'il ne soit pas accessible (voir erreur de console), baz n'est pas répertorié.
  attendu: foo n'est pas répertorié, baz est répertorié

• Bien que baz ne soit pas répertorié, je peux l'appeler et cela fonctionne comme prévu (voir le journal de la console)

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

• La complétion de code sur le composant enfant montre bar , baz , foo , ref etc.
  prévu: seulement foo et bar + etc.

• bar , baz , foo sont tous listés comme facultatifs (? :)
  attendu: bar facultatif, baz non listé, foo obligatoire (voir l'avertissement de la console).

• La complétion du code sur child -reference montre seulement $$prop_def et $$slot_def

  • Après avoir accédé à $$prop_def la liste contient bar , baz , foo (attendez seulement baz )
  • En essayant de définir foo j'obtiens "Cannot read ..." -error, mais je m'attendrais à "Props cannot be read directly from the component ..."
  • L'appel de $$prop_def.baz() ne fonctionne pas (voir erreur de console)
  • L'appel de child.baz() fonctionne comme prévu (voir console.log), bien qu'il ne soit pas répertorié, mais est marqué comme une erreur dans VS Code: "Property 'baz' does not exist on type 'Child__SvelteComponent_'. (ts2339)

Conclusion:

L'achèvement du code semble en fait si déroutant / faux, que je ne suis pas sûr si j'ai peut-être configuré quelque chose de mal? 🤔 J'apprécierais beaucoup tout indice si c'est le cas!

Système (veuillez compléter les informations suivantes):

• Système d'exploitation: Windows 10
• IDE: VSCode 1.47.2
• Plugin / Package: Svelte pour VSCode 101.2.0

package.json pertinent

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

Merci!