Pular para conteúdo

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

Bem-vindos ao Curso! 🚀

"TypeScript Profissional"

O que vamos ver hoje? 📋

  • Evolução do JavaScript
  • Problemas da tipagem dinâmica
  • O que é TypeScript?
  • Setup do Ambiente Real
  • Compilação e Watch Mode

O Problema: JavaScript Puro 🌪️

  • Tipagem Dinâmica: Liberdade vs. Caos
  • Erros que só aparecem em Proteção
  • Cannot read property 'x' of undefined
  • Falta de autocompletar e confiança

A Solução: TypeScript 🛡️

  • Criado pela Microsoft
  • Adiciona Tipagem Estática
  • É um Superset do JavaScript
  • Detecta erros antes de rodar o código

O Conceito de Superset 🧱

graph LR;
    JS[JavaScript Moderno] --> TS[TypeScript];
    note[Todo JS é um TS válido]

Estático vs Dinâmico ⚖️

  • JS: Tipos são checados no Navegador (Runtime)
  • TS: Tipos são checados no Editor/Compilador (Compile-time)

Benefícios Reais 💎

  • Documentação Viva: O código diz o que ele faz
  • Refatoração Segura: Mude o nome de algo e o TS avisa onde quebrou
  • Produtividade: Autocompletar inteligente (IntelliSense)

Setup do Ambiente 🛠️

  • Precisamos do Node.js instalado
  • Gerenciador de pacotes: NPM ou Yarn

Instalando o Compilador 📥

npm install -g typescript tsc --version

Criando seu Primeiro Projeto 📂

mkdir meu-projeto && cd meu-projeto npm init -y tsc --init

O arquivo tsconfig.json ⚙️

  • O cérebro do compilador
  • Define como o código será transformado
  • Ativa ou desativa regras de segurança

Propriedades Essenciais: target 🎯

  • Define a versão do JavaScript gerada
  • es5, es6, esnext...

Propriedades Essenciais: rootDir e outDir 🏗️

  • rootDir: Onde fica o seu código TS (src)
  • outDir: Onde o JS compilado vai parar (dist)

O Modo Estrito (strict) 🚨

  • true por padrão (Recomendado!)
  • Impede o uso de any implícito
  • Garante checagem de null e undefined

Escrevendo Código ✍️

// app.ts
const saudacao: string = "Olá TypeScript!";
console.log(saudacao);

Compilando o Código 🏗️

npx tsc Gerando dist/app.js...

Verificando o Resultado 🔍

  • O arquivo .js gerado não possui tipos
  • É JavaScript puro pronto para o navegador ou Node

Watch Mode: Agilidade ⚡

  • Não precisa rodar tsc toda hora
npx tsc -w

Ferramenta Bônus: ts-node 🏎️

  • Roda o código TS direto no terminal sem gerar arquivos
  • Ótimo para testes rápidos

Resumo da Aula 🏁

  • TS = JS + Tipos
  • Setup: Node + TSC
  • Configuração: tsconfig.json

Próxima Aula: Tipos Fundamentais!

Vamos dominar a base da linguagem. 🚀

Perguntas? ❓