Começar a criar

Playcode Classic

Playground de TypeScript

Este playground de TypeScript roda TypeScript online, numa página ao vivo no seu navegador. Os erros de tipo ficam sublinhados enquanto você escreve, os pacotes do npm vêm com os tipos e os componentes React .tsx aparecem na prévia. Não precisa configurar nada nem criar conta para começar; entre na sua conta para salvar e compartilhar. Faz parte do Playcode Classic, o conjunto de ferramentas de código gratuitas do Playcode.

Abrir o playground

Grátis. Não precisa de conta para começar.

Na caixa de areia de um parquinho, o Play empurra um grande bloco quadrado contra o buraco redondo de um enorme brinquedo de encaixar formas, feito de madeira; o bloco não entra, e uma linha ondulada vermelha brilha embaixo do buraco. Um desenvolvedor na beirada da caixa de areia ri diante do notebook.

Os erros de tipo aparecem enquanto você escreve

O editor verifica os seus tipos com o TypeScript 5.9 e sublinha o que está errado; passe o mouse por cima para ver o motivo. A verificação nunca impede a execução, então você pode testar uma ideia antes de tipar tudo.

Prefere descrever um site em vez de programar? Use o criador de sites com IA do Playcode
Na areia, uma fileira de blocos de madeira forma uma linha de código, todos cubos menos um triângulo; o Play, com um giz vermelho na mão, desenhou uma linha ondulada embaixo do triângulo, e o desenvolvedor aponta para ela da beirada da caixa de areia.

Os pacotes chegam com os tipos

Importe um pacote e o editor oferece para instalá-lo do npm. As definições de tipos vêm junto, então o autocompletar conhece cada função e o verificador conhece cada argumento.

Numa mesa de piquenique, o desenvolvedor encaixa uma ferramenta nova no único recorte de espuma de uma maleta aberta que tem exatamente o formato dela, e o Play, em cima da mesa ao lado dele, junta as mãos, encantado.

Tem um arquivo .tsx? Veja na prévia.

Abra o template React com TypeScript, cole o componente num arquivo e renderize pelo index.tsx. Ele aparece na prévia, e os botões funcionam.

Abrir o template React com TypeScript
O desenvolvedor gira a manivela de uma grande caixa-surpresa, e um pequeno card da web salta na mola, com uma imagem e um botão laranja-fogo, enquanto o Play assiste, encantado.

O playground oficial ou este?

Use o playground oficial do TypeScript para ler o JavaScript compilado e testar outras versões e opções do compilador.

Use este quando o seu TypeScript precisar de uma página, de pacotes ou de React:

  • Uma página ao vivo com HTML e CSS
  • Pacotes do npm, com os tipos
  • React e .tsx
  • Vários arquivos que importam uns aos outros
  • Um link para compartilhar e alguém para editar com você
  • O chat com IA, para tirar dúvidas sobre o seu código

Faz parte do Playcode Classic

O Playcode começou em 2016 como um ambiente de programação no navegador. Este playground é uma das ferramentas de código gratuitas do Playcode, que hoje chamamos de Playcode Classic.

Hoje, o Playcode é uma plataforma de IA para criar sites e apps e mantê-los no ar.

Conheça o criador de sites com IATodas as ferramentas do Playcode Classic
O Play está no portão aberto de um velho parquinho e mostra o que há do outro lado: um foguete pronto na plataforma de lançamento.

Perguntas frequentes

  • O que é um playground de TypeScript?

    Um sandbox de TypeScript, ou TS playground: um lugar para escrever TypeScript e rodar na hora, sem configurar um projeto ou um compilador. Este roda o seu código numa página ao vivo no navegador e verifica os seus tipos enquanto você escreve.

  • Este editor de TypeScript online é grátis?

    Sim. Escrever e rodar código é grátis e não exige conta. Para salvar e compartilhar, você precisa de uma conta gratuita, que guarda até três projetos salvos, públicos ou privados; o chat com IA usa créditos.

  • Qual versão do TypeScript o playground usa?

    O editor verifica o seu código com o TypeScript 5.9. Para rodar, o esbuild compila o código para JavaScript sem verificar os tipos, então um erro de tipo nunca impede a execução.

  • O editor verifica os tipos como o tsc?

    Sim. Ele roda o próprio verificador do TypeScript enquanto você escreve e sublinha os erros, com o modo strict ligado e o strictNullChecks desligado.

  • Dá para ver o JavaScript compilado?

    Ainda não. Para ler o JavaScript que o TypeScript gera, use o playground oficial do TypeScript.

  • Posso usar pacotes do npm?

    Sim. Importe um pacote e o editor oferece para instalá-lo do npm, com as definições de tipos.

  • Como abrir um arquivo .tsx online?

    Abra o template React com TypeScript, cole o componente num arquivo e renderize pelo index.tsx. Ele aparece na prévia, então o playground também serve como visualizador de TSX online.

  • Posso abrir um arquivo .tsx no celular?

    Sim, no navegador do celular, do mesmo jeito. Códigos mais longos ficam mais fáceis numa tela maior.

  • Funciona com React e JSX?

    Sim. Arquivos .tsx e .jsx são compilados na prévia. Comece pelo template React com TypeScript.

  • Este playground faz parte do Playcode?

    Sim. Este playground faz parte do Playcode Classic, o conjunto de ferramentas de código gratuitas do Playcode. O Playcode começou em 2016 como um ambiente de programação no navegador. Hoje, é uma plataforma de IA para criar sites e apps e mantê-los no ar.

Mais ferramentas de código gratuitas

Escreva um tipo. Veja o código rodar.

Abrir o playground
Um foguete espera com a porta aberta e um assento vazio, e o Play convida você a entrar. Lá no alto, outro foguete se afasta.