TypeScript: Instalando e configurando o TypeScript

Última atualização: 2026-08-26

A instalação do TypeScript requer apenas um comando, mas a configuração do seu ambiente de desenvolvimento exige o entendimento de alguns conceitos-chave — esta lição irá guiá-lo na configuração do seu “espaço de trabalho” do TypeScript do zero.

1. Instalar o TypeScript

O TypeScript é instalado por meio do npm (gerenciador de pacotes do Node.js). Primeiro, você precisará ter o Node.js instalado no seu computador.

(1) Verifique se o Node.js está instalado

Abra o terminal (PowerShell no Windows, Terminal no macOS) e digite:

node --version
npm --version

Se você vir um número de versão (como v18.17.0 e 9.6.3), isso significa que ele já está instalado. Se receber a mensagem de erro “Comando não encontrado”, acesse o site oficial do Node.js para baixar e instalar primeiro a versão LTS.

(2) Instalar o TypeScript em todo o sistema

npm install -g typescript

-g indica uma instalação global; uma vez instalado, você poderá usar o comando tsc a partir de qualquer diretório.

(3) Verifique se a instalação foi bem-sucedida

tsc --version

Se você vir uma mensagem semelhante a Version 5.3.3, isso significa que a instalação foi bem-sucedida.

▶ Exemplo: Verifique o status da instalação do TypeScript

# Execute the following commands in order，Confirm that the environment is ready
node --version
npm --version
tsc --version

Saída:

v18.17.0
9.6.3
Version 5.3.3

2. O primeiro arquivo tsconfig.json

tsconfig.json é um arquivo de configuração para projetos em TypeScript que indica ao compilador como processar seu código. Embora projetos simples possam não precisar dele, quase todos os projetos em TS no desenvolvimento prático incluem esse arquivo.

(1) Geração rápida

No diretório do projeto, execute o seguinte:

tsc --init

Isso irá gerar automaticamente um arquivo tsconfig.json contendo todas as opções configuráveis (a maioria das quais está comentada).

(2) Explicação das principais opções de configuração

O arquivo de configuração recém-gerado contém muitas informações, mas os iniciantes precisam se concentrar apenas nestes poucos pontos:

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true
  }
}

▶ Exemplo: Um arquivo tsconfig.json adequado para este tutorial

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Saída:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

3. Configuração do VS Code

O VS Code e o TypeScript são “irmãos” — ambos são produtos da Microsoft, e o VS Code oferece suporte ao TypeScript por padrão, sem a necessidade de instalar nenhuma extensão adicional.

(1) Recursos integrados

O VS Code vem com suporte integrado à linguagem TypeScript, que oferece:

• Erros de tipografia em tempo real destacados em vermelho (sublinhado ondulado)
• Preenchimento automático (digite . para ver sugestões de propriedades e métodos)
• Passe o mouse sobre um item para exibir seu tipo
• Pressione F12 para acessar a definição
• Pressione F2 para renomear uma variável (todas as referências são atualizadas automaticamente)

(2) Plug-ins recomendados

(3) Configurar a compilação automática

No VS Code, pressione Ctrl+Shift+B (Cmd+Shift+B no macOS), selecione tsc: watch e o VS Code monitorará as alterações nos arquivos em segundo plano — toda vez que você salvar o arquivo .ts, ele será compilado automaticamente para .js, de modo que você não precisará executar tsc manualmente.

4. Estrutura do diretório do projeto

Um projeto padrão do TypeScript tem a seguinte aparência:

my-project/
├── src/              ← TypeScript Source Code
│   ├── index.ts      ← Input File
│   └── utils.ts      ← Tools Module
├── dist/             ← Compilation output JavaScript（Automatically Generated，Do not edit manually）
│   ├── index.js
│   └── utils.js
├── tsconfig.json     ← TypeScript Layout
├── package.json      ← Node.js Project Configuration
└── node_modules/     ← Dependency Packages（Automatically Generated，Do not submit to git）

5. Resolução de problemas comuns de instalação

▶ Exemplo: Compilando e executando TypeScript com tsc

// src/hello.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

Saída:

// Executed successfully

# Compile and run
tsc src/hello.ts          # Generates dist/hello.js
node dist/hello.js        # Output: Hello, TypeScript!

Saída:

tsc src/hello.ts          → Compiles to dist/hello.js
node dist/hello.js        → Hello, TypeScript!

❓ Perguntas Frequentes

P: Preciso instalar o TypeScript globalmente? R: Não, não é necessário. Você também pode instalá-lo localmente no seu projeto: npm install typescript --save-dev e, então, usar npx tsc em vez de tsc. A vantagem da instalação local é que a equipe do projeto usa uma versão unificada do TypeScript, evitando problemas como “compila aqui, mas não lá”. No entanto, a instalação global é mais prática quando você está apenas aprendendo.

P: Preciso ativar o strict no tsconfig.json? R: Recomendamos fortemente que você o ative. O modo estrito ajuda a detectar a maioria dos erros de tipo. Embora você veja mais sublinhados ondulados em vermelho no início, cada um deles indica um problema real. Desativar o modo estrito é como comprar um carro, mas não usar o cinto de segurança — funciona, mas não é seguro.

P: Preciso usar o VS Code como meu editor? R: Não, não é necessário. O WebStorm, o Sublime Text e outros editores também oferecem suporte ao TypeScript. No entanto, o VS Code é gratuito e oferece o suporte mais abrangente ao TypeScript (já que é da mesma empresa), por isso este tutorial usa o VS Code como padrão.

P: O diretório dist deve ser enviado ao Git? R: Não. O diretório dist contém os artefatos de compilação; qualquer pessoa que tenha o código-fonte pode regenerá-los executando tsc. Basta adicionar o diretório dist a .gitignore.

📖 Resumo

• Instalado por meio de npm install -g typescript, verificado por meio de tsc --version
• tsconfig.json é o elemento central da configuração do projeto; strict: true deve estar ativado
• O VS Code oferece suporte ao TypeScript por padrão; recomendamos ativar a compilação automática tsc: watch
• Estrutura padrão do projeto: src/ para o código-fonte, dist/ para os artefatos de compilação; não modifique manualmente o diretório dist
• Se você encontrar algum problema, verifique primeiro o PATH e a codificação de caracteres; 90% dos problemas de instalação decorrem dessas duas áreas.

📝 Exercícios

1. Exercício básico (Dificuldade: ⭐): Instale o TypeScript no seu computador, execute tsc --version para verificar se a instalação foi bem-sucedida e anote o número da versão.
2. Problema avançado (Dificuldade ⭐⭐): Crie um diretório de projeto, execute tsc --init para gerar tsconfig.json e, em seguida, defina strict como true, outDir como "./dist" e rootDir como "./src".
3. Desafio (Dificuldade: ⭐⭐⭐): Abra o diretório do projeto que você criou na etapa anterior no VS Code, configure o modo de compilação automática tsc: watch e tente modificar o valor target em tsconfig.json (alterando-o de ES2020 para ES5). Observe como o código JS gerado muda (Dica: as funções-seta se tornarão funções comuns).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós