TypeScript Academy · Aula

Compilação de TypeScript para JavaScript

Entenda o compilador do TypeScript e sua saída.

Aula 3 de 413 etapas

Compilação de TypeScript para JavaScript é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

Boas-vindas

O TypeScript não pode ser executado diretamente no Node.js ou no navegador. Primeiro, ele precisa ser compilado para JavaScript. Nesta lição, você aprenderá como o compilador do TypeScript funciona.

Instalando o compilador do TypeScript

Instale o TypeScript como uma dependência de desenvolvimento no seu projeto. O comando `tsc` fica disponível nos scripts locais após a instalação.
npm install --save-dev typescript
npx tsc --version

Sua primeira compilação com tsc

Execute `tsc hello.ts` para compilar um único arquivo. Ele gera `hello.js` no mesmo diretório, com todos os tipos removidos.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: a configuração do projeto

Para um projeto real, você precisa de um `tsconfig.json`. Execute `tsc --init` para gerar um. Ele controla o destino, o formato dos módulos, o rigor das verificações, o diretório de saída e muito mais.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Principais opções do tsconfig

Os campos mais importantes do tsconfig são o destino (versão ES da saída), o sistema de módulos, outDir (pasta de saída) e o modo estrito (ativação de todas as verificações estritas).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Modo de observação com tsc --watch

Execute `tsc --watch` para recompilar automaticamente sempre que você salvar um arquivo TypeScript. Isso acelera o ciclo de desenvolvimento.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: verificação de tipos sem gerar arquivos

A opção `noEmit` executa o verificador de tipos sem gravar arquivos de saída. Isso é útil em fluxos de integração contínua que usam um empacotador como Vite ou esbuild para realizar a compilação.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Alternativas mais rápidas: ts-node e tsx

Durante o desenvolvimento, você pode executar o TypeScript diretamente, sem uma etapa de compilação separada, usando `ts-node` ou a ferramenta mais rápida `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Mapas de origem para depuração

Ative `sourceMap: true` para que as ferramentas de desenvolvimento do navegador e os depuradores do Node.js mapeiem as linhas de JS compilado de volta para o código-fonte original em TypeScript.
{ "compilerOptions": { "sourceMap": true } }

Arquivos de declaração (.d.ts)

Com `declaration: true`, o compilador também gera arquivos `.d.ts`. Eles permitem que outros projetos TypeScript usem sua biblioteca com todas as informações de tipos.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Erros do compilador bloqueiam a saída por padrão

Por padrão, se o TypeScript tiver erros de tipos, `tsc` ainda gera o JavaScript, mas termina com um código diferente de zero. Use `noEmitOnError: true` para interromper a geração da saída quando houver erros.
{ "compilerOptions": { "noEmitOnError": true } }

Verificação rápida

O que executar `tsc --noEmit` faz?

Recapitulação

O compilador do TypeScript transforma arquivos .ts em JavaScript. Configure-o com tsconfig.json, use --watch durante o desenvolvimento, --noEmit apenas para verificação de tipos e ts-node/tsx para executar o TypeScript diretamente.
Grátis para começar

Aprenda TypeScript com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
101
Aulas
352

Perguntas Frequentes

A aula “Compilação de TypeScript para JavaScript” é grátis?

Sim — o texto completo de “Compilação de TypeScript para JavaScript” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Compilação de TypeScript para JavaScript”?

Entenda o compilador do TypeScript e sua saída. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Compilação de TypeScript para JavaScript”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Pontos problemáticos do JavaScript: erros em tempo de execução
  2. O que TypeScript adiciona ao JavaScript
  3. Compilação de TypeScript para JavaScript
  4. Quando usar TypeScript em seus projetos
← Voltar para TypeScript Academy