svelte-check & TypeScript

In a React project you run tsc --noEmit to catch type errors across your .tsx files. That works because TypeScript natively understands JSX. Svelte templates are not JSX — they are a custom syntax that tsc cannot parse. Enter svelte-check: a CLI tool that understands .svelte file structure, runs the TypeScript compiler on the <script lang="ts"> block, and also type-checks template expressions like reactive variable references and $props destructuring.

TypeScript component comparison

// Counter.tsx
import React from 'react';

interface Props {
  initialCount: number;
}

export function Counter({ initialCount }: Props) {
  const [count, setCount] = React.useState(initialCount);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

<!-- Counter.svelte -->
<script lang="ts">
  interface Props {
    initialCount: number;
  }
  let { initialCount }: Props = $props();
  let count = $state(initialCount);
</script>

<button onclick={() => count++}>Count: {count}</button>

The lang="ts" attribute on <script> opts the block into TypeScript. You define your Props interface directly inside the script block (or import it from a shared file), then destructure $props() with that type.

Running the type checker

React/tsc:

npx tsc --noEmit

Svelte:

npx svelte-check --tsconfig ./tsconfig.json

Both commands print errors and exit with a non-zero code if there are type problems, making them drop-in replacements in CI scripts.

IDE integration

svelte-check powers the Svelte for VS Code extension (and the official language server). This is why you get inline type errors in .svelte templates in your editor — the same engine runs in the terminal as in the IDE.

Install the VS Code extension:

# Search in VS Code extensions panel:
# "Svelte for VS Code" by the Svelte team

Add svelte-check to your project:

npm install --save-dev svelte-check typescript

Typical tsconfig.json for a SvelteKit project (generated by npm create svelte@latest):

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true
  }
}