Frontend Academy · Aula

Compilando TS e tsconfig.json

Execute tsc para compilar TypeScript e configure o compilador com opções de tsconfig.json, como strict, target e outDir.

Compilando TS e tsconfig.json é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Instalando o compilador do TypeScript

Instale o TypeScript como uma dependência de desenvolvimento. A CLI tsc compila arquivos TypeScript. Com Vite ou Next.js, o empacotador cuida da compilação — mas tsc ainda é usado para a verificação de tipos.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Inicializando tsconfig.json

Execute npx tsc --init para gerar um tsconfig.json com todas as opções comentadas e valores padrão adequados. Esse arquivo é a configuração única do compilador do TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

A estrutura de tsconfig.json

As principais seções são: compilerOptions (comportamento do compilador), include (quais arquivos compilar) e exclude (arquivos a ignorar).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

destino — versão de saída do JavaScript

target especifica qual versão do JavaScript o tsc produz. ES2022 ou ESNext para ambientes modernos. ES5 para máxima compatibilidade (geralmente isso é tratado pelo Babel).

módulo — sistema de módulos

module controla o formato de módulos da saída. CommonJS para Node.js. ESNext ou ES2022 para empacotadores (Vite, webpack). NodeNext para Node.js moderno com type:module em package.json.

estrito — a sinalização de rigor

"strict": true habilita um conjunto de verificações rigorosas: strictNullChecks, noImplicitAny, strictFunctionTypes e outras. Habilite-o sempre em projetos novos — ele detecta a maioria dos erros.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — eliminando erros de nulo

Com strictNullChecks habilitado, null e undefined não podem ser atribuídos a outros tipos, a menos que sejam incluídos explicitamente em uma união. Isso obriga o tratamento dos casos nulos.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir e rootDir

outDir especifica onde os arquivos JS compilados são colocados. rootDir define a raiz dos arquivos TypeScript de origem. Juntos, eles reproduzem a estrutura de origem dentro de dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

caminhos — nomes alternativos de módulos

Configure nomes alternativos de caminhos com a opção paths (e baseUrl). Isso permite importar @/components/Button em vez de ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Modo de observação e somente verificação de tipos

tsc --watch recompila quando os arquivos são alterados. tsc --noEmit executa a verificação de tipos sem gerar arquivos — é útil na CI para validar os tipos sem duplicar o trabalho do empacotador.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Estendendo tsconfig.json

Use extends para herdar de uma configuração base. Configurações base compartilhadas (como @tsconfig/strictest) fornecem boas práticas da comunidade.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Verificação rápida

Qual opção do tsconfig habilita o conjunto completo de verificações rigorosas de tipos?

Recapitulação: tsconfig.json

tsc compila TypeScript para JavaScript. tsconfig.json controla o destino (versão ES de saída), o módulo (sistema de módulos), outDir, strict e paths. strict: true detecta a maioria dos erros. Use --noEmit na CI para uma verificação exclusiva de tipos. Estenda configurações base da comunidade para seguir boas práticas.

Perguntas Frequentes

A aula “Compilando TS e tsconfig.json” é grátis?

Sim — o texto completo de “Compilando TS e tsconfig.json” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Compilando TS e tsconfig.json”?

Execute tsc para compilar TypeScript e configure o compilador com opções de tsconfig.json, como strict, target e outDir. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 4 de 4.

Quanto tempo leva a aula “Compilando TS e tsconfig.json”?

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 Frontend Academy?

Sim. Cada aula de Frontend 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

Por que TypeScript: tipos detectam erros em tempo de compilação
Tipos primitivos, uniões e aliases de tipos
Interfaces e tipos de objetos
Compilando TS e tsconfig.json

← Voltar para Frontend Academy