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?