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>

JS مع <script></script> :

• يظهر إكمال الرمز في المكون الفرعي bar ، baz ، foo ، ref إلخ.
  المتوقع: فقط foo و bar

  • لماذا يوجد ref هناك ، ماذا يفعل؟
  • أعتقد أن $$ prop_def و $$ slot_def و __sveltets_ensureType و __sveltets_partial مرتبطة بـ svelte2tsx (؟)
  • طفل / طفل؟
  • onMount؟

• bar ، baz ، foo كلها مدرجة على أنها اختيارية (؟ :)
  المتوقع: bar اختياري ، baz غير مدرج ، foo إلزامي (انظر تحذير وحدة التحكم).

• يؤدي إكمال الرمز على مرجع child إرباكي أيضًا ، إلى جانب الأشياء ذات الصلة بـ svelte2tsx وما إلى ذلك:
  تم إدراج foo ، على الرغم من أنه لا يمكن الوصول إليه (راجع خطأ وحدة التحكم) ، لم يتم سرد baz .
  المتوقع: foo غير مُدرج ، baz مُدرج

• على الرغم من أن baz غير مدرج يمكنني تسميته ويعمل كما هو متوقع (انظر سجل وحدة التحكم)

إصدار TS بـ <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>

• يظهر إكمال الرمز في المكون الفرعي 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() يعمل كما هو متوقع (راجع console.log) ، على الرغم من عدم إدراجه ، ولكن يتم تمييزه كخطأ في VS Code: "Property 'baz' does not exist on type 'Child__SvelteComponent_'. (ts2339)

استنتاج:

يبدو إكمال الرمز محيرًا / خاطئًا جدًا ، لدرجة أنني لست متأكدًا مما إذا كنت قد قمت بتكوين شيء خاطئ؟ 🤔 سأقدر تقديرا عاليا أي تلميح إذا افترضت ذلك!

النظام (يرجى استكمال المعلومات التالية):

• نظام التشغيل: Windows 10
• IDE: VSCode 1.47.2
• البرنامج المساعد / الحزمة: Svelte لـ VSCode 101.2.0

الحزمة ذات الصلة

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

شكرا لك!