使用此组件代码:
<script>
let { srcFile } = $props();
</script>
<img src={srcFile}/>
在
srcFile
标签中对 img
的引用会引发错误,就好像该变量从未定义过一样。
Type 'unknown' is not assignable to type 'string | null | undefined'.
但是,这个错误只是出现在VSCode中,而不是运行vite的npm服务器中。此外,图像可以在浏览器中正确加载。我应该对 VSCode 配置进行哪些修改才能使其符合现实?
我的package.json:
{
"name": "viewer",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev --host",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.5",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@types/eslint": "^9.6.0",
"eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.45.1",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.2.6",
"svelte": "^5.0.5",
"svelte-check": "^4.0.0",
"typescript": "^5.5.0",
"typescript-eslint": "^8.0.0",
"vite": "^5.4.4"
},
"type": "module"
}
我已经解决了这个问题。看来我可能混淆了 Typescript/Svelte 编译器。该项目使用 Typescript,我刚刚在调试时通过从
lang="ts"
标签中删除 script
在此组件中禁用了它。
此外,明确使用 props 解构返回的类型的语法与我的猜测不同。
这非常有效:
<script lang="ts">
let { srcFile }: { srcFile: string } = $props();
</script>
<img src={srcFile} class="contained_photo" alt="alt" />