Jetzt starten

Playcode Classic

TypeScript-Playground

Dieser TypeScript-Playground führt TypeScript online aus, auf einer Live-Seite in deinem Browser. Typfehler werden beim Schreiben unterstrichen, npm-Pakete bringen ihre Typen mit, und React-Komponenten in .tsx werden in der Vorschau gerendert. Du richtest nichts ein und brauchst zum Starten kein Konto; melde dich an, um zu speichern und zu teilen. Er gehört zu Playcode Classic, den kostenlosen Code-Tools von Playcode.

Playground öffnen

Kostenlos. Starten kannst du ohne Konto.

In einem Sandkasten auf dem Spielplatz drückt Play einen großen eckigen Klotz gegen das runde Loch eines riesigen hölzernen Steckspiels; er passt nicht hinein, und unter dem Loch leuchtet eine rote Wellenlinie. Ein Entwickler am Rand des Sandkastens lacht über seinem Laptop.

Typfehler erscheinen, während du schreibst

Der Editor prüft deine Typen mit TypeScript 5.9 und unterstreicht, was nicht stimmt; fahr mit der Maus darüber, um den Grund zu sehen. Die Prüfung blockiert nie die Ausführung, so kannst du eine Idee ausprobieren, bevor sie vollständig typisiert ist.

Du beschreibst eine Website lieber, als sie zu programmieren? Nutze den KI-Website-Builder von Playcode
Im Sand liegt eine Reihe Holzklötze wie eine Codezeile, alles Würfel bis auf ein Dreieck; Play hat mit roter Kreide eine Wellenlinie unter das Dreieck gezogen, und der Entwickler zeigt vom Rand des Sandkastens darauf.

Pakete kommen mit ihren Typen

Importiere ein Paket, und der Editor bietet an, es aus npm zu installieren. Seine Typdefinitionen kommen mit, also kennt die Autovervollständigung jede Funktion und die Typprüfung jedes Argument.

An einem Picknicktisch schiebt der Entwickler ein neues Werkzeug in die eine Schaumstoffaussparung eines offenen Werkzeugkoffers, die genau passt, und Play auf dem Tisch neben ihm faltet begeistert die Hände.

Eine .tsx-Datei? Sieh sie rendern.

Öffne die Vorlage für React mit TypeScript, füge deine Komponente in eine Datei ein und rendere sie aus index.tsx. Sie erscheint in der Vorschau, und ihre Buttons funktionieren.

Vorlage für React mit TypeScript öffnen
Der Entwickler dreht die Kurbel eines großen Springteufels, und eine kleine Web-Karte mit einem Bild und einem flammenorangen Button springt an ihrer Feder heraus, während Play begeistert zusieht.

Der offizielle Playground oder dieser?

Nutze den offiziellen TypeScript-Playground, um das kompilierte JavaScript zu lesen und andere Versionen und Compiler-Optionen auszuprobieren.

Nutze diesen, wenn dein TypeScript eine Seite, Pakete oder React braucht:

  • Eine Live-Seite mit HTML und CSS
  • npm-Pakete, Typen inklusive
  • React und .tsx
  • Mehrere Dateien, die sich gegenseitig importieren
  • Ein Link zum Teilen und gemeinsames Bearbeiten mit anderen
  • Der KI-Chat für Fragen zu deinem Code

Teil von Playcode Classic

Playcode begann 2016 als Programmierumgebung im Browser. Dieser Playground ist eines seiner kostenlosen Code-Tools, die wir heute Playcode Classic nennen.

Heute ist Playcode eine KI-Plattform zum Erstellen und Betreiben von Websites und Apps.

KI-Website-Builder entdeckenAlle Tools von Playcode Classic
Play steht am offenen Tor eines alten Spielplatzes und zeigt, was dahinter liegt: eine Rakete, startklar auf ihrer Startrampe.

Häufige Fragen

  • Was ist ein TypeScript-Playground?

    Eine TypeScript-Sandbox oder ein TS-Playground: ein Ort, an dem du TypeScript schreibst und sofort ausführst, ohne ein Projekt oder einen Compiler einzurichten. Dieser hier führt deinen Code auf einer Live-Seite in deinem Browser aus und prüft deine Typen, während du schreibst.

  • Ist dieser TypeScript-Editor online kostenlos?

    Ja. Code zu schreiben und auszuführen ist kostenlos und geht ohne Konto. Zum Speichern und Teilen brauchst du ein kostenloses Konto, mit dem du bis zu drei Projekte speicherst, öffentlich oder privat; der KI-Chat verbraucht Credits.

  • Welche TypeScript-Version wird verwendet?

    Der Editor prüft deinen Code mit TypeScript 5.9. Zum Ausführen kompiliert esbuild ihn ohne Typprüfung zu JavaScript, ein Typfehler stoppt die Ausführung also nie.

  • Prüft der Playground Typen wie tsc?

    Ja. Er nutzt beim Schreiben die Typprüfung von TypeScript selbst und unterstreicht Fehler, mit aktiviertem Strict Mode und deaktivierter Option strictNullChecks.

  • Kann ich das kompilierte JavaScript sehen?

    Noch nicht. Um das JavaScript zu lesen, das TypeScript erzeugt, nutze den offiziellen TypeScript-Playground.

  • Kann ich npm-Pakete nutzen?

    Ja. Importiere ein Paket, und der Editor bietet an, es samt Typdefinitionen aus npm zu installieren.

  • Wie öffnet man eine .tsx-Datei online?

    Öffne die Vorlage für React mit TypeScript, füge deine Komponente in eine Datei ein und rendere sie aus index.tsx. Sie erscheint in der Vorschau, und so dient der Playground auch als TSX-Viewer online.

  • Kann ich eine .tsx-Datei auf dem Handy öffnen?

    Ja, im Browser deines Handys, auf dieselbe Weise. Längeren Code bearbeitest du bequemer auf einem größeren Bildschirm.

  • Unterstützt der Playground React und JSX?

    Ja. .tsx- und .jsx-Dateien werden in der Vorschau kompiliert. Starte mit der Vorlage für React mit TypeScript.

  • Gehört dieser Playground zu Playcode?

    Ja. Dieser Playground gehört zu Playcode Classic, den kostenlosen Code-Tools von Playcode. Playcode begann 2016 als Programmierumgebung im Browser. Heute ist es eine KI-Plattform zum Erstellen und Betreiben von Websites und Apps.

Weitere kostenlose Code-Tools

Schreib einen Typ. Sieh ihn laufen.

Playground öffnen
Eine Rakete wartet mit offener Tür und einem freien Sitz, und Play bittet dich herein. Hoch oben steigt eine andere Rakete davon.