VSCode 会抛出错误，就像在 Svelte 5 组件中的 HTML 中无法访问 $props 变量一样

Question

使用此组件代码：

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

Answer 1

我已经解决了这个问题。看来我可能混淆了 Typescript/Svelte 编译器。该项目使用 Typescript，我刚刚在调试时通过从

lang="ts"

标签中删除

script

在此组件中禁用了它。

此外，明确使用 props 解构返回的类型的语法与我的猜测不同。

这非常有效：

<script lang="ts">
  let { srcFile }: { srcFile: string } = $props();
</script>

<img src={srcFile} class="contained_photo" alt="alt" />