Опишите ошибку
Я испытываю непонятное завершение кода как с простым 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>
:Автозавершение кода в дочернем компоненте показывает bar
, baz
, foo
, ref
и т. Д.
ожидается: только foo
и bar
ref
, что он делает?bar
, baz
, foo
указаны как необязательные (? :)
ожидается: bar
необязательно, baz
нет в списке, foo
обязательно (см. предупреждение консоли).
Автозавершение кода на child
-reference меня также сбивает с толку, помимо вещей, связанных с svelte2tsx и т. Д .:
foo
отображается, но недоступен (см. Ошибку консоли), baz
не отображается.
ожидается: foo
отсутствует в списке, baz
присутствует в списке
Хотя baz
нет в списке, я могу его назвать, и он работает должным образом (см. Журнал консоли)
<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
-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)
Автозавершение кода на самом деле кажется таким запутанным / неправильным, что я не уверен, что я настроил что-то неправильно? 🤔 Был бы очень признателен за любой намек, если так полагает!
Система (пожалуйста, заполните следующую информацию):
соответствующий 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"
]
}
Спасибо!
Вы ничего не настроили неправильно, просто сразу заметили многие недочеты 😃
А, ладно, спасибо за быстрый ответ!
- foo optional: поскольку у вас нет строгого режима, каждая опция помечена как необязательная. Возможно, нам придется пересмотреть это решение.
Хорошо, не могу поделиться своим мнением об этом банкомате, нужно сначала проверить / вспомнить, почему у меня его нет. 🤔
Быстрое обновление:
$$slot_def
т. Д. Есть комментарий, в котором говорится, что речь идет только о проверке типов, и вы не должны его использовать.ref
больше не отображается
Самый полезный комментарий
Вы ничего не настроили неправильно, просто сразу заметили многие недочеты 😃