Language-tools: 紛らわしい/間違ったコード補完

バグを説明する
プレーンなJSとTSの両方でコード補完が混乱している。 何か間違った設定をしたかどうかわかりません。

再現するには
Parent.svelteと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>

<script></script> JS ：

• 子コンポーネントのコード補完は、 bar 、 baz 、 foo 、 refなどを示します。
  予想： fooとbar

  • なぜrefがあるのですか、それは何をしますか？
  • $$ prop_def、$$ slot_def、__ sveltets_ensureType、__ sveltets_partialはsvelte2tsx（？）に関連していると思います
  • 子供/子供？
  • onMount？

• bar 、 baz 、 fooはすべてオプションとしてリストされています（？:)
  予想： barオプション、 bazはリストされていません、 foo必須です（コンソールの警告を参照）。

• child -referenceでのコード補完も、svelte2tsx関連のものなどのほかに私を混乱させます。
  fooがリストされていますが、アクセスできません（コンソールエラーを参照）が、 bazはリストされていません。
  予想： fooはリストされていません、 bazはリストされています

• bazはリストされていませんが、呼び出すことができ、期待どおりに機能します（コンソールログを参照）

<script lang="typescript"></script> TSバージョン：

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

• 子コンポーネントのコード補完は、 bar 、 baz 、 foo 、 refなどを示します。
  予想： fooとbar +などのみ。

• bar 、 baz 、 fooはすべてオプションとしてリストされています（？:)
  予想： barオプション、 bazはリストされていません、 foo必須です（コンソールの警告を参照）。

• childコード補完$$prop_defと$$slot_def

  • $$prop_defアクセスした後、リストにはbar 、 baz 、 foo （ bazのみが予想されます）
  • fooを設定しようとすると、 "Cannot read ..."エラーが発生しますが、 "Props cannot be read directly from the component ..."
  • $$prop_def.baz()呼び出しは機能しません（コンソールエラーを参照）
  • child.baz()呼び出し"Property 'baz' does not exist on type 'Child__SvelteComponent_'. (ts2339)

結論：

コード補完は実際には非常に紛らわしい/間違っているように思われるので、何か間違った構成をしたのかどうかわかりませんか？ 🤔そうだとしたら、ヒントをいただければ幸いです。

システム（以下の情報を入力してください）：

• OS：Windows 10
• IDE：VSCode 1.47.2
• プラグイン/パッケージ：VSCode101.2.0用のSvelte

関連する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"
      ]
}

ありがとうございました！