M

MLOG

Português

Domine a configuração do TypeScript com este guia do tsconfig.json. Aprenda sobre opções do compilador, setup de projetos e configurações avançadas.

Configuração do TypeScript: Um Guia Abrangente do tsconfig.json

O TypeScript, um superset do JavaScript, traz a tipagem estática para o mundo dinâmico do desenvolvimento web. Um arquivo tsconfig.json bem configurado é crucial para aproveitar todo o poder do TypeScript. Este guia oferece uma visão abrangente do tsconfig.json, cobrindo opções essenciais do compilador, configuração de projetos e configurações avançadas.

O que é o tsconfig.json?

O arquivo tsconfig.json é um arquivo de configuração que especifica as opções do compilador para um projeto TypeScript. Ele informa ao compilador do TypeScript como transpilar o código TypeScript para JavaScript. Este arquivo é essencial para definir a estrutura do projeto, estabelecer regras de compilação e garantir a consistência em toda a equipe de desenvolvimento, esteja essa equipe localizada em um único escritório ou distribuída por múltiplos continentes.

Criando um Arquivo tsconfig.json

Para criar um arquivo tsconfig.json, navegue até o diretório raiz do seu projeto no terminal e execute o seguinte comando:

tsc --init

Este comando gera um arquivo tsconfig.json básico com as opções de compilador mais comuns. Você pode então personalizar o arquivo para atender aos requisitos específicos do seu projeto. Um tsconfig.json típico incluirá opções como compilerOptions, include e exclude.

Opções Essenciais do Compilador

A seção compilerOptions é o coração do arquivo tsconfig.json. Ela contém uma vasta gama de opções que controlam o comportamento do compilador TypeScript. Aqui estão algumas das opções de compilador mais importantes:

target

A opção target especifica a versão alvo do ECMAScript para o código JavaScript gerado. Valores comuns incluem ES5, ES6 (ES2015), ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Escolher o alvo correto é crucial para garantir a compatibilidade com o ambiente de execução pretendido, como navegadores ou versões do Node.js.

Exemplo:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

module

A opção module especifica o estilo de geração de código do módulo. Valores comuns incluem CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 e ESNext. A escolha do sistema de módulos depende do ambiente de destino e do empacotador de módulos usado (ex: Webpack, Rollup, Parcel). Para Node.js, CommonJS é frequentemente usado, enquanto para aplicações web modernas, ES6 ou ESNext com um empacotador de módulos é o preferido. Usar ESNext permite que os desenvolvedores aproveitem os recursos e otimizações mais recentes, enquanto confiam no empacotador para lidar com o formato final do módulo.

Exemplo:

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

lib

A opção lib especifica uma lista de arquivos de biblioteca a serem incluídos na compilação. Esses arquivos de biblioteca fornecem definições de tipo para APIs JavaScript nativas e APIs de navegador. Valores comuns incluem ES5, ES6, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext, DOM, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Generator, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.Intl, ES2017.SharedMemory, ES2017.String, ES2017.TypedArrays, ES2018.Intl, ES2018.Promise, ES2018.RegExp, ES2019.Array, ES2019.Object, ES2019.String, ES2019.Symbol, ES2020.BigInt, ES2020.Promise, ES2020.String, ES2020.Symbol.WellKnown, ES2021.Promise, ES2021.String, ES2021.WeakRef, ES2022.Error, ES2022.Object, ES2022.String, e muitos mais. Selecionar as bibliotecas apropriadas garante que o compilador TypeScript tenha as informações de tipo necessárias para o ambiente de destino. Usar a biblioteca DOM permite que o projeto compile código que usa APIs específicas do navegador sem erros de tipo.

Exemplo:

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

allowJs

A opção allowJs permite que o compilador TypeScript compile arquivos JavaScript juntamente com arquivos TypeScript. Isso é útil para migrar projetos JavaScript existentes para TypeScript de forma incremental. Definir isso como true permite que o compilador processe arquivos .js, possibilitando uma adoção gradual do TypeScript dentro de um projeto.

Exemplo:

{
  "compilerOptions": {
    "allowJs": true
  }
}

jsx

A opção jsx especifica como a sintaxe JSX deve ser tratada. Valores comuns incluem preserve, react, react-native e react-jsx. preserve mantém a sintaxe JSX na saída, enquanto react transforma JSX em chamadas React.createElement. react-jsx usa a nova transformação JSX introduzida no React 17, que não requer a importação do React. Escolher a opção JSX correta é crucial para projetos que usam React ou outras bibliotecas baseadas em JSX.

Exemplo:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

declaration

A opção declaration gera os arquivos de declaração .d.ts correspondentes para cada arquivo TypeScript. Os arquivos de declaração contêm informações de tipo e são usados por outros projetos TypeScript para consumir o código compilado. Gerar arquivos de declaração é essencial para criar bibliotecas e módulos reutilizáveis. Esses arquivos permitem que outros projetos TypeScript entendam os tipos e interfaces expostos pela biblioteca sem a necessidade de compilar o código-fonte original.

Exemplo:

{
  "compilerOptions": {
    "declaration": true
  }
}

sourceMap

A opção sourceMap gera arquivos de mapa de código-fonte (source maps), que mapeiam o código JavaScript gerado de volta para o código TypeScript original. Os mapas de código-fonte são essenciais para depurar código TypeScript em navegadores e outros ambientes. Quando um erro ocorre no código JavaScript, o mapa de código-fonte permite ao desenvolvedor ver o código TypeScript correspondente no depurador, facilitando a identificação e correção do problema.

Exemplo:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

A opção outDir especifica o diretório de saída para os arquivos JavaScript gerados. Esta opção ajuda a organizar a saída de compilação do projeto, separando o código-fonte do código compilado. Usar um outDir facilita o gerenciamento do processo de build e a implantação da aplicação.

Exemplo:

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

rootDir

A opção rootDir especifica o diretório raiz do projeto TypeScript. O compilador usa este diretório como base para resolver os nomes dos módulos. Esta opção é particularmente importante para projetos com uma estrutura de diretórios complexa. Definir o rootDir corretamente garante que o compilador possa encontrar todos os módulos e dependências necessários.

Exemplo:

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

strict

A opção strict habilita todas as opções de verificação de tipo estrita. Isso é altamente recomendado para novos projetos TypeScript, pois ajuda a capturar erros potenciais no início do processo de desenvolvimento. Habilitar o modo estrito impõe regras de verificação de tipo mais rigorosas, resultando em um código mais robusto e de fácil manutenção. É uma boa prática habilitar o modo estrito em todos os novos projetos TypeScript.

Exemplo:

{
  "compilerOptions": {
    "strict": true
  }
}

esModuleInterop

A opção esModuleInterop permite a interoperabilidade entre módulos CommonJS e ES. Isso é importante para projetos que usam ambos os tipos de módulos. Quando esModuleInterop está habilitado, o TypeScript lida automaticamente com as diferenças entre os módulos CommonJS e ES, facilitando a importação e exportação de módulos entre os dois sistemas. Esta opção é particularmente útil ao trabalhar com bibliotecas de terceiros que podem usar sistemas de módulos diferentes.

Exemplo:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

moduleResolution

A opção moduleResolution especifica como o TypeScript resolve as importações de módulos. Valores comuns incluem Node e Classic. A estratégia de resolução de módulos Node é o padrão e é baseada no algoritmo de resolução de módulos do Node.js. A estratégia de resolução de módulos Classic é mais antiga e menos utilizada. Usar a estratégia de resolução de módulos Node garante que o TypeScript possa resolver corretamente as importações de módulos em um ambiente Node.js.

Exemplo:

{
  "compilerOptions": {
    "moduleResolution": "Node"
  }
}

baseUrl e paths

As opções baseUrl e paths são usadas para configurar a resolução de módulos para importações de módulos não relativas. A opção baseUrl especifica o diretório base para resolver nomes de módulos não relativos. A opção paths permite mapear nomes de módulos para locais específicos no sistema de arquivos. Essas opções são particularmente úteis para projetos com uma estrutura de diretórios complexa e para simplificar as importações de módulos. Usar baseUrl e paths pode tornar o código mais legível e de fácil manutenção.

Exemplo:

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

Opções Include e Exclude

As opções include e exclude especificam quais arquivos devem ser incluídos na compilação e quais arquivos devem ser excluídos. Essas opções usam padrões glob para corresponder aos nomes dos arquivos. Usar include e exclude permite controlar quais arquivos são processados pelo compilador TypeScript, melhorando o desempenho da compilação e reduzindo erros. É uma boa prática especificar explicitamente os arquivos a serem incluídos na compilação.

Exemplo:

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Opção Extends

A opção extends permite herdar opções do compilador de outro arquivo tsconfig.json. Isso é útil para compartilhar configurações comuns entre múltiplos projetos ou para criar configurações base. Usar a opção extends promove a reutilização de código e reduz a duplicação. É uma boa prática criar configurações base e estendê-las em projetos individuais.

Exemplo:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

Configurações Avançadas

Além das opções essenciais do compilador, o tsconfig.json suporta configurações avançadas para cenários especializados.

Compilação Incremental

Para projetos grandes, a compilação incremental pode melhorar significativamente os tempos de build. O TypeScript pode armazenar em cache os resultados de compilações anteriores e recompilar apenas os arquivos que foram alterados. Habilitar a compilação incremental pode reduzir drasticamente os tempos de build para projetos grandes. Isso é particularmente importante para projetos com um grande número de arquivos e dependências.

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}

Referências de Projeto

As referências de projeto permitem estruturar grandes projetos TypeScript em módulos menores e independentes. Isso pode melhorar os tempos de build e a organização do código. Usar referências de projeto pode tornar projetos grandes mais gerenciáveis e fáceis de manter. É uma boa prática usar referências de projeto para projetos grandes e complexos.

{
  "compilerOptions": {
    "composite": true
  },
  "references": [
    { "path": "./module1" },
    { "path": "./module2" }
  ]
}

Definições de Tipo Personalizadas

Às vezes, você pode precisar fornecer definições de tipo para bibliotecas JavaScript que não as possuem. Você pode criar arquivos .d.ts personalizados para definir os tipos para essas bibliotecas. Criar definições de tipo personalizadas permite que você use bibliotecas JavaScript em seu código TypeScript sem sacrificar a segurança de tipo. Isso é particularmente útil ao trabalhar com código JavaScript legado ou bibliotecas que não fornecem suas próprias definições de tipo.

// custom.d.ts
declare module 'my-library' {
  export function doSomething(x: number): string;
}

Melhores Práticas

Solucionando Problemas Comuns

Configurar o tsconfig.json pode, por vezes, ser desafiador. Aqui estão alguns problemas comuns e suas soluções:

Problemas de Resolução de Módulos

Se você encontrar erros de resolução de módulos, certifique-se de que a opção moduleResolution está configurada corretamente e que as opções baseUrl e paths estão devidamente ajustadas. Verifique novamente os caminhos especificados na opção paths para garantir que estão corretos. Verifique se todos os módulos necessários estão instalados no diretório node_modules.

Erros de Tipo

Erros de tipo podem ocorrer se as definições de tipo estiverem incorretas ou ausentes. Certifique-se de que você tem as definições de tipo corretas instaladas para todas as bibliotecas que está usando. Se estiver usando uma biblioteca JavaScript que não possui definições de tipo, considere criar definições de tipo personalizadas.

Erros de Compilação

Erros de compilação podem ocorrer se houver erros de sintaxe ou de tipo em seu código TypeScript. Revise as mensagens de erro cuidadosamente e corrija quaisquer erros de sintaxe ou de tipo. Garanta que seu código siga as convenções de codificação do TypeScript.

Conclusão

Um arquivo tsconfig.json bem configurado é essencial para o sucesso de um projeto TypeScript. Ao entender as opções essenciais do compilador e as configurações avançadas, você pode otimizar seu fluxo de trabalho de desenvolvimento, melhorar a qualidade do código e garantir a compatibilidade com o ambiente de destino. Investir tempo na configuração adequada do tsconfig.json valerá a pena a longo prazo, reduzindo erros, melhorando a manutenibilidade e agilizando o processo de build. Isso resulta em um desenvolvimento de software mais eficiente e confiável. As informações fornecidas aqui são projetadas para serem universalmente aplicáveis e devem fornecer uma base sólida para iniciar um novo projeto com TypeScript.

Lembre-se de consultar a documentação oficial do TypeScript para obter as informações mais atualizadas e explicações detalhadas de todas as opções de compilador disponíveis. A documentação do TypeScript é um recurso valioso para entender as complexidades da configuração do TypeScript.

Configuração do TypeScript: Um Guia Abrangente do tsconfig.json | MLOG