Guia Completo: Instalação e Configuração do TypeScript

O que é o TypeScript?

O TypeScript é um superset do JavaScript que adiciona tipagem estática ao código, ajudando a evitar erros comuns e tornando o desenvolvimento mais seguro e escalável. Ele é amplamente utilizado em projetos modernos, principalmente quando se trabalha com frameworks como Angular e React.

Instalação do TypeScript

Antes de começarmos a configurar o TypeScript, precisamos instalá-lo. Existem duas formas principais de instalação: local (recomendada) e global.

Instalação Local (Recomendada)

A instalação local garante que o TypeScript seja mantido como uma dependência do projeto, evitando conflitos entre versões em diferentes projetos. Para instalar localmente, execute:

npm install typescript --save-dev

Após a instalação, você pode executar o compilador TypeScript com:

npx tsc --version

Se o comando npx tsc mostrar a versão corretamente, o TypeScript foi instalado com sucesso!

Instalação Global (Opcional)

Se você deseja instalar o TypeScript globalmente no seu sistema, use:

npm install -g typescript

Com isso, o comando tsc ficará disponível globalmente, permitindo compilar arquivos TypeScript sem precisar do npx.

Diferença entre instalação local e global: A instalação global pode causar problemas de compatibilidade caso diferentes projetos utilizem versões distintas do TypeScript. A instalação local evita esses conflitos e garante que cada projeto utilize a versão apropriada.

Criando e Configurando o tsconfig.json

Após instalar o TypeScript, o próximo passo é configurar o projeto para facilitar a compilação dos arquivos. Para isso, criamos um arquivo tsconfig.json usando:

npx tsc --init

Esse comando gera um arquivo tsconfig.json com várias configurações padrão. Esse arquivo controla como o TypeScript será compilado. Algumas configurações importantes:

• rootDir: Define a pasta onde os arquivos TypeScript estão localizados.
• outDir: Define para onde os arquivos compilados (JavaScript) serão enviados.
• strict: Garante que o TypeScript imponha regras mais rígidas para evitar erros.

Configuração Padrão do tsconfig.json

{
"compilerOptions": {
  "target": "ES6",
  "module": "CommonJS",
  "rootDir": "src",
  "outDir": "build",
  "strict": true
}
}

Após definir essas configurações, podemos compilar o TypeScript rodando:

npx tsc

Isso converterá todos os arquivos .ts dentro de src em arquivos .js dentro da pasta build.

Erros Comuns e Como Evitá-los

1. Arquivos não sendo compilados automaticamente

Se você perceber que precisa compilar manualmente sempre que altera um arquivo, pode habilitar o modo watch para compilar automaticamente:

npx tsc --watch

2. Erro "Cannot find module"

Se ao importar módulos você receber um erro como:

Cannot find module 'express' or its corresponding type declarations.

Pode ser necessário instalar os tipos da biblioteca:

npm install @types/express --save-dev

Caso continue ocorrendo, tente adicionar no tsconfig.json:

{
"compilerOptions": {
  "moduleResolution": "node"
}
}

3. Rodar arquivos TypeScript sem precisar compilar

Se quiser executar arquivos TypeScript diretamente sem precisar compilar manualmente para JavaScript, use o ts-node:

npm install -g ts-node

Agora, basta rodar:

ts-node src/index.ts

Isso permite testar rapidamente códigos TypeScript sem precisar transpilá-los antes.

4. Removendo Comentários na Compilação

Se quiser que o código gerado não tenha comentários, edite o tsconfig.json adicionando:

{
"compilerOptions": {
  "removeComments": true
}
}

Dessa forma, comentários dos arquivos TypeScript não aparecerão nos arquivos JavaScript gerados.

Conclusão

Agora você já sabe como instalar e configurar o TypeScript corretamente! Utilizando o tsconfig.json, você pode personalizar a compilação para atender melhor às necessidades do seu projeto. Se quiser testar rapidamente seu código sem compilar, o ts-node pode ser uma ótima alternativa. Além disso, fique atento a possíveis erros e sempre verifique a documentação oficial para mais detalhes.

Com essas informações, você estará pronto para começar a desenvolver com TypeScript de maneira eficiente!

Ficou com alguma dúvida sobre a configuração do TypeScript? Tem alguma dica extra que acha essencial? Comente abaixo, vou adorar trocar ideias com você!

Se este artigo te ajudou, compartilhe com outros devs que também estão começando com TypeScript! Vamos juntos fortalecer a comunidade!

Artigo feito por Vinicius Pereira