Aula 01 - Introdução ao TypeScript e Setup Profissional 🧠

Objetivo

Nesta aula, você entenderá a evolução do JavaScript, por que o TypeScript se tornou o padrão da indústria e como configurar um ambiente de desenvolvimento profissional do zero.

1. Evolução do JavaScript e Problemas da Tipagem Dinâmica 🌊

O JavaScript nasceu em 1995 para ser uma linguagem de scripts simples para navegadores. Com o passar dos anos, ele assumiu o controle de aplicações complexas (Gmail, Facebook, VS Code). No entanto, sua natureza dinâmica e fracamente tipada traz desafios em larga escala.

O Problema da Tipagem Dinâmica 🧨

Em JS, você pode fazer isso:

let total = "10";
total = total + 5; // Resultado: "105" (string) em vez de 15

Erros como undefined is not a function ou cannot read property of null são comuns e só aparecem em tempo de execução (quando o usuário está usando o app).

Atenção

Erros silenciosos em JavaScript são a maior causa de bugs em produção. O TypeScript resolve isso movendo a detecção de erros para o tempo de compilação.

2. O que é TypeScript? 🛡️

O TypeScript é um superset (superconjunto) do JavaScript criado pela Microsoft. Isso significa que todo código JavaScript é um código TypeScript válido, mas o TS adiciona uma camada de tipagem estática.

Por que usar TypeScript?

Segurança: Detecta erros antes de rodar o código.
Autocompletar (IntelliSense): O VS Code "entende" seu código e sugere propriedades.
Refatoração: É muito mais seguro mudar nomes de funções ou variáveis em projetos grandes.

3. Setup Profissional 🛠️

Para começar, precisamos do Node.js instalado. O TypeScript é instalado via NPM (Node Package Manager).

Instalação Global

npm install -g typescript Added 1 package in 2s tsc -v Version 5.x.x

Conceito

O comando tsc é o TypeScript Compiler. Ele transforma seu código .ts em código .js que o navegador ou o Node conseguem entender.

4. O Coração do Projeto: `tsconfig.json` ⚙️

Todo projeto sério de TypeScript possui um arquivo de configuração chamado tsconfig.json. Ele define como o compilador deve se comportar.

Criando a Configuração

tsc --init Successfully created a tsconfig.json file.

Dica

No tsconfig.json, ative sempre o "strict": true para garantir o máximo de segurança e as melhores práticas da linguagem.

5. Primeiro Projeto Estruturado (Laboratório) 🧪

Vamos criar nossa primeira estrutura profissional:

Crie uma pasta src/ (onde ficará o código fonte).
Crie um arquivo src/index.ts.

Visualizando o Fluxo de Trabalho (Mermaid)

graph LR;
    TS[Código TypeScript .ts] -- "Compilador (tsc)" --> JS[Código JavaScript .js];
    JS -- "Execução" --> Node[Node.js / Navegador];
    style TS fill:#3178c6,color:#fff
    style JS fill:#f7df1e,color:#000

Exemplo de Código no VS Code

interface Usuario {
    nome: string;
    id: number;
}

const novoUsuario: Usuario = {
    nome: "Ricardo",
    id: 1
};

console.log(`Olá, ${novoUsuario.nome}! Seu ID é ${novoUsuario.id}.`);

6. Exercícios de Fixação 📝

Básico: Instale o TypeScript na sua máquina e verifique a versão.
Básico: Crie um arquivo ola.ts, declare uma variável msg: string e imprima no console.
Intermediário: Gere o arquivo tsconfig.json e mude a opção target para ES6. O que isso muda no JS gerado?
Intermediário: Tente atribuir um número a uma variável declarada como string. Observe o erro no VS Code.
Desafio: Configure um script no package.json chamado build que execute o comando tsc.

🚀 Mini-Projeto da Aula

Configure um ambiente onde o comando tsc -w (watch mode) fique monitorando sua pasta src/ e compilando automaticamente para uma pasta dist/.

Próxima Aula: Vamos mergulhar nos Tipos Fundamentais e Inferência e entender como o TS "adivinha" nossos tipos!