🐞Typfehler zur Entwicklungszeit

JavaScript prüft Typen erst, wenn der Code läuft – und manchmal gar nicht. TypeScript meldet dieselben Probleme schon im Editor.

🟨 JavaScript

// JavaScript: läuft – und liefert Unsinn
function brutto(netto, satz) {
  return netto * (1 + satz);
}
brutto("100", 0.19);   // 119 (Glück: * wandelt um)
brutto(100);           // NaN  (satz fehlt)
const kunde = { name: "Ada" };
kunde.nmae.toUpperCase(); // TypeError – erst zur Laufzeit!

Zwei der drei Probleme fallen nie auf (falsches Ergebnis statt Fehler), das dritte erst beim Kunden.

🟦 TypeScript – derselbe Code mit zwei Annotationen

TypeScript · bearbeitbar, Maus über Namen zeigt Typen

function brutto(netto: number, satz: number) {
  return netto * (1 + satz);
}
brutto("100", 0.19);
brutto(100);
const kunde = { name: "Ada" };
kunde.nmae.toUpperCase();

🧽Type Erasure: Was bleibt, was verschwindet?

Typen sind nur für den Compiler da. Beim Übersetzen werden sie gelöscht – das JavaScript enthält keinerlei Typinformation. Nur wenige TypeScript-Konstrukte erzeugen eigenen Laufzeit-Code.

Verschwindet vollständig: : number hinter Parametern und Rückgabe wird ersatzlos gestrichen.

TypeScript (bearbeitbar)

function add(a: number, b: number): number {
  return a + b;
}

JavaScript – Ausgabe des Compilersnur lesen

…

…

⚠️ Folge: Typen prüfen nichts zur Laufzeit

Kommt JSON vom Server, glaubt TypeScript der Annotation. Ob die Daten wirklich passen, muss man selbst prüfen (Type Guards, siehe Kapitel Narrowing und Praxis). Auch as ist keine Umwandlung, sondern eine Behauptung.

💡 TypeScript = JavaScript + Typen

Alles, was nach dem Löschen übrig bleibt, ist normales JavaScript derselben Version – TypeScript erfindet (bis auf enum, namespace, Parameter-Properties und Decorators) keine eigene Laufzeit-Semantik.

⚙️tsc – der Compiler

Installiert wird TypeScript als Entwicklungs-Abhängigkeit, aufgerufen über npx.

npm install --save-dev typescript
npx tsc --init          # legt tsconfig.json an
npx tsc                 # übersetzt nach outDir
npx tsc --noEmit        # nur prüfen (CI, Pre-Commit)
npx tsc --watch         # bei Änderungen neu übersetzen

  src/
  ├── index.ts ─┐
  └── util.ts ──┤      ┌───────┐     dist/
                ├────▶ │  tsc  │ ──▶ ├── index.js   + index.d.ts
  tsconfig.json ┘      └───┬───┘     └── util.js    + util.d.ts
                           │
                           ▼
                  Fehler (TS2322 …) – Ausgabe entsteht trotzdem,
                  außer mit "noEmitOnError": true

🧾tsconfig.json – die wichtigsten Optionen

Fahren Sie über eine Option für die Erklärung, setzen Sie Häkchen für Ihre eigene tsconfig.json. Hinweise zu TypeScript 6.0 stammen aus der offiziellen Ankündigung.

🛡️strict: der wichtigste Schalter

Derselbe Code, zweimal geprüft. Ohne strict ist fast alles erlaubt – mit strict findet der Compiler einen echten Fehler.

warenkorb.tsnur lesen

function preisMitSteuer(artikel, satz) {
  return artikel.preis * (1 + satz);
}

const warenkorb = [
  { name: "Tasse", preis: 8 },
  { name: "Kanne", preis: 25 },
];
const summe = warenkorb.reduce((s, a) => s + preisMitSteuer(a, 0.19), 0);
console.log(summe.toFixed(2));

const teller = warenkorb.find((a) => a.name === "Teller");
console.log(teller.preis);

function preisMitSteuer(artikel, satz) {
  return artikel.preis * (1 + satz);
}

const warenkorb = [
  { name: "Tasse", preis: 8 },
  { name: "Kanne", preis: 25 },
];
const summe = warenkorb.reduce((s, a) => s + preisMitSteuer(a, 0.19), 0);
console.log(summe.toFixed(2));

const teller = warenkorb.find((a) => a.name === "Teller");
console.log(teller.preis);

strict: false

… Fehler

strict: true

… Fehler

🎯target: welches JavaScript entsteht

Neuere Syntax wird für ältere Laufzeitumgebungen umgeschrieben. Wählen Sie ein Ziel – die Ausgabe kommt live vom Compiler.

TypeScriptnur lesen

class Zaehler {
  wert = 0;
  static instanzen = 0;
}
const name = eingabe?.name ?? "Gast";
const summe = async (a: Promise<number>) => (await a) + 1;
let x = 2 ** 10;
declare const eingabe: { name?: string } | undefined;

class Zaehler {
  wert = 0;
  static instanzen = 0;
}
const name = eingabe?.name ?? "Gast";
const summe = async (a: Promise<number>) => (await a) + 1;
let x = 2 ** 10;
declare const eingabe: { name?: string } | undefined;

JavaScript für ES2015nur lesen

…

…

Bei ES2015 schreibt der Compiler ?? und ?. in Vergleiche mitnull/void 0 um, ** inMath.pow und async in eine Hilfsfunktion __awaiter mit Generatoren. Ab ES2022 bleibt alles, wie es ist – Klassenfelder eingeschlossen.

▶️Ausführen: tsc, Node.js, tsx, Bundler

Nur tsc prüft Typen. Alle anderen Werkzeuge entfernen sie bloß – schnell, aber ohne Prüfung.

Werkzeug	prüft Typen?	schreibt Dateien?	wofür
tsc	✅ ja	✅ .js, .d.ts, .map	Typprüfung (`tsc --noEmit` in CI) und Bibliotheken bauen
node datei.ts	❌ nein	– (führt direkt aus)	Skripte und Server mit „löschbarer“ Syntax; Type Stripping seit Node.js 22.18 / 23.6 standardmäßig an, stabil seit 24.12 / 25.2
tsx	❌ nein	– (führt direkt aus)	Ausführen per esbuild, auch mit enum & Co. (`npx tsx datei.ts`)
Bundler (Vite, esbuild, SWC, webpack …)	❌ nein	✅ gebündeltes JS	Web-Apps: entfernen Typen Datei für Datei, blitzschnell – die Prüfung macht parallel `tsc` bzw. der Editor

Node.js: Type Stripping

Aktuelle Node.js-Versionen führen .ts-Dateien direkt aus, indem sie die Typen durch Leerzeichen ersetzen. Laut Dokumentation (Node.js v26) gilt dabei:

nur löschbare Syntax – kein enum, kein namespace mit Code, keine Parameter-Properties, keine Decorators;
Typ-Importe brauchen import type;
Dateiendungen in Importen sind Pflicht (./datei.ts);
tsconfig.json wird ignoriert (kein paths, kein Downleveling);
empfohlen: "erasableSyntaxOnly": true – dann meldet schon der Compiler, was Node nicht kann (rechts).

Quelle: nodejs.org/api/typescript.html ↗

erasableSyntaxOnly: true · bearbeitbar, Maus über Namen zeigt Typen

// Mit erasableSyntaxOnly: nur Syntax, die man einfach löschen kann
enum Farbe { Rot, Gruen }

class Punkt {
  constructor(public x: number) {}
}

// Löschbar und erlaubt:
type Richtung = "hoch" | "runter";
const r: Richtung = "hoch";