Transpilação: o que é, processo e ferramentas de transformação de código

O que é transpilação?

Transpilação (compilação fonte-a-fonte) é o processo de traduzir um programa de uma linguagem de programação para outra mantendo o mesmo nível de abstração. Um transpilador pega o código fonte na linguagem A e gera código equivalente na linguagem B que pode ser executado no ambiente de destino. Exemplos típicos: TypeScript para JavaScript, SASS para CSS, Haxe para múltiplas linguagens de destino.

A transpilação difere da compilação porque o código de saída permanece em um nível alto e pode ser lido por humanos (embora não seja destinado a isso). Um compilador (GCC, LLVM, javac) traduz código para código de máquina ou bytecode — um formato ilegível. Um transpilador gera código que pode ser posteriormente compilado ou minificado.

Por que a transpilação é necessária. A principal razão é a compatibilidade. Os desenvolvedores querem usar linguagens modernas (TypeScript com tipos, Kotlin com null safety), mas a plataforma de destino só suporta JavaScript ou Java. A transpilação permite escrever em uma linguagem moderna enquanto implanta código compreensível para o ambiente de destino.

Transpiladores populares

Transpilação vs compilação: diferenças principais

Nível de abstração é a principal diferença. Um transpilador traduz código entre linguagens do mesmo nível (alto nível → alto nível). Um compilador traduz de alto nível para baixo nível (código de máquina, bytecode). LLVM IR é uma representação intermediária, mas ainda está em nível inferior ao C++ ou Rust original.

Legibilidade do resultado é a segunda diferença. O resultado da transpilação (JavaScript a partir de TypeScript) é legível e pode ser depurado no navegador. O resultado da compilação (código de máquina a partir de C++) não foi feito para leitura — sua análise requer um desmontador. Os source maps ajudam a depurar o código transpilado vinculando-o ao código original.

Transpilação no contexto de CI/CD

Em pipelines de CI/CD, a transpilação é executada na etapa de build. Para projetos TypeScript, tsc ou Babel são executados em um contêiner Docker, geram JavaScript e source maps, que são então minificados e implantados em um servidor ou loja de aplicativos. É importante configurar o cache dos resultados da transpilação — tsc --incremental salva o grafo de dependências entre execuções, reduzindo o tempo de build em 30–50%.

Para projetos móveis (React Native), a transpilação via Metro Bundler é executada no servidor CI a cada publicação. Diretórios de cache (tmp/metro-cache) e builds paralelos via --workers aceleram o processo. GitHub Actions e GitLab CI suportam cache de node_modules e diretórios .cache entre execuções, o que é crítico para reduzir o tempo do pipeline.

Velocidade de execução também difere. A compilação para código de máquina fornece desempenho máximo. A transpilação preserva a sobrecarga do nível de abstração: JavaScript a partir de TypeScript executa na mesma velocidade que JavaScript comum. As otimizações (TypeScript —strict) funcionam na fase de análise, não em tempo de execução.

Cenários populares de transpilação

Cenário 1: TypeScript → JavaScript — o cenário mais comum. O desenvolvedor escreve TypeScript com tipos, o compilador tsc ou Babel remove as anotações de tipo e gera JavaScript puro. Todos os projetos Angular e a maioria dos projetos React (2026) usam transpilação TypeScript. De acordo com o State of JS 2025, 79% dos desenvolvedores pesquisados usam TypeScript em seus projetos principais.

Cenário 2: Kotlin → JavaScript — usado em Kotlin/JS para desenvolvimento full-stack. O código Kotlin compila para JavaScript através do Compilador Kotlin com IR (Intermediate Representation). Kotlin/JS suporta declarações tipadas do TypeScript (.d.ts) para integração com bibliotecas JS externas. A JetBrains usa Kotlin/JS em seus próprios produtos para interfaces web.

Cenário 3: SASS/SCSS → CSS — transpilação de pré-processadores CSS. Dart Sass (a implementação recomendada) transpila .scss para .css, expandindo mixins, variáveis, regras aninhadas e funções. Isso não é compilação (CSS continua sendo CSS), mas transpilação com extensão sintática.

Comparação: Transpilação vs Compilação vs Interpretação

Babel: transpilação de JavaScript moderno

Babel é o transpilador JavaScript mais popular, convertendo código ES6+/ESNext em JavaScript compatível com ES5. O Babel funciona através de um sistema de plugins e presets: cada plugin é responsável por uma transformação (arrow functions, async/await, optional chaining). @babel/preset-env determina automaticamente os plugins necessários com base nos navegadores de destino (browserslist).

A arquitetura do Babel consiste em três etapas: parsing → transformação → geração. O parser (Babylon/@babel/parser) converte o código fonte em uma AST (Abstract Syntax Tree). Os transformadores (plugins) modificam a AST. O gerador (@babel/generator) produz o código de saída a partir da AST modificada.

Exemplo: transpilação com Babel

// Código ES6+ original
const greet = (name = "World") => {
  return `Hello, ${name}!`;
};

class User {
  constructor(name) {
    this.name = name;
  }
}

const data = { user: { address: { city: "Moscow" } } };
const city = data?.user?.address?.city;

// Após Babel (target: > 0.25%, not dead)
"use strict";

var greet = function (name) {
  if (name === void 0) { name = "World"; }
  return "Hello, " + name + "!";
};

var User = function (name) {
  this.name = name;
};

var data = { user: { address: { city: "Moscow" } } };
var city = data != null
  ? data.user != null
    ? data.user.address != null
      ? data.user.address.city
      : void 0
    : void 0
  : void 0;

Babel transformou: a arrow function em uma function expression, o parâmetro padrão (name = "World") em uma verificação void 0, a template string em concatenação, a classe em uma função construtora e o optional chaining (?.) em uma cadeia de operadores ternários. const foi substituído por var para compatibilidade com ES5.

TypeScript: transpilação com sistema de tipos

TypeScript é uma linguagem fortemente tipada que transpila para JavaScript. O compilador tsc (TypeScript Compiler) realiza duas tarefas: verificação de tipos (type checking) e transpilação (emit). É importante entender: a verificação de tipos e a transpilação são etapas independentes. Você pode executar a transpilação sem verificação de tipos (--noEmitOnError false) ou verificar tipos sem gerar código (--noEmit true).

Transpilação TypeScript remove todas as anotações de tipo, interfaces, type aliases e parâmetros genéricos — eles não existem em JavaScript. Enums são convertidos em objetos, decoradores em chamadas de função, async/await em geradores (se target for inferior a ES2017). tsconfig.json controla target (versão do JavaScript), module (sistema de módulos), strict (rigor da verificação de tipos) e outDir (pasta de saída).

Configuração do TypeScript para transpilação

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2015", "dom"],
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

target: "es2015" instrui o tsc a gerar JavaScript com sintaxe ES6 (arrow functions, classes, let/const). module: "esnext" preserva os módulos ES (import/export) para posterior Tree Shaking no Webpack. strict: true ativa todas as verificações de tipo (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true gera arquivos .d.ts para consumidores TypeScript da biblioteca.

Transpilação no desenvolvimento móvel

React Native usa Babel e Metro para transpilar JavaScript/TypeScript em código executável pelo JavaScriptCore (iOS) ou Hermes (Android). Os plugins do Babel adicionam transformação JSX, anotações Flow/TypeScript e otimizações específicas do React Native. O Metro Bundler adicionalmente agrupa os módulos e realiza Hot Module Replacement para desenvolvimento.

Flutter usa transpilação Dart. Para Flutter Web, dart2js transpila Dart em JavaScript otimizado. Para Flutter Mobile, dart2native compila Dart em código ARM nativo. Flutter também suporta o Dart DevCompiler (dartdevc) para desenvolvimento — ele transpila Dart para JavaScript mais rápido, mas com menos otimização.

Exemplo: Configuração do Babel para React Native

// babel.config.js — Transpilação React Native
module.exports = {
  presets: [
    ["module:metro-react-native-babel-preset"],
  ],
  plugins: [
    ["module-resolver", {
      root: ["."],
      alias: {
        "@": "./src",
        "@components": "./src/components",
      },
    }],
    "react-native-reanimated/plugin",
  ],
  env: {
    production: {
      plugins: ["transform-remove-console"],
    },
  },
};

metro-react-native-babel-preset inclui todos os plugins necessários para React Native: JSX, Flow/TypeScript, o sistema de módulos Metro, async/await, class properties e decoradores. O plugin module-resolver adiciona aliases para imports curtos (@/components/Button em vez de ../../components/Button). Em modo de produção, transform-remove-console remove todos os console.log do código.