Installation

Pakete installieren

npm install --save-dev typescript @types/react @types/react-dom

• typescript — der TypeScript-Compiler (tsc)
• @types/react und @types/react-dom — Typdeklarationen für React, damit TypeScript React-APIs kennt

tsconfig.json

Erstelle eine tsconfig.json im Projektstamm:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

Die wichtigsten Optionen im Überblick:

Option	Bedeutung
"moduleResolution": "bundler"	Passend zur Modul-Auflösung von Vite
"noEmit": true	tsc prüft nur Typen — Vite übernimmt den Build
"jsx": "react-jsx"	Neue JSX-Transform (kein import React nötig)
"isolatedModules": true	Jede Datei wird isoliert kompiliert — entspricht esbuild
"strict": true	Aktiviert alle strengen Typprüfungen

Hinweis

"noEmit": true ist entscheidend: Vite nutzt esbuild zum Kompilieren, nicht tsc. TypeScript übernimmt nur die Typprüfung — es muss deshalb keine Ausgabedateien erzeugen.

package.json anpassen

Füge ein Script für die Typprüfung hinzu:

package.json

{
  "scripts": {
    "dev": "vite",
    "typecheck": "tsc"
  }
}

npm run typecheck prüft dann alle Typen im Projekt — ohne zu kompilieren.

Dateien umbenennen

Benenne deine Quelldateien von .jsx auf .tsx um — TypeScript erwartet .tsx für Dateien mit JSX:

src/main.jsx  →  src/main.tsx
src/App.jsx   →  src/App.tsx

Passe auch den Verweis in index.html an:

index.html

    <script type="module" src="/src/main.jsx"></script>
    <script type="module" src="/src/main.tsx"></script>

Danach kannst du npm run dev und npm run typecheck parallel nutzen: Vite lädt schnell neu, TypeScript prüft im Hintergrund.