Was ist TypeScript? Ein verständlicher Leitfaden für Nicht-Entwickler

TypeScript ist JavaScript mit Typen. Sie fügen Markierungen hinzu, die festlegen, welche Art von Daten ein Wert sein soll – eine Zahl, ein Text, eine Liste von Bestellungen –, und TypeScript prüft Ihren Code auf Unstimmigkeiten, bevor er überhaupt läuft. Die TypeScript-Website beschreibt es als „JavaScript mit Syntax für Typen“. Die Typen werden entfernt, wenn der Code in gewöhnliches JavaScript umgewandelt wird, und das läuft dann überall, wo JavaScript läuft.

Warum es beim Bauen mit KI wichtig ist

KI-Modelle schreiben schnell Code, und schneller Code enthält Fehler: ein Feld heißt customerName in einer Datei und customer_name in einer anderen, ein Preis wird als Text statt als Zahl übergeben, eine Funktion wird ohne einen Wert aufgerufen. In reinem JavaScript zeigen sich viele dieser Fehler erst, wenn jemand den falschen Knopf drückt.

TypeScript fängt viele davon früher ab, während der Code geschrieben wird:

• Die KI bekommt sofortiges Feedback. Typfehler zeigen auf die genaue falsche Zeile, sodass der Agent sie beheben kann, bevor Sie etwas sehen.
• Änderungen sind sicherer. Benennen Sie ein Feld um, markiert TypeScript jede Stelle, die noch den alten Namen verwendet.
• Der Code erklärt sich selbst. Typen dokumentieren, was eine Funktion erwartet und zurückgibt, was Ihnen, der KI und jedem Entwickler hilft, der später daran arbeitet.
• Editoren werden klüger. Autovervollständigung und „Gehe zur Definition“ funktionieren besser, weil der Editor weiß, welchen Typ jeder Wert hat.

Das ist ein wichtiger Grund, warum viele KI-App-Baukästen TypeScript standardmäßig verwenden.

Ein Alltagsvergleich

Denken Sie an ein Versandlager mit beschrifteten Bereichen. Jeder Bereich hat ein Schild: „Nur Paletten“, „Gekühlt“, „Maximal 500 kg“. Kommt eine Lieferung an, vergleicht ein Prüfer an der Tür die Ware mit dem Schild. Tiefkühlfisch, der für das Trockenlager bestimmt ist, wird an der Tür aufgehalten und nicht erst eine Woche später entdeckt, wenn es riecht.

TypeScript ist der Prüfer an der Tür. Die Typen sind die Schilder. Die Prüfung findet statt, bevor die Ware – Ihr Code – in Betrieb geht. Und wenn alles an seinem Platz ist, werden die Schilder abgenommen: Das laufende JavaScript enthält keine Typen mehr.

So funktioniert TypeScript

1. Sie (oder die KI) schreiben .ts- oder .tsx-Dateien – TypeScript mit Typ-Markierungen.
2. Der Typprüfer liest den Code und meldet Unstimmigkeiten als Fehler im Editor oder beim Build.
3. Ein Build-Schritt entfernt die Typen und erzeugt normales JavaScript.
4. Das JavaScript läuft im Browser oder auf einem Server (Node.js, Deno, Bun).

Eine wichtige Folge: TypeScript prüft den Code, den Sie geschrieben haben, nicht die Daten, die während des Betriebs der App eintreffen. Wenn eine externe API etwas Unerwartetes zurückschickt, kann TypeScript das nicht sehen, es sei denn, Sie fügen eine Validierung zur Laufzeit hinzu.

Ein Beispiel: ein Buchungsformular

Angenommen, Sie bauen eine Buchungs-App für einen Friseursalon. Hier ist ein Typ, der eine Buchung beschreibt:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // das ? bedeutet optional
};

Und eine Funktion, die eine Anzahlung berechnet:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Jetzt sehen Sie, was TypeScript abfängt.

Ein falsch geschriebenes Feld.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript meldet, dass prise keine bekannte Eigenschaft ist und price fehlt. In reinem JavaScript würde still eine Anzahlung von NaN (keine Zahl) berechnet.

Die falsche Art von Wert.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript meldet, dass ein Text nicht dort verwendet werden kann, wo eine Zahl erwartet wird. Ohne TypeScript funktioniert "40" * 0.2 zufällig, aber "40" + 5 ergibt "405" – die Art Fehler, die auf einer Rechnung auftaucht.

Eine Dienstleistung, die es nicht gibt.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript meldet, dass "perm" keine der erlaubten Dienstleistungen ist. Wenn der Salon später Dauerwellen anbietet, fügen Sie sie dem Typ hinzu, und TypeScript zeigt jede Stelle, die angepasst werden muss: die Preisliste, das Formular, die Kalenderfarben.

Was es nicht abfangen kann. Wenn das Buchungsformular price: "40" vom Browser an den Server schickt, sieht TypeScript auf dem Server das zur Laufzeit nicht. Deshalb validieren gut gebaute Apps eingehende Daten zusätzlich, oft mit einer Validierungsbibliothek, die die Form prüft und sie in eine echte Booking umwandelt.

TypeScript und JavaScript im Vergleich

Häufige Begriffe erklärt

Häufige Fehler und Missverständnisse

• „TypeScript macht Code fehlerfrei.“ Es findet Unstimmigkeiten in der Form der Daten, nicht in der Logik. Eine Anzahlung von 2 % statt 20 % passt typisch problemlos.
• „Typen schützen mich vor schlechten Eingaben.“ Typen verschwinden zur Laufzeit. Validieren Sie Daten von Nutzern, Formularen und APIs.
• any überall. Wenn eine KI festhängt, greift sie manchmal zu any oder // @ts-ignore, um Fehler zum Schweigen zu bringen. Das verbirgt Probleme, statt sie zu lösen.
• Typfehler ignorieren, weil die Vorschau funktioniert. Manche Werkzeuge führen Code trotz Typfehlern aus. Die Fehler sind trotzdem Bugs, die nur darauf warten, aufzutreten.
• „TypeScript ist langsamer.“ Die Typen werden vor dem Ausführen entfernt; das laufende JavaScript ist im Wesentlichen dasselbe.
• „Das ist nur für große Teams.“ Auch Einzel-Bauende profitieren, besonders wenn eine KI die meisten Änderungen macht.

Was Sie Ihren KI-Baukasten fragen sollten

• „Verwende TypeScript mit aktiviertem Strict Mode.“
• „Definiere gemeinsame Typen für unsere wichtigsten Datensätze – Customer, Booking, Invoice – und verwende sie im Frontend und im Backend.“
• „Verwende kein any und kein @ts-ignore, um Fehler zu umgehen; behebe die eigentliche Ursache und sag mir, was sie war.“
• „Validiere alle eingehenden Daten auf dem Server, nicht nur über Typen.“
• „Führe den Typprüfer aus und behebe jeden Fehler, bevor du sagst, dass es fertig ist.“
• „Wenn du ein Feld umbenennst, aktualisiere jede Stelle, die TypeScript markiert.“
• „Erkläre diesen Typfehler in einfacher Sprache.“

Wie Sie prüfen, was die KI erzeugt hat, erfahren Sie in wie Sie KI-generierten Code prüfen und wie Sie eine mit KI gebaute App debuggen.

TypeScript in Mythex

Wenn Sie nichts Bestimmtes anfordern, startet Mythex neue Projekte mit Vite + React + TypeScript + Tailwind. Der Code-Editor bietet Sprachunterstützung – Vervollständigung, Diagnosen und Gehe-zur-Definition für TypeScript und JavaScript, neben anderen Sprachen –, sodass Typfehler direkt im Code sichtbar sind und nicht nur in der Vorschau. Der Editor ist auf Free nur lesbar und auf Pro vollständig bearbeitbar. Sie können in Ihrem ersten Prompt trotzdem eine andere Einrichtung wünschen. Die Dokumentationsseite zu wie die Technik ausgewählt wird erklärt das, und die Dokumentation zum Code-Editor beschreibt, was der Editor zeigt.

Fragen