Softonic

Gerador de tsconfig.json

Etapa 1 / 2
Resultados

tsconfig.json tem bem mais de cem opções de compilador e cada tutorial de TypeScript mostra uma combinação diferente. Este gerador se limita às que importam para a maioria dos projetos: target, module, moduleResolution, jsx, as flags booleanas mais comuns (strict, esModuleInterop, skipLibCheck e companhia) e as pastas outDir/rootDir. A prévia do tsconfig.json é atualizada ao vivo a cada mudança; copie para a raiz do projeto e você terá uma configuração limpa, sem as opções mortas que a maioria dos boilerplates carrega.

Como a configuração é construída

  1. 1

    Escolha target e module

    A versão de JavaScript que o tsc emite (de ES2015 a ES2023, ou ESNext) e o sistema de módulos (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    Defina moduleResolution e JSX

    bundler para projetos com Vite/webpack, node16/nodenext para Node moderno, node ou classic para setups antigos. Coloque jsx em react-jsx para React moderno, ou deixe em none para omitir a chave.

  3. 3

    Ligue e desligue as flags

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap e forceConsistentCasingInFileNames como caixas de seleção simples.

  4. 4

    Defina as pastas

    outDir e rootDir, pré-preenchidas com ./dist e ./src. include e exclude são fixos: src/**/* mais node_modules e dist.

  5. 5

    Copie o tsconfig gerado

    A prévia JSON é atualizada ao vivo; um clique copia tudo, pronto para virar o tsconfig.json na raiz do projeto.

As opções que este gerador escreve

Opção Padrão aqui O que faz
target ES2022 Versão de JavaScript do código emitido. ES2022 é segura para navegadores e Node atuais; escolha um target mais antigo só para ambientes legados.
module ESNext Sintaxe de módulos da saída. Use NodeNext/Node16 para projetos Node com ESM e CommonJS para Node legado.
moduleResolution node Como os imports são localizados. Prefira bundler com Vite/webpack/esbuild e node16/nodenext com Node moderno; node (node10) é o comportamento antigo.
jsx omitida Só é escrita quando você escolhe um modo. react-jsx para React 17+, preserve quando um bundler transforma o JSX.
strict true Liga toda a família de verificações estritas. Mantenha ligada em projetos novos.
esModuleInterop true Corrige imports default de pacotes CommonJS.
skipLibCheck true Pula a checagem de tipos dos .d.ts; compilação bem mais rápida e raramente esconde bugs reais.
forceConsistentCasingInFileNames true Rejeita imports com maiúsculas/minúsculas diferentes do arquivo no disco (a quebra clássica ao ir de macOS para Linux).
resolveJsonModule true Permite import data from "./data.json".
allowJs false Aceita arquivos .js na compilação; útil no meio de uma migração.
declaration false Emite arquivos .d.ts; ative ao publicar uma biblioteca.
sourceMap false Emite arquivos .js.map para depuração.
outDir / rootDir ./dist / ./src Para onde vai o código compilado e onde ficam os fontes.
baseUrl "." Sempre é escrita, para que um bloco paths adicionado à mão resolva a partir da raiz do projeto.

A saída padrão exata

Deixe todos os controles como estão e este é o arquivo que você recebe:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

Escolha um modo de jsx diferente de none e uma entrada "jsx" é acrescentada a compilerOptions.

Modo strict: o que ele realmente ativa

strict: true é uma flag guarda-chuva que liga toda a família strict, incluindo noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables e alwaysStrict. Projetos novos devem começar com tudo ligado: acrescentar rigor depois é doloroso.

Erros comuns

  • Definir module: "CommonJS" para um projeto Node com ESM. Se o seu package.json diz "type": "module", use NodeNext tanto em module quanto em moduleResolution.
  • Usar tsc como bundler. Ele é um compilador e verificador de tipos. Use Vite/esbuild/SWC para builds e tsc --noEmit para checagens.
  • Compilar tudo. Sem uma lista include, o TypeScript pega todo .ts que enxerga. A configuração gerada sempre escreve include: ["src/**/*"] e exclui node_modules e dist, então você está coberto.
  • Precisar de mais do que a configuração oferece. Este gerador é minimalista de propósito. Opções como lib, paths, isolatedModules ou noEmit são fáceis de acrescentar à mão depois que o arquivo base está no lugar.

Perguntas frequentes

Em monorepos e projetos multipacote, sim: um arquivo base com as opções comuns e cada pacote estendendo via “extends”. Para um repositório de projeto único, um único tsconfig.json como o gerado é mais simples.

Introduzido no TypeScript 5.0 para projetos construídos com Vite, webpack ou esbuild. Ele reflete como os bundlers resolvem imports na prática, sem as regras de extensão de arquivo do ESM de node16/nodenext. Para código executado diretamente pelo Node, prefira node16 ou nodenext.

Não há um controle dedicado. Mas o arquivo gerado sempre define baseUrl como “.”, então você pode colar um bloco paths logo abaixo, por exemplo “@/*”: [“src/*”], e ele resolverá a partir da raiz do projeto.

Geralmente não, e por isso este gerador a omite: target implica um conjunto compatível de tipos de biblioteca. Sobrescreva lib à mão apenas em casos especiais, como APIs do DOM em um projeto Node ou tipos de WebWorker.

Não precisa de cadastro e nada é salvo. Suas seleções são usadas apenas para renderizar a prévia da configuração e, na visualização passo a passo, também viajam na URL da página, o que facilita salvar nos favoritos ou compartilhar uma configuração pronta.

Ferramentas relacionadas

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de Configuração Nginx

Gere blocos de servidor Nginx com TLS, HTTP/2, gzip, cache de navegador e regras de proxy reverso a partir de um formulário simples.

Ferramenta disponível em outros idiomas