Instalando e configurando o compilador tsc

O TypeScript é um superset do JavaScript que adiciona tipagem estática e outros recursos poderosos à linguagem. Para começar a utilizá-lo, é essencial instalar e configurar corretamente o compilador tsc. Este artigo guiará você por todo o processo, desde a instalação dos pré-requisitos até as boas práticas de configuração para projetos reais.

1. Pré-requisitos e Instalação do Node.js

O TypeScript é executado sobre o Node.js, portanto, o primeiro passo é garantir que o Node.js e o npm (Node Package Manager) estejam instalados no seu sistema.

Para verificar se já estão instalados, execute:

node --version
npm --version

Se não estiverem instalados, você pode utilizar um gerenciador de versões como o nvm (Node Version Manager) no Linux/macOS ou chocolatey no Windows:

# Linux/macOS com nvm
nvm install node
nvm use node

# Windows com chocolatey
choco install nodejs

No Ubuntu/Debian, também é possível usar o apt:

sudo apt update
sudo apt install nodejs npm

Após a instalação, confirme com:

node --version
npm --version

2. Instalação do TypeScript via npm

Com o Node.js pronto, podemos instalar o TypeScript. Existem duas abordagens principais: instalação global ou local.

Instalação global (recomendada para uso geral):

npm install -g typescript

Instalação local (como dependência de desenvolvimento de um projeto específico):

npm init -y
npm install --save-dev typescript

A instalação local é preferível em projetos colaborativos, pois garante que todos os desenvolvedores utilizem a mesma versão do TypeScript. Para verificar se a instalação foi bem-sucedida:

tsc --version

3. Primeiros passos com o compilador tsc

Vamos criar um arquivo TypeScript simples para testar o compilador. Crie um arquivo hello.ts:

function saudacao(nome: string): string {
    return `Olá, ${nome}!`;
}

const mensagem = saudacao("TypeScript");
console.log(mensagem);

Compile-o com:

tsc hello.ts

Isso gerará um arquivo hello.js com o código JavaScript equivalente. Perceba que o compilador removeu as anotações de tipo:

function saudacao(nome) {
    return "Olá, " + nome + "!";
}
var mensagem = saudacao("TypeScript");
console.log(mensagem);

Para compilar múltiplos arquivos de uma só vez, você pode listá-los:

tsc arquivo1.ts arquivo2.ts

Ou, mais comumente, utilizar um arquivo de configuração.

4. Inicializando o arquivo tsconfig.json

O tsconfig.json é o arquivo de configuração central do TypeScript. Para criá-lo automaticamente:

tsc --init

Isso gera um arquivo com todas as opções comentadas. Um exemplo simplificado:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
  • include: define quais arquivos o compilador deve processar.
  • exclude: define quais arquivos devem ser ignorados.

5. Opções essenciais do compilerOptions

Vamos explorar as opções mais importantes:

target

Define a versão do JavaScript de saída:

"target": "ES5"     // Suporte a navegadores antigos
"target": "ES6"     // Ou ES2015, recursos modernos do ES6
"target": "ES2020"  // Recursos mais recentes
"target": "ESNext"  // Últimas funcionalidades propostas

module

Define o sistema de módulos:

"module": "CommonJS"   // Padrão para Node.js
"module": "ESNext"     // Módulos ES nativos
"module": "AMD"        // Para carregamento assíncrono no navegador

outDir e rootDir

Organizam a estrutura de saída:

"rootDir": "./src",   // Diretório de origem
"outDir": "./dist"    // Diretório de saída

Com essa configuração, se você tiver src/index.ts, o arquivo compilado será dist/index.js.

strict

Ativa verificações rigorosas de tipo:

"strict": true

Essa opção habilita várias verificações que ajudam a evitar erros comuns, como strictNullChecks, noImplicitAny e strictFunctionTypes.

6. Modos de execução e observação de arquivos

O compilador tsc oferece diferentes modos de execução:

Compilação única:

tsc

Modo watch (recompilação automática ao salvar):

tsc --watch

Verificação sem geração de arquivos:

tsc --noEmit

O modo --noEmit é particularmente útil em pipelines de CI/CD para verificar erros de tipo sem poluir o diretório de saída.

7. Boas práticas de configuração para projetos reais

Configurações por ambiente

Crie arquivos de configuração específicos para desenvolvimento e produção:

tsconfig.base.json (configurações compartilhadas):

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

tsconfig.json (para desenvolvimento):

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

tsconfig.prod.json (para produção):

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": false,
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

Ignorando diretórios

Sempre exclua node_modules e arquivos de teste:

"exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"]

Integração com package.json

Adicione scripts ao package.json para automatizar a compilação:

{
  "scripts": {
    "build": "tsc",
    "build:prod": "tsc -p tsconfig.prod.json",
    "watch": "tsc --watch",
    "check": "tsc --noEmit"
  }
}

Agora você pode executar:

npm run build     # Compilação padrão
npm run watch     # Modo observação
npm run check     # Verificação de tipos

Conclusão

Neste artigo, você aprendeu a instalar o TypeScript, configurar o compilador tsc e aplicar boas práticas para projetos reais. Dominar essas configurações é fundamental para aproveitar todo o potencial do TypeScript, garantindo código mais seguro, organizado e fácil de manter.

Referências