Converter TypeScript em JavaScript — Numio
Remova os tipos do TypeScript (anotações, interfaces, aliases de tipo e genéricos) e obtenha JavaScript puro. Funciona com .ts e .tsx: o JSX é mantido como está, então um componente TSX vira JSX. O código é convertido no servidor; nada é checado quanto a tipos, empacotado ou executado.
Ver como um trecho de TypeScript fica em JavaScript puro antes de usá-lo em um projeto JS.
Code is converted on the server. No type-checking, execution or dependency bundling is performed. JSX is preserved.
TypeScript
JavaScript
Quando usar
- Ver como um trecho de TypeScript fica em JavaScript puro antes de usá-lo em um projeto JS.
- Transformar um componente React .tsx em .jsx removendo os tipos das props e mantendo o JSX.
Como usar
- Cole TypeScript ou TSX, ou carregue um exemplo (interface e função, genéricos, JSX). Carregar um exemplo substitui sua entrada.
- Leia o JavaScript à direita. Anotações de tipo e interfaces somem; código que existe em tempo de execução, como um enum, é emitido como JavaScript.
- Copie o resultado. Se precisar de segurança de tipos, cheque os tipos do TypeScript original separadamente com tsc --noEmit.
Entrada TypeScript
interface User { name: string }
const greet = (user: User): string => "Hello, " + user.name;Saída JavaScript
const greet = (user) => "Hello, " + user.name
Detalhes e limitações
Seu código é enviado ao servidor do douni.one para ser convertido. Não cole segredos, chaves de API nem código-fonte que você não possa compartilhar.
Remover tipos não é checar tipos: const count: number = "text" é convertido sem erro. Cheque os tipos com o compilador TypeScript.
JSX continua JSX. Para rodar componentes React em um navegador, você ainda precisa da etapa de build de JSX do seu projeto.
Construções com valores em tempo de execução, como enum, produzem código JavaScript em vez de sumir.
Só o código colado é convertido: imports não são resolvidos, arquivos não são empacotados e a sintaxe moderna não é transpilada para navegadores antigos.
FAQ
Posso converter TSX em JSX?
Sim. Cole o componente .tsx: os tipos das props e as interfaces são removidos e o JSX fica inalterado, então o resultado pode ser salvo como .jsx. Compilar JSX em chamadas React.createElement não faz parte desta ferramenta.
Qual a diferença em relação a rodar o tsc?
O tsc checa os tipos de um projeto inteiro e pode emitir JavaScript para um target escolhido. Esta página só remove os tipos do código que você cola com o transform TypeScript do Babel, mantém a sintaxe moderna e nunca reporta erros de tipo. Para projetos inteiros, rode o tsc ou um bundler como o esbuild localmente.
Por que ele converteu código com erros de tipo?
A conversão é sintática. Ela não verifica atribuições nem chamadas de função contra seus tipos, então rode o compilador TypeScript no seu projeto para encontrar erros de tipo.
O que devo verificar quando recebo um erro de sintaxe?
Veja a linha e a coluna informadas, os colchetes e parênteses ao redor e qualquer anotação de tipo naquele ponto. Reduzir o código a um trecho pequeno ajuda a isolar o problema; para um erro de conexão, use Retry.