astrojs - Astro + Svelte: Imported Svelte Components Have No Type Checking in VSCode - Stack Overflow

admin管理员组

文章数量:1394593

I'm using VSCode, and I've noticed that when I import Svelte components into my Astro components, they are typed as any, and TypeScript does not type-check the props.

I have set up my project running:

npm create astro@latest and then npx astro add svelte

For example, I have the following Svelte component (Test.svelte):

<script lang="ts">
    interface TestProps {
        name: string;
    }

    let { name }: TestProps = $props();
</script>

<h1>{name}</h1>

And I import it into an Astro page like this:

---
import TestComponent from "../components/Test.svelte";
---

<TestComponent />

However, in VSCode:

There are no TypeScript errors when passing incorrect props.

There are no type hints when I hover over .

I've tried restarting TS server and ensuring my tsconfig.json has "strict": true, but the issue persists.

As is recommended by the svelte docs I have configured my tsconfig.json like this:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "verbatimModuleSyntax": true,
    "isolatedModules": true
  }
}

How can I enable proper TypeScript support for Svelte components inside Astro?

本文标签： astrojsAstroSvelte Imported Svelte Components Have No Type Checking in VSCodeStack Overflow