O que é um runner de TypeScript?

TypeScript é JavaScript com tipos. Você descreve a estrutura dos seus dados com interfaces e anotações de tipo, e o compilador do TypeScript transforma o código em JavaScript puro antes de executá-lo. Experimentar algumas linhas geralmente significa configurar um projeto, um compilador e um arquivo de configuração. Um runner de TypeScript elimina tudo isso. Você escreve o código, executa e lê o que ele imprime com console.log.

Descrição da ferramenta

Esta ferramenta executa seu TypeScript no navegador e mostra tudo o que o código escreve no console. Digite ou cole o código à esquerda e pressione Executar, ou pressione Ctrl+Enter (Cmd+Enter no Mac). A saída aparece à direita, uma linha para cada chamada de console, com avisos e erros destacados em cores. Nada é executado até que você solicite, então você pode editar livremente.

O código é compilado pelo compilador oficial do TypeScript e executado em um Web Worker, que é uma thread em segundo plano do navegador. Por isso, um script que nunca termina não congelará a página: pressione Parar e ele será encerrado. Seu código não é enviado para um servidor.

Exemplos

Descreva dados com uma interface e trabalhe com eles:

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "Livro", price: 12 },
  { name: "Caneta", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`Total: ${total}`);
TypeScript

A saída é:

Total: 13.5

Use um enum e uma classe com propriedades parametrizadas:

enum Level {
  Low = "baixo",
  High = "alto",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title} (${this.level})`;
  }
}

console.log(new Task("Escrever testes", Level.High).describe());
TypeScript

A saída é:

Escrever testes (alto)

Recursos

  • Executa TypeScript com o compilador oficial, portanto toda a sintaxe do TypeScript é compatível
  • É compatível com enums, namespaces, decorators, generics e propriedades parametrizadas
  • Mostra erros de sintaxe com a linha e a coluna, no mesmo formato do tsc
  • Mostra a saída de console.log, info, debug, warn e error, com cores para avisos e erros
  • Formata objetos, arrays, mapas, conjuntos, classes, datas e erros, além de lidar com referências circulares
  • É compatível com console.group, count, time, assert, dir e clear
  • Executa código assíncrono, incluindo await no nível superior, timers e promises
  • Relata erros não capturados e rejeições de promises não tratadas na saída
  • Botão Parar que encerra um script imediatamente, mesmo quando ele está preso em um loop infinito
  • A opção Preservar logs, ativada por padrão, mantém a saída de execuções anteriores para que você possa comparar os resultados
  • Passe o mouse sobre uma linha da saída para ver a data e a hora em que ela foi registrada
  • Copie toda a saída, limpe-a com o botão Limpar ou baixe seu código como um arquivo

Como funciona

Quando você pressiona Executar, o compilador do TypeScript remove os tipos do seu código e o transforma em JavaScript. O compilador é carregado uma vez quando a página é aberta, portanto a primeira execução pode demorar um pouco em uma conexão lenta. Se o código tiver um erro de sintaxe, o erro será exibido e o código não será executado.

Em seguida, o JavaScript é enviado para um novo Web Worker. Dentro do worker, os métodos de console são substituídos, de modo que cada chamada seja transformada em texto e enviada de volta à página. Seu código é envolvido em uma função assíncrona, o que permite usar await no nível superior.

A barra de status abaixo da saída mostra Executando enquanto seu código está sendo compilado, executado ou aguardando um timer iniciado por ele. Um setInterval mantém a execução ativa até que você o limpe ou pressione Parar. Cada execução começa com um worker novo, portanto as variáveis de uma execução anterior nunca são mantidas.

Dicas

  • Os tipos não são verificados. Assim como tsx e esbuild, a ferramenta os remove e executa o código, portanto const count: number = "três" é executado sem erro
  • Use console.log, não uma expressão final: o valor da última linha não é impresso, portanto 1 + 2 sozinho não mostra nada
  • Você pode manter instruções de exportação e imports somente de tipo no código. A importação de um pacote não funciona e falha com um erro "Não foi possível encontrar o módulo"
  • Um worker não tem uma página, portanto document, window e outros objetos do DOM não estão disponíveis. Use self para o escopo global
  • A saída mantém as 1000 linhas mais recentes, e uma única linha é cortada após 10000 caracteres
  • Execute apenas código em que você confia, como faria no console do navegador