So nutzen Sie den Online-TypeScript-Compiler
- Schreiben Sie TypeScript-Code in den Editor oder fügen Sie ihn ein, oder beginnen Sie mit dem Beispiel (Beispiel zurücksetzen stellt es wieder her).
- Drücken Sie Ausführen oder nutzen Sie Strg + Enter (⌘ + Enter auf dem Mac).
- Ihr Code wird zu JavaScript kompiliert. Findet der Compiler einen Syntaxfehler, wird dieser mit seinem
TS-Fehlercode, Zeile und Spalte aufgelistet, und es wird nichts ausgeführt. - Ist die Kompilierung erfolgreich, wird das JavaScript ausgeführt. Die Ausgabe von
console.logerscheint im Bereich Ausgabe, und unter dem Editor können Sie Generiertes JavaScript öffnen, um genau zu sehen, was der Compiler erzeugt hat. - Wählen Sie ein Zeitlimit von 5, 15 oder 60 Sekunden oder drücken Sie Stopp, um einen Lauf vorzeitig zu beenden.
Beim ersten Ausführen lädt die Seite den offiziellen TypeScript-Compiler herunter, etwa 3 MB. Ihr Browser speichert ihn zwischen, spätere Läufe starten daher schnell.
Kompilierung und Ausführung finden beide in einem Web Worker in Ihrem Browser statt. Ihr Code wird nicht hochgeladen und nicht auf unseren Servern gespeichert. Der Editor sichert Ihren letzten Code im lokalen Speicher Ihres Browsers und nirgendwo sonst.
Was unterstützt wird
Diese Seite nutzt TypeScript 5.6, den offiziellen Compiler von Microsoft. Er kompiliert für ES2022 und führt das Ergebnis in der JavaScript-Engine Ihres Browsers aus.
- Die gesamte TypeScript-Syntax: Typannotationen, Interfaces, Typaliase, Generics, Union- und Intersection-Typen, Enums, Zugriffsmodifizierer,
satisfies,as constund mehr. - Moderne JavaScript-Ausgabe, bei der Klassen, async/await und Optional Chaining unverändert bleiben.
- Top-Level-
await, Timer und Promises, genau wie im Online-JavaScript-Compiler.
Einschränkungen:
- Nur Transpilierung. Der Compiler entfernt Typen und meldet Syntaxfehler, führt aber keine vollständige Typprüfung durch. Code wie
const n: number = "text"wird kompiliert und ausgeführt. Nutzen Sietsc --noEmitoder Ihren Editor, wenn Sie semantische Typfehler sehen möchten. - Kein DOM: Der Code läuft in einem Worker, daher sind
documentundwindownicht verfügbar. - Keine Imports: npm-Pakete,
import-Anweisungen und Node.js-APIs lassen sich nicht verwenden.
TypeScript-Kurzreferenz
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| Konzept | Syntax |
|---|---|
| Typisierte Variable | let count: number = 0; |
| Interface | interface User { id: number; name?: string } |
| Union-Typ | type Id = string | number; |
| Generische Funktion | function wrap<T>(v: T): T[] { return [v]; } |
| Schreibgeschütztes Array | const xs: readonly number[] = [1, 2]; |
| Enum | enum Dir { Up, Down } |
Tipps
- Öffnen Sie Generiertes JavaScript, um zu lernen, wie Features wie Enums, Parameter-Properties und Klassenfelder kompiliert werden. So verstehen Sie schnell, was TypeScript zur Laufzeit tut.
- Denken Sie daran, dass Typen zur Laufzeit verschwinden. Um Daten von außen (etwa geparstes JSON) zu validieren, schreiben Sie Laufzeitprüfungen oder Type Guards wie
function isUser(x: unknown): x is User. - Möchten Sie die Ausgabe aufräumen, bevor Sie sie in ein Projekt kopieren? Fügen Sie sie in den JavaScript-Formatter & Minifier ein.
TS1005: ';' expected bedeutet, dass der Code nicht geparst werden konnte. Korrigieren Sie die in der Ausgabe genannte Zeile und Spalte und führen Sie ihn dann erneut aus.Häufig gestellte Fragen
Prüft der Compiler meine Typen?
Nein. Er nutzt den Transpile-Modus des Compilers, der nur Syntaxfehler meldet. Das hält ihn schnell und schlank, aber Typkonflikte werden nicht gemeldet. Für eine vollständige Prüfung führen Sie tsc lokal aus oder nutzen einen Editor mit dem TypeScript Language Service.
Was ist der Unterschied zwischen TypeScript und JavaScript?
TypeScript ist JavaScript mit optionalen statischen Typen. Browser können TypeScript nicht direkt ausführen, daher wird es zunächst zu reinem JavaScript kompiliert, indem die Typen entfernt und einige nur in TypeScript vorhandene Features wie Enums umgeschrieben werden. Das Ergebnis dieses Schritts sehen Sie auf dieser Seite.
Welche TypeScript-Version wird verwendet?
TypeScript 5.6, mit ES2022 als Ausgabeziel.
Kann ich Bibliotheken importieren?
Nein. Jeder Lauf kompiliert und führt eine einzelne Datei ohne Modulauflösung aus, daher werden import-Anweisungen und npm-Pakete nicht unterstützt. Weitere Hilfsmittel finden Sie bei unseren Entwickler-Tools.
Aktualisiert
Kommentare
Melden Sie sich an, um dieses Tool zu bewerten.
Teilen Sie einen Tipp, stellen Sie eine Frage oder erzählen Sie, wie das Tool bei Ihnen funktioniert hat.
Noch keine Kommentare. Erzählen Sie als Erste oder Erster, wie es lief.