TypeScript: Module und die tsconfig.json

Kurz: TypeScript nutzt dieselben ES-Module wie JavaScript (import/export) und ergänzt Typen:

Teil des Kurses TypeScript

Kapitel 10 von 15 im Kurs TypeScript (Abschnitt „Projekte“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Module

TypeScript nutzt dieselben ES-Module wie JavaScript (import/export) und ergänzt Typen:

// typen.ts
export interface Nutzer { id: number; name: string }
export type Rolle = "admin" | "nutzer";
export const standardRolle: Rolle = "nutzer";
 
// dienst.ts
import { type Nutzer, standardRolle } from "./typen.js";
import type { Rolle } from "./typen.js";      // reiner Typ-Import: wird komplett entfernt
 
export function neuerNutzer(name: string): Nutzer & { rolle: Rolle } {
  return { id: Date.now(), name, rolle: standardRolle };
}

• import type { X } stellt klar, dass X nur ein Typ ist. Das ist schneller zu übersetzen und für Werkzeuge, die Typen entfernen, nötig.
• Die Dateiendung im Importpfad hängt von der Einstellung ab (./typen.js bei Node-ESM, ./typen bei Bundlern).
• Eine Datei ohne import/export gilt als Skript mit globalem Scope. Füge export {} hinzu, um sie zum Modul zu machen.

Die tsconfig.json

Die Datei tsconfig.json im Projektordner steuert den Compiler. Erzeugen: npx tsc --init.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
 
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,
 
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "skipLibCheck": true,
 
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "declaration": false,
    "noEmit": false
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Option	Bedeutung
target	welche JavaScript-Version erzeugt wird
module, moduleResolution	Modulsystem und wie Importe gefunden werden
lib	welche eingebauten Typen verfügbar sind (DOM für den Browser)
strict	schaltet alle strengen Prüfungen ein (immer aktivieren)
noUncheckedIndexedAccess	array[i] kann undefined sein
esModuleInterop	bequemerer Import von CommonJS-Paketen
isolatedModules	jede Datei muss einzeln übersetzbar sein (Bundler, Babel, esbuild)
skipLibCheck	Typen in node_modules nicht prüfen (schneller)
outDir, rootDir	Ausgabe- und Quellordner
noEmit	nur prüfen, nichts erzeugen (wenn ein Bundler übersetzt)
paths	Importabkürzungen: "@/*": ["src/*"]

Was strict bedeutet

strict ist ein Bündel mehrerer Schalter, unter anderem:

• strictNullChecks: null und undefined sind eigene Typen
• noImplicitAny: Parameter ohne erkennbaren Typ sind Fehler
• strictFunctionTypes, strictPropertyInitialization: genauere Prüfung von Funktionen und Klasseneigenschaften

function verdopple(x) {
  return x * 2;
}

Fehlermeldung:

error TS7006: Parameter 'x' implicitly has an 'any' type.

Neue Projekte starten immer mit strict: true. Bei der Migration von JavaScript kannst du schrittweise vorgehen.

Von JavaScript umsteigen

1. Installiere TypeScript und lege eine tsconfig.json mit "allowJs": true an
2. Benenne Dateien nach und nach von .js in .ts um
3. Mit // @ts-check bekommen auch .js-Dateien eine Typprüfung (Typen über JSDoc)
4. Schalte strict erst ein, wenn die größten Fehler behoben sind
5. Schreibe zuerst Typen für Daten (Interfaces), dann für Funktionen

Projekt starten

npm create vite@latest mein-projekt -- --template vanilla-ts
cd mein-projekt && npm install && npm run dev

Frameworks (React, Vue, Svelte, Angular, Next.js) bringen fertige TypeScript-Vorlagen mit.

Typen prüfen im Alltag

Befehl	Zweck
npx tsc --noEmit	alle Typen prüfen (für CI)
npx tsc --watch	laufend prüfen/übersetzen
npx tsc -p tsconfig.build.json	mit anderer Konfiguration
npx eslint . mit typescript-eslint	zusätzliche Regeln (zum Beispiel unnötige Zusicherungen)

Merke

• Module: import/export; import type für reine Typen
• tsconfig.json steuert den Compiler; strict: true immer einschalten
• tsc --noEmit prüft nur; Bundler (Vite, esbuild) übersetzen schnell
• Migration schrittweise: allowJs, // @ts-check, dann Dateien umbenennen
• isolatedModules und skipLibCheck sind gängige Empfehlungen

Übungsaufgabe

Lege ein Projekt mit npm init -y, npm install -D typescript und npx tsc --init an, schalte strict und noUncheckedIndexedAccess ein und übersetze eine kleine Datei.

Quiz zur Selbstkontrolle

Welche Option aktiviert alle strengen Prüfungen?

• strict (richtig)
• pedantic
• safe
• checkAll

Was bewirkt import type?

• Importiert nur Typen und wird beim Übersetzen entfernt (richtig)
• Importiert Typen zur Laufzeit
• Importiert Bilder
• Importiert Klassen

Was macht noEmit?

• Prüft nur, erzeugt keine JavaScript-Dateien (richtig)
• Löscht Dateien
• Sendet keine E-Mails
• Deaktiviert Fehler

Weiter im Kurs

Zurück: Utility-Typen und Typoperatoren

Weiter: Asynchroner Code und Laufzeitprüfung

Alle Kapitel: TypeScript im Überblick