Quantcast
Viewing latest article 12
Browse Latest Browse All 1634

Astro + Svelte: Imported Svelte Components Have No Type Checking in VSCode

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 thennpx 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?


Viewing latest article 12
Browse Latest Browse All 1634

Trending Articles