Language-tools: Запутанное / неправильное завершение кода

Созданный на 17 июл. 2020  ·  3Комментарии  ·  Источник: sveltejs/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> :

vscode_confusing_code_completition

  • Автозавершение кода в дочернем компоненте показывает 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 нет в списке, я могу его назвать, и он работает должным образом (см. Журнал консоли)

Версия 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>

vscode_confusing_code_completition_ts

  • Автозавершение кода в дочернем компоненте показывает bar , baz , foo , ref и т. Д.
    ожидается: только foo и bar + и т. д.

  • bar , baz , foo указаны как необязательные (? :)
    ожидается: bar необязательно, baz нет в списке, foo обязательно (см. предупреждение консоли).

  • Автозавершение кода на child -reference показывает только $$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

соответствующий 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"
      ]
}

Спасибо!

Самый полезный комментарий

Вы ничего не настроили неправильно, просто сразу заметили многие недочеты 😃

  • Дочерняя ссылка имеет только $$ ..: та же причина, что и # 307, все еще требует реализации.
  • Имея $$ ..- доработки: Да, внутренний svelte2tsx, нам может потребоваться отфильтровать это
  • foo optional: поскольку у вас нет строгого режима, каждая опция помечена как необязательная. Возможно, нам придется пересмотреть это решение.

Все 3 Комментарий

Вы ничего не настроили неправильно, просто сразу заметили многие недочеты 😃

  • Дочерняя ссылка имеет только $$ ..: та же причина, что и # 307, все еще требует реализации.
  • Имея $$ ..- доработки: Да, внутренний svelte2tsx, нам может потребоваться отфильтровать это
  • foo optional: поскольку у вас нет строгого режима, каждая опция помечена как необязательная. Возможно, нам придется пересмотреть это решение.

А, ладно, спасибо за быстрый ответ!

  • foo optional: поскольку у вас нет строгого режима, каждая опция помечена как необязательная. Возможно, нам придется пересмотреть это решение.

Хорошо, не могу поделиться своим мнением об этом банкомате, нужно сначала проверить / вспомнить, почему у меня его нет. 🤔

Быстрое обновление:

  • Автозавершение кода по ссылке должно работать. $$slot_def т. Д. Есть комментарий, в котором говорится, что речь идет только о проверке типов, и вы не должны его использовать.
  • ref больше не отображается
Была ли эта страница полезной?
0 / 5 - 0 рейтинги