Commencer

Playcode Classic

Playground TypeScript

Ce playground TypeScript exécute du TypeScript en ligne, dans une page en direct de votre navigateur. Les erreurs de type sont soulignées pendant que vous écrivez, les paquets npm arrivent avec leurs types, et les composants React .tsx s'affichent dans l'aperçu. Rien à configurer et pas besoin de compte pour commencer ; connectez-vous pour enregistrer et partager. Il fait partie de Playcode Classic, les outils de code gratuits de Playcode.

Ouvrir le playground

Gratuit. Pas besoin de compte pour commencer.

Dans un bac à sable de l'aire de jeux, Play pousse un gros bloc carré vers le trou rond d'une boîte à formes géante en bois ; il ne rentre pas, et une ligne ondulée rouge brille sous le trou. Assis au bord du bac à sable, un développeur rit derrière son ordinateur portable.

Les erreurs de type apparaissent pendant que vous écrivez

L'éditeur vérifie vos types avec TypeScript 5.9 et souligne ce qui ne va pas ; survolez-le pour savoir pourquoi. La vérification ne bloque jamais l'exécution : vous pouvez essayer une idée avant qu'elle soit entièrement typée.

Vous préférez décrire un site plutôt que le coder ? Utilisez le créateur de sites IA de Playcode
Sur le sable, une rangée de blocs en bois s'aligne comme une ligne de code, rien que des cubes sauf un triangle ; Play, une craie rouge à la main, a tracé une ligne ondulée sous le triangle, et le développeur le montre du doigt depuis le bord du bac à sable.

Les paquets arrivent avec leurs types

Importez un paquet et l'éditeur propose de l'installer depuis npm. Ses définitions de types viennent avec lui : l'autocomplétion connaît chaque fonction, et le vérificateur chaque argument.

À une table de pique-nique, le développeur glisse un nouvel outil dans la seule découpe en mousse d'une mallette ouverte qui lui correspond exactement, et Play, sur la table à côté de lui, joint les mains, ravi.

Un fichier .tsx ? Voyez-le s'afficher.

Ouvrez le modèle React TypeScript, collez votre composant dans un fichier et affichez-le depuis index.tsx. Il apparaît dans l'aperçu, et ses boutons fonctionnent.

Ouvrir le modèle React TypeScript
Le développeur tourne la manivelle d'une grande boîte à surprise, et une petite carte web en jaillit au bout de son ressort, avec une image et un bouton orange flamme, sous le regard ravi de Play.

Le playground officiel, ou celui-ci ?

Utilisez le playground TypeScript officiel pour lire le JavaScript compilé et essayer d'autres versions et options du compilateur.

Utilisez celui-ci quand votre TypeScript a besoin d'une page, de paquets ou de React :

  • Une page en direct avec HTML et CSS
  • Paquets npm, types compris
  • React et .tsx
  • Plusieurs fichiers qui s'importent entre eux
  • Un lien à partager, et quelqu'un pour modifier avec vous
  • Le chat IA, pour vos questions sur le code

Un outil Playcode Classic

Playcode a vu le jour en 2016 sous la forme d'un environnement de développement dans le navigateur. Ce playground est l'un de ses outils de code gratuits, que nous appelons aujourd'hui Playcode Classic.

Aujourd'hui, Playcode est une plateforme IA pour créer et faire tourner des sites web et des apps.

Découvrir le créateur de sites IATous les outils Playcode Classic
Play, debout devant le portail ouvert d'une vieille aire de jeux, présente ce qui s'étend au-delà : une fusée prête sur son pas de tir.

Questions fréquentes

  • Qu'est-ce qu'un playground TypeScript ?

    Un bac à sable TypeScript, ou TS playground : un endroit où écrire du TypeScript et l'exécuter tout de suite, sans configurer de projet ni de compilateur. Celui-ci exécute votre code dans une page en direct de votre navigateur et vérifie vos types pendant que vous écrivez.

  • Cet éditeur TypeScript en ligne est-il gratuit ?

    Oui. Écrire et exécuter du code est gratuit et ne demande aucun compte. Pour enregistrer et partager, il faut un compte gratuit, qui permet de garder jusqu'à trois projets enregistrés, publics ou privés ; le chat IA consomme des crédits.

  • Quelle version de TypeScript utilise-t-il ?

    L'éditeur vérifie votre code avec TypeScript 5.9. Pour l'exécuter, esbuild le compile en JavaScript sans vérifier les types : une erreur de type n'empêche jamais l'exécution.

  • Vérifie-t-il les types comme tsc ?

    Oui. Il utilise le vérificateur de types de TypeScript lui-même pendant que vous écrivez et souligne les erreurs, avec le mode strict activé et strictNullChecks désactivé.

  • Puis-je voir le JavaScript compilé ?

    Pas encore. Pour lire le JavaScript que produit TypeScript, utilisez le playground TypeScript officiel.

  • Puis-je utiliser des paquets npm ?

    Oui. Importez un paquet et l'éditeur propose de l'installer depuis npm, avec ses définitions de types.

  • Comment ouvrir un fichier .tsx en ligne ?

    Ouvrez le modèle React TypeScript, collez votre composant dans un fichier et affichez-le depuis index.tsx. Il apparaît dans l'aperçu : le playground sert aussi de visualiseur TSX en ligne.

  • Puis-je ouvrir un fichier .tsx sur mon téléphone ?

    Oui, dans le navigateur de votre téléphone, de la même façon. Un code long reste plus confortable sur un grand écran.

  • Prend-il en charge React et JSX ?

    Oui. Les fichiers .tsx et .jsx se compilent dans l'aperçu. Partez du modèle React TypeScript.

  • Ce playground fait-il partie de Playcode ?

    Oui. Ce playground fait partie de Playcode Classic, les outils de code gratuits de Playcode. Playcode a vu le jour en 2016 sous la forme d'un environnement de développement dans le navigateur. C'est aujourd'hui une plateforme IA pour créer et faire tourner des sites web et des apps.

D'autres outils de code gratuits

Écrivez un type. Voyez-le tourner.

Ouvrir le playground
Une fusée attend, porte ouverte et siège libre, et Play vous invite à monter. Tout là-haut, une autre fusée s'éloigne.