Curso de TypeScript Profissional 🚀

Bem-vindo ao curso definitivo para dominar o TypeScript no mundo real. Do zero absoluto até arquiteturas complexas, prepare-se para elevar sua carreira de desenvolvedor.

Diferencial

Foco em Engenharia: Não apenas sintaxe, mas como estruturar projetos escaláveis, usar padrões de projeto e garantir a qualidade com testes rigorosos.

🎯 O Que Você Vai Aprender

Segurança Extrema

Elimine erros de "undefined" e bugs em tempo de execução com tipagem estática rigorosa.

Ver Tipagem
Fullstack Types

Aprenda a compartilhar tipos entre Node.js (Backend) e React (Frontend) com maestria.

Ver Ecossistema
:material-architecture: Arquitetura Limpa

Domine SOLID, DDD e Padrões de Projeto aplicados ao ecossistema TypeScript.

:octicons-layers-24: Ver Arquitetura
Projetos Reais

Saia da teoria com 16 mini-projetos práticos e um projeto final completo com Deploy.

Ver Projetos

📚 Estrutura do Curso (16 Aulas)

O curso é dividido em dois módulos estratégicos.

Módulo 1: Core & Linguagem (Aulas 01-08)

Construa sua base sólida na linguagem TypeScript. * Aula 01 - Introdução e Setup Profissional 🧠 * Aula 02 - Tipos Fundamentais e Inferência 🛠️ * Aula 03 - Tipos Avançados (Unions & Guards) 🧩 * Aula 04 - Interfaces e Modelagem 🏗️ * Aula 05 - Classes e Orientação a Objetos 🏛️ * Aula 06 - Generics (Programação Genérica) 📦 * Aula 07 - Utility Types (Produtividade) ⚙️ * Aula 08 - Manipulação Avançada de Tipos 🧪

Módulo 2: Aplicações & Ecossistema (Aulas 09-16)

Aplique o TypeScript no mercado de trabalho real. * Aula 09 - Módulos e Organização 📁 * Aula 10 - Backend com Node.js 🟢 * Aula 11 - Frontend com React ⚛️ * Aula 12 - APIs e Validação (Zod) 📡 * Aula 13 - Testes Automatizados (Jest) 🧪 * Aula 14 - Padrões de Projeto (Design Patterns) 🛡️ * Aula 15 - Clean Code e Arquitetura 📐 * Aula 16 - Projeto Final e Deploy 🚀

Success

Pronto para elevar seu nível? Clique no botão abaixo e inicie sua jornada profissional!

Começar Agora

Sobre o Curso

🎓 TypeScript Profissional: Do Core à Arquitetura

Este é um curso completo e estruturado para quem deseja dominar o TypeScript no cenário real do desenvolvimento moderno. Projetado para levar você do setup básico em Node.js até a construção de aplicações complexas com React, APIs robustas e arquiteturas escaláveis.

🎯 Objetivos do Curso

Domínio Técnico

Aprender não apenas a sintaxe, mas o "pensamento tipado" (Type Thinking) para modelar sistemas seguros.
Ecossistema Real

Integrar TypeScript com as ferramentas mais usadas no mercado: Express, React, Zod, Jest e Docker.
Qualidade de Software

Aplicar princípios de Clean Code, SOLID e Design Patterns para criar códigos fáceis de manter por equipes.
Engenharia de Dados

Dominar Generics, Tipos Avançados e Manipulação de Dados Externos com total segurança e previsibilidade.

📚 O Que Você Vai Aprender

Módulo 1 – Core & Linguagem

Setup Profissional e Compilação
Tipos Primitivos, Avançados e Inferência
Interfaces vs Type Aliases
Classes, POO e Modificadores de Acesso
Generics e Utility Types
Manipulação Dinâmica de Tipos

Módulo 2 – Ecossistema & Arquitetura

Organização em Módulos e Aliases
Backend com Node.js e Express
Frontend Moderno com React
Integração de APIs e Validação (Zod)
Testes Automatizados com Jest
Padrões de Projeto e Clean Code
Build para Produção e Docker

🛠️ Metodologia

Aulas Práticas

Conteúdo focado em cenários de código real, com diagramas Mermaid para facilitar a compreensão.
80 Exercícios

Listas graduadas (Básico, Médio, Desafio) para fixar cada conceito da linguagem.
16 Mini-Projetos

Saia da aula com algo pronto: desde calculadoras tipadas até APIs e Dashboards completos.
Quizzes Detalhados

Avalie seu progresso com 160 questões comentadas em português.

👨‍🎓 Para Quem é Este Curso

Desenvolvedores JS que querem evitar bugs e subir de nível profissional
Estudantes que buscam uma base sólida de Engenharia de Software
Profissionais que pretendem trabalhar em grandes empresas de tecnologia
Arquitetos de Software que precisam padronizar códigos escaláveis

📋 Pré-requisitos

Conhecimento básico de lógica e JavaScript
Node.js instalado (coberto no curso)
Editor de código (VS Code recomendado)
Vontade de escrever código de alta qualidade!

🎖️ O Que Você Receberá

✅ 16 aulas completas e atualizadas
✅ Slides interativos para todas as aulas
✅ 80 exercícios práticos com soluções
✅ 16 mini-projetos para portfólio
✅ 160 questões de quiz com explicações
✅ Guia de Deploy e Dockerização

🚀 Comece Agora

Pronto para dominar o TypeScript?

Ir para Aula 01 Ver Materiais

Dúvidas? Explore o Roadmap do Projeto ou comece agora mesmo!

Aulas

Aulas do Curso 📚

Acesse aqui todo o conteúdo teórico dividido em dois grandes blocos: Core da Linguagem e Aplicações do Ecossistema.

Módulo 1: Core & Linguagem

A base sólida para escrever código seguro e previsível. Do setup até manipulação avançada.
Módulo 2: Ecossistema & Aplicações

Aplicação prática do TypeScript em ferramentas e frameworks de mercado.

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!

Aula 02 - Tipos Fundamentais e Inferência 🛠️

Objetivo

Nesta aula, exploraremos os pilares da tipagem no TypeScript: os tipos primitivos, as estruturas de dados básicas e o poderoso sistema de inferência que torna o código limpo e seguro ao mesmo tempo.

1. Tipos Primitivos 🧱

O TypeScript herda os tipos primitivos do JavaScript, mas permite que você os declare explicitamente.

Tipo	Descrição	Exemplo
`string`	Textos	`"Olá mundo"`
`number`	Números (inteiros e decimais)	`42` ou `3.14`
`boolean`	Valores lógicos	`true` ou `false`

Exemplo de Declaração

let nome: string = "Analista";
let idade: number = 25;
let estaAtivo: boolean = true;

2. Arrays e Tuplas 📊

Arrays

Existem duas formas de declarar arrays:

let numeros: number[] = [1, 2, 3];
let nomes: Array<string> = ["Ana", "Bia"];

Tuplas

As Tuplas permitem declarar um array com um número fixo de elementos e tipos conhecidos em posições específicas.

let pessoa: [string, number];
pessoa = ["Ricardo", 30]; // ✅ Correto
// pessoa = [30, "Ricardo"]; // ❌ Erro: Tipos na ordem errada

3. Enum, Any e Unknown 🎭

Enum

Permite definir um conjunto de constantes nomeadas, facilitando a legibilidade.

enum Cor {
    Vermelho,
    Verde,
    Azul
}
let c: Cor = Cor.Verde;

Any vs Unknown

Atenção

O tipo any desativa a checagem de tipos. Use apenas em casos extremos de migração de código.

any: Aceita qualquer coisa e permite qualquer operação.
unknown: Aceita qualquer coisa, mas obriga você a verificar o tipo antes de usar (mais seguro).

4. Void e Never 🚫

void: Usado em funções que não retornam nenhum valor.
never: Usado em funções que nunca terminam (como loops infinitos) ou que sempre lançam exceções.

function avisar(): void {
    console.log("Aviso enviado!");
}

function erroFatal(msg: string): never {
    throw new Error(msg);
}

5. Inferência de Tipos 🧠

O TypeScript é inteligente o suficiente para entender o tipo de uma variável sem que você precise escrever.

let curso = "TypeScript"; // O TS infere automaticamente que 'curso' é string
// curso = 10; // ❌ Erro: Não posso atribuir número a uma string

6. Strict Mode: O Coração da Qualidade 🛡️

Como vimos na Aula 1, o tsconfig.json possui o strict mode. Ele força o desenvolvedor a lidar com valores null e undefined, evitando os famosos erros de "quebra" em produção.

Visualizando a Hierarquia de Tipos (Mermaid)

graph TD;
    Top[unknown / any] --> Prim[Primitivos];
    Prim --> string;
    Prim --> number;
    Prim --> boolean;
    Top --> Obj[Arrays / Objetos / Tuplas];
    Obj --> Void[void];
    Void --> Never[never];

7. Exercícios Práticos 📝

Básico: Crie uma variável para cada tipo primitivo e atribua valores coerentes.
Básico: Crie um array de strings e uma tupla contendo o nome e a versão de um software.
Intermediário: Crie um enum para representar os dias da semana.
Intermediário: Crie uma função que receba um parâmetro unknown e use o typeof para imprimir se é uma string ou número.
Desafio: Tente criar uma função que retorne never e explique em qual cenário do mundo real ela seria útil.

🚀 Mini-Projeto da Aula

Crie um pequeno script de "Gerenciamento de Inventário" onde cada item é uma tupla [id: number, nome: string, preco: number, emEstoque: boolean]. Use um enum para as categorias dos itens.

Próxima Aula: Vamos aprender sobre Tipos Avançados como Union Types e Type Guards!

Aula 03 – Tipos Avançados 🧩

Objetivo

Nesta aula, aprenderemos a criar tipos flexíveis e poderosos usando uniões, interseções e aliases. Também veremos como o TypeScript nos ajuda a "estreitar" os tipos para garantir que o código seja 100% seguro contra erros de runtime.

1. Union Types (|) 🔗

O Union Type permite que uma variável tenha mais de um tipo possível. É como dizer: "esta variável pode ser uma string OU um número".

function imprimirId(id: number | string) {
    console.log(`Seu ID é: ${id}`);
}

imprimirId(101);    // ✅ OK
imprimirId("202");  // ✅ OK
// imprimirId(true); // ❌ Erro: boolean não é permitido

2. Type Alias 🏷️

Em vez de repetir tipos complexos em vários lugares, podemos criar um "apelido" usando a palavra-chave type.

type ID = number | string;

function login(usuario: ID) {
    // ...
}

3. Intersection Types (&) 🤝

Enquanto a união é um "ou", a interseção é um "e". Ela combina múltiplos tipos em um só. É muito usada para compor objetos.

type Pessoa = { nome: string };
type Empregado = { cargo: string };

type Desenvolvedor = Pessoa & Empregado;

const ricardo: Desenvolvedor = {
    nome: "Ricardo",
    cargo: "Tech Lead"
};

4. Literal Types 🎯

Podemos definir valores exatos que uma variável pode assumir. Isso é excelente para estados ou configurações.

type Alinhamento = "esquerda" | "centro" | "direita";

let texto: Alinhamento = "centro"; // ✅ OK
// texto = "cima"; // ❌ Erro: "cima" não está na lista

5. Narrowing e Type Guards 🛡️

Narrowing (Estreitamento) é o processo de o TypeScript "entender" qual é o tipo exato dentro de um fluxo lógico. Isso é feito usando Type Guards.

Exemplo com `typeof`

function processar(entrada: string | number) {
    if (typeof entrada === "string") {
        console.log(entrada.toUpperCase()); // Aqui o TS sabe que é string
    } else {
        console.log(entrada.toFixed(2)); // Aqui o TS sabe que é number
    }
}

6. Estudo de Caso: Validação de Dados de API 📡

Ao receber dados de uma API, muitas vezes não sabemos o formato exato. Usar tipos avançados nos protege.

Visualizando a Validação (Mermaid)

graph TD;
    API[Resposta da API] --> Guard{É um Usuário?};
    Guard -- Sim --> Success[Acessar propriedades .nome e .id];
    Guard -- Não --> Error[Tratar erro de formato];
    style Guard fill:#f96,stroke:#333

7. Exercícios Práticos 📝

Básico: Crie um Type Alias chamado Status que aceite os literais "ativo", "pendente" ou "inativo".
Básico: Crie uma função que receba um parâmetro que pode ser number ou null e retorne o dobro se for número ou 0 se for null.
Intermediário: Crie dois tipos, Carro e Eletrico, e use uma interseção para criar um CarroEletrico.
Intermediário: Use o operador in como Type Guard para verificar se uma propriedade existe em um objeto.
Desafio: Crie uma função de validação de API que receba um objeto any e use Type Guards para transformá-lo em um tipo Produto seguro.

🚀 Mini-Projeto da Aula

Crie um sistema de "Notificações". O sistema deve aceitar notificações por Email ou SMS. - Email tem endereco e assunto. - SMS tem numero e mensagem. Use Union Types e Narrowing para processar o envio corretamente.

Próxima Aula: Vamos explorar Interfaces e Modelagem de Domínio e entender a diferença entre interface e type!

Aula 04 – Interfaces e Modelagem de Domínio 🏗️

Objetivo

Nesta aula, aprenderemos a modelar objetos complexos usando Interfaces. Entenderemos a diferença entre interface e type e como construir contratos sólidos para aplicações corporativas.

1. O que são Interfaces? 📜

Uma Interface é um contrato que define a estrutura de um objeto. Ela diz quais propriedades e métodos um objeto deve ter, mas não como eles são implementados.

interface Livro {
    titulo: string;
    autor: string;
    paginas?: number; // Propriedade opcional
    readonly isbn: string; // Propriedade apenas de leitura
}

const meuLivro: Livro = {
    titulo: "Clean Code",
    autor: "Robert C. Martin",
    isbn: "123-456-789"
};

2. Extensão de Interfaces (Herança de Contratos) 🧬

Podemos combinar interfaces para criar estruturas mais complexas e reutilizáveis.

interface Animal {
    nome: string;
}

interface Mamifero extends Animal {
    amamentar(): void;
}

const cachorro: Mamifero = {
    nome: "Rex",
    amamentar: () => console.log("Amamentando...")
};

3. Implementação em Classes 🏛️

As interfaces são fundamentais na Programação Orientada a Objetos (POO). Uma classe pode "assinar" um contrato de interface usando a palavra-chave implements.

interface Autenticavel {
    login(): boolean;
}

class Usuario implements Autenticavel {
    login(): boolean {
        console.log("Usuário logado!");
        return true;
    }
}

4. Diferença entre Interface e Type Alias ⚖️

Ambos são muito parecidos, mas existem diferenças fundamentais:

Característica	Interface	Type Alias
Extensibilidade	Pode ser estendida via `extends`.	Pode ser combinada via interseção (`&`).
Declaration Merging	Se você definir duas com o mesmo nome, elas se fundem.	Não permite nomes duplicados.
Ideal para	Modelagem de objetos e POO.	Uniões, Primitivos, Funções e Tipos complexos.

Dica Profissional

A recomendação oficial do TypeScript é: use Interface até que você precise de uma funcionalidade específica do Type.

5. Modelagem de Domínio (Entidades) 🗺️

Modelar o domínio é definir as "regras de negócio" através dos tipos. Em um e-commerce, teríamos:

Visualizando o Domínio (Mermaid)

classDiagram
    class Produto {
        +number id
        +string nome
        +number preco
    }
    class Cliente {
        +string email
        +string endereco
    }
    class Pedido {
        +Produto[] itens
        +Cliente cliente
        +total() number
    }
    Pedido o-- Produto : contém
    Pedido o-- Cliente : pertence a

6. Exercícios Práticos 📝

Básico: Crie uma interface Funcionario com propriedades nome, salario e uma propriedade opcional bonus.
Básico: Crie uma interface Veiculo e use extends para criar uma interface Moto.
Intermediário: Tente usar o "Declaration Merging" criando duas interfaces Usuario em partes diferentes do código e veja como o TS as une.
Intermediário: Crie uma interface para uma função que recebe dois números e retorna a soma deles.
Desafio: Modele um sistema de biblioteca. Crie interfaces para Autor, Livro e Emprestimo. Garanta que um empréstimo tenha uma data de início e uma data de devolução.

🚀 Mini-Projeto da Aula

Modele as entidades de um Sistema de Gestão Acadêmica. - Interfaces para: Aluno, Professor, Disciplina e Turma. - Uma turma deve conter um professor e uma lista de alunos. - Utilize propriedades readonly para IDs que não podem ser alterados.

Próxima Aula: Vamos subir o nível com Classes e Programação Orientada a Objetos no TypeScript!

Aula 05 – Classes e Programação Orientada a Objetos 🏛️

Objetivo

Nesta aula, aplicaremos os conceitos de Programação Orientada a Objetos (POO) no TypeScript. Veremos como encapsular dados, usar modificadores de acesso e criar abstrações poderosas para sistemas escaláveis.

1. Modificadores de Acesso 🔒

Diferente do JavaScript puro, o TypeScript oferece modificadores que controlam quem pode acessar as propriedades e métodos de uma classe.

Modificador	Descrição
`public`	(Padrão) Acesso total de qualquer lugar.
`private`	Acesso apenas dentro da própria classe.
`protected`	Acesso dentro da classe e de suas subclasses (herança).

class ContaBancaria {
    private saldo: number = 0; // Ninguém fora da classe mexe aqui

    public depositar(valor: number): void {
        this.saldo += valor;
    }
}

2. Parâmetros Readonly e Shorthand Syntax ⚡

O TypeScript nos permite declarar e inicializar propriedades diretamente no construtor.

class Usuario {
    constructor(
        public readonly id: number,
        private nome: string
    ) {}
}

const u = new Usuario(1, "Ricardo");
// u.id = 2; // ❌ Erro: Propriedade é readonly

3. Getters e Setters 🔄

Permitem aplicar lógica ao ler ou alterar um valor.

class Produto {
    private _preco: number = 0;

    get preco() { return this._preco; }

    set preco(valor: number) {
        if (valor < 0) throw new Error("Preço inválido!");
        this._preco = valor;
    }
}

4. Herança e Polimorfismo 🧬

A herança permite que uma classe herde comportamentos de outra, facilitando a reutilização de código.

class Funcionario {
    constructor(public nome: string) {}
    getBonus() { return 1000; }
}

class Gerente extends Funcionario {
    getBonus() { return super.getBonus() + 5000; } // Polimorfismo
}

5. Classes Abstratas ☁️

Uma classe abstrata não pode ser instanciada diretamente. Ela serve como um "esqueleto" para outras classes.

Visualizando a Abstração (Mermaid)

classDiagram
    class Pagamento {
        <<abstract>>
        +number valor
        +processar()* void
    }
    class Cartao {
        +processar() void
    }
    class Boleto {
        +processar() void
    }
    Pagamento <|-- Cartao
    Pagamento <|-- Boleto

6. Exercícios Práticos 📝

Básico: Crie uma classe Carro com propriedades marca, modelo e um método acelerar.
Básico: Use o modificador private em uma propriedade velocidade e crie um getter para ela.
Intermediário: Crie uma classe Animal abstrata com um método abstrato fazerSom() e implemente-o nas classes Cachorro e Gato.
Intermediário: Crie uma classe Pessoa e uma subclasse Estudante. Use o super() no construtor da subclasse.
Desafio: Crie um sistema de "Contas". Uma Conta abstrata e subclasses ContaCorrente e ContaPoupanca. A ContaCorrente deve cobrar uma taxa em cada saque.

🚀 Mini-Projeto da Aula

Desenvolva um Sistema de RPG Simples. - Crie uma classe base Personagem com nome, vida e ataque. - Crie subclasses Guerreiro (mais vida) e Mago (mais ataque). - Use encapsulamento para garantir que a vida nunca fique negativa.

Próxima Aula: Vamos aprender sobre Generics e como criar código que funciona com qualquer tipo!

Aula 06 – Generics (Programação Genérica) 📦

Objetivo

Nesta aula, desvendaremos o poder dos Generics. Você aprenderá a criar códigos altamente reutilizáveis e flexíveis que mantêm a segurança de tipos, independentemente do dado que estão processando.

1. O que são Generics? 🧬

Generics permitem que componentes (funções, classes ou interfaces) funcionem com uma variedade de tipos, ao invés de apenas um. Pense neles como "parâmetros para tipos".

O problema sem Generics

function retornarPrimeiro(lista: any[]): any {
    return lista[0];
}
// ❌ Perdemos a informação do tipo original

A solução com Generics

function retornarPrimeiro<T>(lista: T[]): T {
    return lista[0];
}

const n = retornarPrimeiro([1, 2, 3]); // n é inferido como number
const s = retornarPrimeiro(["a", "b"]); // s é inferido como string

2. Constraints (Restrições) ⛓️

Nem sempre queremos que o Generic aceite "qualquer" tipo. Podemos restringir o que ele aceita usando a palavra-chave extends.

interface TemComprimento {
    length: number;
}

function logComprimento<T extends TemComprimento>(obj: T) {
    console.log(obj.length);
}

logComprimento("Olá"); // ✅ OK (string tem length)
logComprimento([1, 2]); // ✅ OK (array tem length)
// logComprimento(10); // ❌ Erro: number não tem length

3. Classes Genéricas 🏗️

Classes também podem se beneficiar dessa flexibilidade. Um exemplo comum são as Pilhas ou Filas.

class Caixa<T> {
    private conteudo?: T;

    guardar(item: T) { this.conteudo = item; }
    pegar() { return this.conteudo; }
}

const caixaDeNumeros = new Caixa<number>();
caixaDeNumeros.guardar(10);

4. Generics com Interfaces 📜

Podemos tornar nossas interfaces adaptáveis a diferentes tipos de resposta, muito comum em APIs.

interface RespostaAPI<T> {
    data: T;
    erro: string | null;
}

const respostaUsuario: RespostaAPI<{nome: string}> = {
    data: { nome: "Ricardo" },
    erro: null
};

5. Visualizando o Fluxo Genérico (Mermaid)

graph LR;
    Entrada[Dados de Qualquer Tipo] --> Funcao{Função Genérica < T >};
    Funcao --> Saída[Mantém o Tipo Original T];
    style Funcao fill:#bbf,stroke:#333

6. Exercícios Práticos 📝

Básico: Crie uma função genérica identidade<T> que receba um argumento de tipo T e retorne exatamente esse argumento.
Básico: Crie um array genérico de strings.
Intermediário: Crie uma função genérica que receba dois argumentos e retorne um array contendo ambos.
Intermediário: Use constraints para garantir que um tipo genérico possua a propriedade id: number.
Desafio: Crie uma interface ListaPaginada<T> que contenha um array de itens: T[] e uma propriedade total: number.

🚀 Mini-Projeto da Aula

Crie um Repositório Genérico de Dados. - O repositório deve ter métodos para: salvar(item: T), obterTodos(): T[] e buscarPorId(id: number): T | undefined. - Teste o repositório criando uma instância para Produtos e outra para Usuarios.

Próxima Aula: Vamos explorar os Utility Types e descobrir como transformar tipos existentes de forma mágica!

Aula 07 – Utility Types e Manipulação de Tipos ⚙️

Objetivo

Nesta aula, conheceremos os utilitários integrados do TypeScript que facilitam a transformação de tipos existentes. Eles são essenciais para manter o código DRY (Don't Repeat Yourself) e flexível.

1. O que são Utility Types? 🛠️

Os Utility Types são tipos globais fornecidos pelo TypeScript que permitem realizar mapeamentos e transformações comuns de forma simples e segura.

2. Utilitários de Propriedades 📋

Partial

Torna todas as propriedades de um tipo opcionais. Útil para atualizações parciais de dados.

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

const atualizar: Partial<Usuario> = { nome: "Novo Nome" };

Required

O oposto do Partial. Torna todas as propriedades obrigatórias.

Readonly

Torna todas as propriedades apenas de leitura, impedindo alterações após a atribuição inicial.

3. Utilitários de Seleção ✂️

Pick

Cria um novo tipo escolhendo apenas algumas propriedades do tipo original.

type ResumoUsuario = Pick<Usuario, "nome" | "email">;

Omit

Cria um novo tipo removendo as propriedades especificadas.

type UsuarioSemId = Omit<Usuario, "id">;

4. Utilitários de Estrutura 🏗️

Record

Cria um tipo de objeto onde as chaves são do tipo K e os valores são do tipo T.

type Configuracoes = Record<"tema" | "idioma", string>;

const config: Configuracoes = {
    tema: "dark",
    idioma: "pt-BR"
};

5. Mapped Types (Breve Introdução) 🗺️

Os Utility Types acima são construídos usando Mapped Types. Eles permitem que você percorra as propriedades de um tipo e crie um novo.

Visualizando a Transformação (Mermaid)

graph LR;
    Original[Interface Original] -- "Partial< T >" --> Opcional[Todas Opcionais];
    Original -- "Pick< T, K >" --> Selecionado[Apenas Algumas];
    Original -- "Readonly< T >" --> Protegido[Apenas Leitura];
    style Original fill:#e1f5fe,stroke:#01579b

6. Exercícios Práticos 📝

Básico: Use Partial para criar uma função que aceite uma atualização parcial de um objeto Produto.
Básico: Crie uma interface Config com propriedades opcionais e use Required para garantir que todas estejam presentes em uma variável.
Intermediário: Use Pick para extrair apenas o titulo e a data de uma interface Post.
Intermediário: Use Record para criar um dicionário de traduções onde as chaves são "ola" e "tchau" e os valores são strings.
Desafio: Combine Omit e Readonly para criar um tipo de dado que não contenha o ID de um Usuario e seja imutável.

🚀 Mini-Projeto da Aula

Crie um Transformador de Modelos. - Defina uma interface robusta para um Pedido. - Crie um tipo para a visualização resumida do pedido (Pick). - Crie um tipo para a criação de um pedido (onde campos como id e dataGeracao são omitidos via Omit). - Garanta que os dados da API sejam de apenas leitura (Readonly).

Próxima Aula: Vamos mergulhar na Manipulação Avançada de Tipos e entender tipos condicionais e o operador infer!

Aula 08 – Manipulação Avançada de Tipos 🧪

Objetivo

Nesta aula, exploraremos as funcionalidades mais avançadas do sistema de tipos do TypeScript. Aprenderemos a criar tipos que dependem de condições, extrair tipos de funções e gerar strings de tipos dinamicamente.

1. keyof e Indexed Access Types 🔑

Operador keyof

O operador keyof obtém todas as chaves de um tipo de objeto e as transforma em uma união de literais.

interface Carro {
    marca: string;
    ano: number;
}

type ChavesDoCarro = keyof Carro; // "marca" | "ano"

Indexed Access Types

Permite acessar o tipo de uma propriedade específica de outro tipo.

type TipoMarca = Carro["marca"]; // string

2. Tipos Condicionais 🛠️

Funcionam como um "if" para tipos. A sintaxe é similar ao operador ternário.

type EString<T> = T extends string ? "Sim" : "Não";

type Teste1 = EString<string>; // "Sim"
type Teste2 = EString<number>; // "Não"

3. O Operador infer 🔍

Usado dentro de tipos condicionais para "inferir" e extrair um tipo de dentro de outro (como o tipo de retorno de uma função).

type RetornoDeFuncao<T> = T extends (...args: any[]) => infer R ? R : any;

function soma(a: number, b: number): number { return a + b; }
type ResultadoSoma = RetornoDeFuncao<typeof soma>; // number

4. Template Literal Types 🖋️

Permitem criar novos tipos de string baseados em uniões de strings, usando a mesma sintaxe de template strings do JS.

type Cor = "vermelho" | "azul";
type Intensidade = "claro" | "escuro";

type CorCompleta = `${Cor}-${Intensidade}`; 
// "vermelho-claro" | "vermelho-escuro" | "azul-claro" | "azul-escuro"

5. Visualizando a Lógica Condicional (Mermaid)

graph TD;
    T[Tipo T] --> Cond{T extends U?};
    Cond -- Verdadeiro --> X[Tipo X];
    Cond -- Falso --> Y[Tipo Y];
    style Cond fill:#f9f,stroke:#333

6. Exercícios Práticos 📝

Básico: Use keyof para criar uma função que receba um objeto e uma de suas chaves e retorne o valor daquela chave.
Básico: Use Indexed Access Types para obter o tipo de um elemento dentro de um array de strings.
Intermediário: Crie um tipo condicional que verifique se um tipo é um array. Se for, retorne o tipo dos itens; se não, retorne o próprio tipo.
Intermediário: Use Template Literal Types para gerar todas as combinações de chaves de um objeto CSS (ex: margin-top, margin-bottom, etc.).
Desafio: Use infer para criar um tipo que extraia o tipo do primeiro argumento de uma função.

🚀 Mini-Projeto da Aula

Crie um Gerador de Tipos Dinâmicos para APIs. - Use Template Literal Types para criar rotas de API baseadas em recursos (ex: get-user, post-user). - Use tipos condicionais para definir se a resposta de uma função deve ser um objeto ou um erro mapeado. - Utilize keyof para validar se os filtros de busca enviados para a API pertencem ao modelo de dados.

Próxima Aula: Vamos organizar nossos projetos em Módulos e Organização Profissional de forma escalável!

Aula 09 – Módulos e Organização Profissional 📁

Objetivo

Nesta aula, aprenderemos a organizar código TypeScript de forma modular e escalável. Veremos como usar ES Modules, criar "Barrel Files" e configurar apelidos para caminhos, facilitando a manutenção de projetos grandes.

1. ES Modules (import/export) 📦

O TypeScript segue o padrão oficial do JavaScript para módulos (ESM). Isso permite que dividamos o código em vários arquivos e importemos apenas o que for necessário.

Exportando

// math.ts
export function somar(a: number, b: number) { return a + b; }
export const PI = 3.14;

Importando

// main.ts
import { somar, PI } from "./math";
console.log(somar(10, PI));

2. Barrel Files (O arquivo index.ts) 🛢️

Um Barrel File é uma forma de consolidar múltiplos módulos em um único arquivo de saída, simplificando os imports no restante da aplicação.

Estrutura

/models
  index.ts (Barrel)
  usuario.ts
  produto.ts

Exemplo no index.ts

export * from "./usuario";
export * from "./produto";

Agora você pode importar tudo de /models em vez de cada arquivo individualmente.

3. Namespaces (Legado vs Moderno) 🏛️

Antigamente, usava-se muito o namespace para organizar o código. Hoje, com o ES Modules, eles são menos comuns, mas ainda aparecem em bibliotecas legadas ou definições de tipos.

namespace Validacao {
    export const emailRegex = /.../;
}

4. Path Aliases (Apelidos de Caminho) 🗺️

Em projetos grandes, os imports podem ficar confusos: ../../../../services/api. Podemos configurar o tsconfig.json para criar apelidos.

Configuração no tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@services/*": ["services/*"],
      "@models/*": ["models/*"]
    }
  }
}

5. Estruturação de Projeto Profissional 🏗️

Visualizando a Estrutura (Mermaid)

graph TD;
    Root[Raiz do Projeto] --> Src[src];
    Src --> Models[models - Interfaces e Types];
    Src --> Services[services - Lógica e APIs];
    Src --> Utils[utils - Funções utilitárias];
    Src --> App[index.ts - Ponto de Entrada];
    Root --> Dist[dist - Código JS Compilado];
    Root --> Config[tsconfig.json];

6. Exercícios Práticos 📝

Básico: Crie dois arquivos: um que exporte uma classe e outro que a importe e instancie.
Básico: Use o export default para exportar uma função e importe-a com um nome diferente.
Intermediário: Crie uma pasta utils, adicione três funções em arquivos separados e crie um "Barrel File" (index.ts) para exportá-las.
Intermediário: Tente configurar um path alias no seu tsconfig.json e use-o em um import.
Desafio: Refatore um projeto pequeno que use apenas um arquivo para a estrutura profissional sugerida no diagrama acima.

🚀 Mini-Projeto da Aula

Organize um Sistema de Cadastro de Clientes. - Crie uma pasta domain para as interfaces. - Crie uma pasta data para o repositório. - Crie uma pasta shared para funções utilitárias (ex: formatadores de CPF). - Use Barrel Files em cada pasta para exportar as funcionalidades de forma limpa.

Próxima Aula: Vamos colocar o TypeScript para rodar no lado do servidor com TypeScript com Node.js (Backend)!

Aula 10 – TypeScript com Node.js (Backend) 🟢

Objetivo

Nesta aula, aprenderemos a utilizar o TypeScript no desenvolvimento backend com Node.js. Veremos como configurar o ambiente, tipar requisições do Express, usar DTOs e garantir a segurança dos dados que entram na nossa API.

1. Configuração do Ambiente Backend 🛠️

Para rodar TypeScript no Node.js de forma eficiente, usamos ferramentas como ts-node-dev para desenvolvimento e tsc para produção.

Instalação das Dependências

npm install express npm install -D @types/express typescript ts-node-dev

O que são @types?

Como muitas bibliotecas JS não foram escritas em TS, a comunidade mantém o repositório DefinitelyTyped. O pacote @types/express fornece as definições de tipo para que o TS entenda o Express.

2. Tipagem de Requisições e Respostas 📨

O Express no TypeScript permite que tipemos os parâmetros, o corpo da requisição e a resposta.

import express, { Request, Response } from 'express';

const app = express();
app.use(express.json());

app.post('/usuarios', (req: Request, res: Response) => {
    const { nome } = req.body; // req.body aqui é 'any' por padrão
    return res.status(201).json({ mensagem: `Usuário ${nome} criado!` });
});

3. DTOs (Data Transfer Objects) e Validação 🛡️

Para evitar o uso de any e garantir que os dados recebidos são válidos, usamos o padrão DTO.

interface CriarUsuarioDTO {
    nome: string;
    email: string;
    idade: number;
}

app.post('/usuarios', (req: Request, res: Response) => {
    const dados: CriarUsuarioDTO = req.body;
    // Agora temos autocompletar e segurança de tipos em 'dados'
});

4. Middleware Tipado 🧩

Middlewares são funções que rodam entre a requisição e a resposta. Eles também devem ser tipados.

import { NextFunction } from 'express';

function loggerMiddleware(req: Request, res: Response, next: NextFunction) {
    console.log(`[${req.method}] ${req.url}`);
    next();
}

5. Visualizando o Fluxo da API (Mermaid)

sequenceDiagram
    participant Cliente
    participant Express as Servidor Express (TS)
    participant DTO as Validação DTO
    participant DB as Banco de Dados

    Cliente->>Express: POST /produtos (JSON)
    Express->>DTO: Validar Tipos
    DTO-->>Express: Dados OK
    Express->>DB: Salvar Produto
    DB-->>Express: Sucesso
    Express-->>Cliente: 201 Created (JSON)

6. Exercícios Práticos 📝

Básico: Configure um novo projeto Node.js com TypeScript e instale os tipos do Express.
Básico: Crie uma rota GET que retorne um objeto tipado com informações do servidor.
Intermediário: Crie uma interface ProdutoDTO e use-a para tipar o req.body de uma rota de criação.
Intermediário: Implemente um middleware que verifica se um token está presente no header da requisição.
Desafio: Crie uma mini API que gerencia uma lista em memória de "Tarefas" (Tasks). Use interfaces para as tarefas e garanta que as rotas de POST e PUT usem DTOs.

🚀 Mini-Projeto da Aula

Desenvolva uma Mini API REST de Biblioteca. - Rotas para listar, criar e buscar livros por ID. - Use um array em memória para simular o banco de dados. - Tipagem completa de Requests, Responses e Entidades. - Implemente um tratamento de erros centralizado que use o tipo Error.

Próxima Aula: Vamos levar o TypeScript para o navegador com TypeScript com Frontend Moderno (React/Vue/Angular)!

Aula 11 – TypeScript com Frontend Moderno ⚛️

Objetivo

Nesta aula, aprenderemos como o TypeScript potencializa o desenvolvimento frontend, focando em React. Veremos como tipar componentes, props, hooks e o estado global da aplicação de forma profissional.

1. Por que TypeScript no Frontend? 🌐

Aplicações frontend lidam com muitas interações de usuário e dados dinâmicos. O TS ajuda a: - Garantir que as Props passadas para um componente estão corretas. - Evitar erros ao acessar o Estado (State). - Facilitar o uso de Context API e bibliotecas de gerenciamento de estado.

2. Componentes e Props Tipados 🧩

Em React com TS, definimos uma interface para as props do componente.

interface BotaoProps {
    texto: string;
    cor?: "primary" | "secondary";
    onClick: () => void;
}

const Botao = ({ texto, cor = "primary", onClick }: BotaoProps) => {
    return (
        <button className={cor} onClick={onClick}>
            {texto}
        </button>
    );
};

3. Hooks Tipados (useState / useRef) 🎣

O TS geralmente infere o tipo do useState, mas às vezes precisamos ser explícitos, especialmente com arrays ou objetos.

import { useState, useRef } from 'react';

// Inferência automática
const [contagem, setContagem] = useState(0); 

// Explícito (Union Type)
const [usuario, setUsuario] = useState<Usuario | null>(null);

// Tipagem de Referências (DOM)
const inputRef = useRef<HTMLInputElement>(null);

4. Context API Tipada 🌍

Compartilhar estado global com segurança de tipos é um dos maiores benefícios do TS no React.

interface ThemeContextType {
    tema: "light" | "dark";
    toggleTema: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

5. Visualizando a Hierarquia de Componentes (Mermaid)

graph TD;
    App[App.tsx] --> Header[Header.tsx];
    App --> Main[MainContent.tsx];
    Main --> Card["Card.tsx (Generic)"];
    Main --> List["List.tsx (Generic)"];
    style Card fill:#f9f,stroke:#333
    style List fill:#f9f,stroke:#333

6. Exercícios Práticos 📝

Básico: Crie um componente Saudacao que receba uma prop nome: string e exiba na tela.
Básico: Crie um estado usando useState para armazenar uma lista de strings e exiba-os em uma lista <ul>.
Intermediário: Crie um componente de Input reutilizável que aceite todas as props padrão de um input HTML (use React.InputHTMLAttributes).
Intermediário: Implemente um hook customizado useLocalStorage<T> que seja genérico.
Desafio: Crie um componente Tabela<T> genérico que receba uma lista de dados de tipo T e uma configuração de colunas para renderizá-los.

🚀 Mini-Projeto da Aula

Desenvolva um Dashboard de Tarefas (Todo List). - Componentes para: Header, AddTodoForm, TodoList e TodoItem. - Interfaces bem definidas para a entidade Todo (id, titulo, concluida). - Use useState para gerenciar a lista e garanta que todas as funções de manipulação (adicionar, remover, alternar status) estejam devidamente tipadas.

Próxima Aula: Vamos aprender a conectar nossas aplicações ao mundo externo em Integração com APIs e Tipagem de Dados Externos!

Aula 12 – Integração com APIs e Tipagem de Dados Externos 📡

Objetivo

Nesta aula, aprenderemos a consumir serviços externos garantindo a integridade dos dados. Veremos como tipar respostas do Axios/Fetch, usar o padrão DTO para transformar dados e introduziremos a validação em runtime com bibliotecas como o Zod.

1. Fetch e Axios com TypeScript 🌐

Ao fazer uma requisição, o TypeScript não sabe o que virá da rede. Precisamos informar o tipo esperado para ter segurança ao manipular a resposta.

Exemplo com Axios

import axios from 'axios';

interface Usuario {
    id: number;
    name: string;
    email: string;
}

async function buscarUsuario(id: number): Promise<Usuario> {
    const { data } = await axios.get<Usuario>(`https://api.exemplo.com/users/${id}`);
    return data;
}

2. O Padrão DTO (Data Transfer Object) 🔄

Muitas vezes, a API retorna dados em um formato bruto que não queremos usar diretamente no nosso frontend ou lógica de negócio. O DTO serve para mapear esses dados.

interface UsuarioAPI {
    id: number;
    full_name: string;
    user_email: string;
}

interface UsuarioApp {
    id: number;
    nome: string;
    email: string;
}

function mapToApp(user: UsuarioAPI): UsuarioApp {
    return {
        id: user.id,
        nome: user.full_name,
        email: user.user_email
    };
}

3. Validação em Runtime com Zod 🛡️

O TypeScript remove os tipos no build final. Para garantir que os dados externos são realmente o que dizem ser enquanto o app roda, usamos o Zod.

Criando um Schema

import { z } from 'zod';

const UsuarioSchema = z.object({
    id: z.number(),
    nome: z.string().min(3),
    email: z.string().email()
});

type Usuario = z.infer<typeof UsuarioSchema>;

// Validação
const resultado = UsuarioSchema.safeParse(dadosExternos);
if (!resultado.success) {
    console.error("Dados inválidos!", resultado.error);
}

4. Tratamento de Erros de API ⚠️

Devemos tipar os erros para dar um feedback útil ao usuário.

try {
    const user = await buscarUsuario(1);
} catch (error) {
    if (axios.isAxiosError(error)) {
        console.error("Erro na API:", error.response?.data.message);
    } else {
        console.error("Erro inesperado:", error);
    }
}

5. Visualizando o Ciclo de Dados (Mermaid)

graph LR;
    API[API Externa] -- "JSON" --> Schema{Validação Zod};
    Schema -- "Falha" --> Erro[Tratamento de Erros];
    Schema -- "Sucesso" --> DTO[Mapeador DTO];
    DTO --> App[Estado da Aplicação];
    style Schema fill:#f96,stroke:#333
    style DTO fill:#bbf,stroke:#333

6. Exercícios Práticos 📝

Básico: Crie uma interface para a resposta da API JSONPlaceholder (objetos de Post).
Básico: Use o fetch para buscar dados e exiba o título do primeiro post no console (tipado).
Intermediário: Crie uma função que receba um objeto de API "sujo" e retorne um objeto "limpo" usando o padrão DTO.
Intermediário: Instale o Zod e crie um schema para um objeto Produto. Tente validar um objeto que falte propriedades obrigatórias.
Desafio: Implemente uma função genérica request<T>(url: string) que use Axios e retorne uma Promise<T>, tratando erros de rede automaticamente.

🚀 Mini-Projeto da Aula

Desenvolva um Buscador de Repositórios do GitHub. - Use a API pública do GitHub (https://api.github.com/users/USUARIO/repos). - Crie interfaces para o Repositorio. - Valide os dados recebidos com Zod. - Exiba a lista de repositórios (nome, descrição e estrelas) em uma interface React ou no console do Node de forma tipada.

Próxima Aula: Vamos garantir que nosso código continue funcionando com Testes com TypeScript!

Aula 13 – Testes com TypeScript 🧪

Objetivo

Nesta aula, aprenderemos a garantir a qualidade e a estabilidade do nosso código usando testes automatizados. Veremos como configurar o Jest com TypeScript, criar mocks tipados e escrever testes unitários e de integração robustos.

1. Configurando o Jest com TypeScript 🛠️

O Jest é o framework de testes mais popular no ecossistema JS/TS. Para rodar testes em TS, usamos o ts-jest.

Instalação

npm install -D jest ts-jest @types/jest npx ts-jest config:init

2. Testes Unitários Tipados 🧩

Testes unitários testam a menor parte possível do código (funções, classes) de forma isolada.

// math.ts
export const somar = (a: number, b: number) => a + b;

// math.test.ts
import { somar } from './math';

describe('Função somar', () => {
    it('deve retornar 5 ao somar 2 e 3', () => {
        const resultado: number = somar(2, 3);
        expect(resultado).toBe(5);
    });
});

3. Mocks Tipados com TypeScript 🎭

Mocks são usados para substituir dependências complexas (como APIs ou Banco de Dados) por versões controladas durante os testes.

import axios from 'axios';
import { buscarUsuario } from './servico';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

it('deve buscar um usuário com sucesso', async () => {
    mockedAxios.get.mockResolvedValue({ data: { id: 1, nome: "Ricardo" } });
    const user = await buscarUsuario(1);
    expect(user.nome).toBe("Ricardo");
});

4. Testes de Integração 🔗

Testes de integração verificam se diferentes partes do sistema (como Rotas da API e Lógica de Negócio) funcionam bem juntas.

import request from 'supertest';
import app from './app';

describe('API de Usuários', () => {
    it('deve criar um novo usuário', async () => {
        const res = await request(app)
            .post('/usuarios')
            .send({ nome: 'Teste', email: 'teste@exemplo.com' });

        expect(res.status).toBe(201);
        expect(res.body.nome).toBe('Teste');
    });
});

5. Visualizando o Ciclo de Testes (Mermaid)

graph TD;
    Red["1. Falha (Vermelho)"] --> Green["2. Passa (Verde)"];
    Green --> Refactor["3. Refatoração"];
    Refactor --> Red;
    style Red fill:#f99,stroke:#333
    style Green fill:#9f9,stroke:#333
    style Refactor fill:#99f,stroke:#333

6. Exercícios Práticos 📝

Básico: Configure o Jest em um projeto TypeScript e crie um teste para uma função de multiplicão simples.
Básico: Escreva um teste que verifique se uma função que lança erro realmente o faz (use toThrow()).
Intermediário: Crie uma classe Calculadora e escreva um conjunto de testes (describe) para todos os seus métodos.
Intermediário: Use o jest.spyOn() para verificar se uma função foi chamada dentro de outra.
Desafio: Escreva um teste de integração para uma rota GET /produtos que deve retornar uma lista de produtos tipados.

🚀 Mini-Projeto da Aula

Crie uma Suíte de Testes para o Repositório Genérico. - Recupere o código do repositório da Aula 06. - Escreva testes unitários para os métodos salvar, obterTodos e buscarPorId. - Garanta 100% de cobertura nos métodos do repositório. - Use mocks se o repositório depender de alguma função externa de persistência.

Próxima Aula: Vamos aprender a aplicar as melhores práticas de design com Padrões de Projeto com TypeScript!

Aula 14 – Padrões de Projeto com TypeScript 🛡️

Objetivo

Nesta aula, aprenderemos a elevar a qualidade do nosso software aplicando Padrões de Projeto (Design Patterns). Veremos como o TypeScript facilita a implementação de arquiteturas robustas usando Repositories, Services e Injeção de Dependência.

1. Padrão Repository e Service Layer 🏗️

A separação de responsabilidades é essencial. O Repository cuida do acesso aos dados, enquanto o Service cuida da lógica de negócio.

Estrutura

Repository: buscarTodos(), salvar().
Service: criarNovoUsuario(), validarRegrasDeNegocio().

interface IUsuarioRepository {
    salvar(usuario: Usuario): Promise<void>;
}

class UsuarioService {
    constructor(private repo: IUsuarioRepository) {}

    async registrar(nome: string) {
        // Lógica de negócio aqui
        await this.repo.salvar({ nome });
    }
}

2. Injeção de Dependência (DI) 💉

Em vez de criar as dependências dentro da classe, nós as "injetamos" (geralmente pelo construtor). Isso torna o código mais fácil de testar (usando mocks).

// No mundo real, usamos frameworks como Inversify ou Nestjs
const meuRepo = new SqlUsuarioRepository();
const meuServico = new UsuarioService(meuRepo);

3. Padrão Factory 🏭

Usado quando a criação de um objeto é complexa ou depende de condições.

class PagamentoFactory {
    static criar(tipo: "cartao" | "boleto") {
        if (tipo === "cartao") return new PagamentoCartao();
        return new PagamentoBoleto();
    }
}

4. Padrão Strategy ♟️

Permite definir uma família de algoritmos, colocá-los em classes separadas e tornar seus objetos intercambiáveis.

interface EstrategiaDesconto {
    calcular(valor: number): number;
}

class DescontoBlackFriday implements EstrategiaDesconto {
    calcular(valor: number) { return valor * 0.5; }
}

5. Visualizando o Padrão Repository (Mermaid)

graph LR;
    Controller[Controller / API] --> Service[Service - Lógica];
    Service --> RepoInterface[Interface do Repositório];
    RepoInterface --> SqlRepo[SQL Repository];
    RepoInterface --> MongoRepo[Mongo Repository];
    style RepoInterface fill:#f9f,stroke:#333

6. Exercícios Práticos 📝

Básico: Crie uma classe LogService e use injeção de dependência para passá-la para outra classe.
Básico: Implemente um Factory que crie diferentes tipos de Notificacao (Email, SMS).
Intermediário: Implemente o padrão Strategy para diferentes formas de calcular o frete (Normal, Expresso).
Intermediário: Crie uma interface IUserRepository e implemente uma versão InMemoryUserRepository.
Desafio: Refatore o Mini-Projeto da Aula 10 aplicando os padrões Repository e Service Layer.

🚀 Mini-Projeto da Aula

Implemente um Sistema de Processamento de Pagamentos. - Use o padrão Factory para criar o método de pagamento. - Use o padrão Strategy para aplicar diferentes taxas dependendo do método. - Use Injeção de Dependência para passar o serviço de log para o processador de pagamentos. - Tudo deve ser 100% tipado com interfaces.

Próxima Aula: Vamos aprender a escrever código limpo e entender a arquitetura em Clean Code e Arquitetura!

Aula 15 – Clean Code e Arquitetura 📐

Objetivo

Nesta aula, consolidaremos os conhecimentos técnicos com os princípios de código limpo e arquitetura. Aprenderemos a aplicar o SOLID, organizar o projeto em camadas e entenderemos os fundamentos do Domain-Driven Design (DDD).

1. Princípios SOLID com TypeScript 💎

O SOLID é um conjunto de cinco princípios que tornam o software mais compreensível, flexível e sustentável.

Letra	Princípio	Descrição no TS
S	Single Responsibility	Uma classe/função deve ter apenas uma razão para mudar.
O	Open/Closed	Aberto para extensão, fechado para modificação.
L	Liskov Substitution	Subclasses devem ser substituíveis por suas classes base.
I	Interface Segregation	Muitas interfaces específicas são melhores que uma geral.
D	Dependency Inversion	Dependa de abstrações (interfaces), não de implementações.

2. Separação de Responsabilidades e Camadas 🏢

Uma aplicação profissional é dividida em camadas para facilitar a manutenção e os testes.

Domain: Onde vivem as regras de negócio e interfaces principais.
Application: Casos de uso e lógica de orquestração (Services).
Infrastructure: Detalhes técnicos (Base de dados, chamadas de API, Frameworks).

3. Domain-Driven Design (Introdução) 🗺️

O DDD foca em entender o problema do cliente e modelar o software fielmente a esse problema. - Entities: Objetos com identidade única (ex: Usuário com ID). - Value Objects: Objetos definidos por seus atributos (ex: Endereço). - Repositories: Porta de saída para persistência.

4. Boas Práticas Profissionais 🚀

Nomes Significativos: Use nomes que revelem a intenção (isValid em vez de v).
Funções Pequenas: Cada função deve fazer apenas uma coisa.
Evite Comentários Óbvios: O código deve ser autoexplicativo através de tipos e bons nomes.

5. Visualizando a Arquitetura em Camadas (Mermaid)

graph TD;
    External[Mundo Externo / UI / API] --> Infra[Infraestrutura];
    Infra --> App[Aplicação / Services];
    App --> Domain[Domínio / Entidades];
    style Domain fill:#f9f,stroke:#333

6. Exercícios Práticos 📝

Básico: Identifique uma violação do princípio de Responsabilidade Única em um código e proponha uma refatoração.
Básico: Renomeie variáveis e funções de um código legado para nomes mais semânticos e tipados.
Intermediário: Crie uma interface "Geral" e quebre-a em três interfaces menores (Segregação de Interface).
Intermediário: Implemente um "Value Object" para representar um CPF, incluindo a validação no construtor.
Desafio: Esboce a estrutura de pastas de um projeto seguindo a separação entre Domain, Application e Infrastructure.

🚀 Mini-Projeto da Aula

Refatore o seu projeto acumulado até aqui (Sistema de Pagamentos ou Biblioteca) aplicando os princípios de Clean Code e SOLID. - Garanta que nenhuma função tenha mais de 20 linhas. - Verifique se a camada de domínio é independente de bibliotecas externas (como o Express). - Utilize Injeção de Dependência para todos os serviços e repositórios.

Próxima Aula: É hora do Projeto Final e Deploy! Vamos colocar tudo em prática e lançar nossa aplicação!

Aula 16 – Projeto Final e Deploy 🚀

Objetivo

Chegamos ao fim da nossa jornada! Nesta aula, consolidaremos tudo o que aprendemos em um projeto completo. Veremos como preparar nosso código para produção, Dockerizar a aplicação e realizar o deploy em nuvem.

1. O Projeto Final: Sistema de E-commerce Full-Stack 🛒

O desafio final é construir uma API robusta e uma interface simples que se conectem.

Requisitos Técnicos

Tipagem: 100% dos dados tipados (Interfaces, Types, Enums).
Backend: Node.js + Express com Repository Pattern e Services.
Frontend: React com Hooks e Context API tipados.
Segurança: Validação de dados externos com Zod.
Qualidade: Pelo menos 20% de cobertura de testes unitários com Jest.

2. Preparando o Build para Produção 🏗️

O código TypeScript não roda diretamente em servidores de produção. Precisamos transpilá-lo para JavaScript.

npm run build Compiling TypeScript... Build success! Files generated in /dist

Atenção

Sempre verifique se a pasta dist/ está no seu .gitignore. Você deve subir o código fonte (src/), não o código compilado.

3. Dockerização (Opcional Profissional) 🐳

O Docker garante que sua aplicação rode da mesma forma em qualquer máquina.

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["node", "dist/index.js"]

4. Estratégias de Deploy 🚀

Opções Populares:

Vercel / Netlify: Excelentes para o Frontend (React).
Railway / Render / Heroku: Ótimos para o Backend (Node.js).
AWS / Google Cloud: Para projetos de grande escala.

5. Visualizando o Ciclo de Vida do Projeto (Mermaid)

graph TD;
    Dev[Desenvolvimento TS] --> Test[Testes Automatizados];
    Test --> Build[Build / Transpilação];
    Build --> Artifact[Artefato JS];
    Artifact --> Deploy[Deploy em Nuvem];
    Deploy --> Monitor[Monitoramento e Feedbacks];
    style Deploy fill:#f96,stroke:#333

6. Exercícios Práticos 📝

Básico: Execute o comando tsc e veja o JavaScript gerado na pasta de saída.
Básico: Crie um arquivo .gitignore que ignore as pastas node_modules e dist.
Intermediário: Configure um script no package.json chamado start que rode o código já compilado.
Intermediário: Crie um Dockerfile básico para sua aplicação Node.js.
Desafio: Realize o deploy de uma pequena API TypeScript em um serviço gratuito como o Render ou Railway.

🎓 Conclusão do Curso

Parabéns! Você completou o treinamento TypeScript Profissional. Você agora domina uma das linguagens mais requisitadas do mercado e está pronto para construir aplicações escaláveis, seguras e de alta qualidade.

Obrigado por participar! Continue praticando e explorando a documentação oficial em typescriptlang.org.

Exercicios

Listas de Exercícios 🏋️

Pratique o que aprendeu com listas graduadas (Fácil, Médio, Desafio) focadas em TypeScript Profissional.

Módulo 1: Core & Linguagem
Módulo 2: Ecossistema & Apps

Exercícios: Aula 01 – Introdução ao TypeScript e Setup Profissional 🧠

🟢 Nível: Básico

Instalação Local: Inicialize um projeto Node.js (npm init -y) e instale o TypeScript como dependência de desenvolvimento.
Configuração Inicial: Gere o arquivo tsconfig.json e altere a propriedade outDir para "./dist" e rootDir para "./src".

🟡 Nível: Intermediário

Compilação Manual: Crie um arquivo src/app.ts, adicione um console.log e execute o comando npx tsc para gerar o arquivo na pasta dist.
Watch Mode: Configure o compilador para monitorar alterações automaticamente (watch mode) e valide se o arquivo JS é atualizado ao salvar o TS.

🔴 Nível: Desafio

Automação com NPM: No seu package.json, crie dois scripts: build (para compilar uma única vez) e dev (para rodar o compilador em modo watch). Teste ambos os comandos via terminal.

Exercícios: Aula 02 – Tipos Fundamentais e Inferência 🛠️

🟢 Nível: Básico

Declaração de Primitivos: Crie variáveis para armazenar seu nome, sua idade e se você gosta de TypeScript (booleano), usando tipagem explícita.
Arrays Simples: Crie um array de números contendo os anos em que você realizou cursos e um array de strings com os nomes desses cursos.

🟡 Nível: Intermediário

Trabalhando com Tuplas: Crie uma tupla chamada coordenadas que aceite dois números (latitude e longitude).
Uso de Enums: Crie um enum chamado NivelAcesso com as opções ADMIN, USER e GUEST. Crie uma variável do tipo deste enum.

🔴 Nível: Desafio

Segurança com Unknown: Crie uma função que aceita um parâmetro do tipo unknown. Dentro dela, use typeof para verificar se é uma string; se for, imprima-a em letras maiúsculas; caso contrário, imprima uma mensagem genérica.

Exercícios: Aula 03 – Tipos Avançados 🧩

🟢 Nível: Básico

Union Types: Crie uma variável que possa receber string ou boolean.
Literal Types: Crie um tipo chamado Alinhamento que permita apenas os valores "left", "center" ou "right".

🟡 Nível: Intermediário

Intersection Types: Crie dois tipos de objetos, Pessoa (com nome) e Trabalhador (com cargo), e crie um terceiro tipo que seja a interseção de ambos.
Narrowing com typeof: Escreva uma função que receba number | string e retorne o dobro se for número ou o comprimento se for string.

🔴 Nível: Desafio

Validação Completa: Crie um Type Alias para um UsuarioAPI que pode ter um ID numérico ou ser null. Use Type Guards para garantir que você só acesse propriedades do ID se ele não for nulo.

Exercícios: Aula 04 – Interfaces e Modelagem de Domínio 🏗️

🟢 Nível: Básico

Interface Simples: Crie uma interface Usuario com nome, idade e uma propriedade opcional site.
Extensão: Crie uma interface Admin que estenda Usuario e adicione a propriedade nivel (número).

🟡 Nível: Intermediário

Readonly: Crie uma interface Configuracao onde todas as propriedades sejam readonly. Tente alterar uma após a criação.
Interface de Função: Defina uma interface para uma função que receba dois números e retorne um booleano.

🔴 Nível: Desafio

Modelagem de Sistema: Modele as interfaces para um sistema de "Pedidos de Ecommerce". Deve haver um Cliente, um Produto e um Pedido (que contém uma lista de produtos e o cliente).

Exercícios: Aula 05 – Classes e Programação Orientada a Objetos 🏛️

🟢 Nível: Básico

Classe Simples: Crie uma classe Animal com um método falar().
Herança: Crie uma classe Cachorro que herda de Animal e sobrescreva o método falar() para latir.

🟡 Nível: Intermediário

Modificadores de Acesso: Crie uma classe Conta com um atributo saldo privado. Adicione métodos para depositar e ver o saldo.
Getters e Setters: Crie uma classe Retangulo com largura e altura. Use getters e setters para garantir que os valores sejam sempre positivos.

🔴 Nível: Desafio

Abstração: Crie uma classe abstrata Funcionario com um método abstrato calcularSalario(). Implemente as subclasses Desenvolvedor e Gerente com lógicas de cálculo diferentes.

Exercícios: Aula 06 – Generics (Programação Genérica) 📦

🟢 Nível: Básico

Função Generics: Escreva uma função genérica chamada duplicar<T> que receba um item e retorne um array contendo o item duas vezes.
Array Genérico: Crie uma função que receba um array genérico e retorne o último elemento.

🟡 Nível: Intermediário

Classe Genérica: Crie uma classe Pilha<T> que permita adicionar (push) e remover (pop) itens de um tipo genérico.
Constraints: Crie uma função genérica que aceite apenas objetos que possuam a propriedade .id.

🔴 Nível: Desafio

Interface Genérica: Crie uma interface para uma RespostaAPI<T> que contenha os campos status, data (do tipo T) e error. Teste-a com diferentes tipos de dados.

Exercícios: Aula 07 – Utility Types e Manipulação de Tipos ⚙️

🟢 Nível: Básico

Partial: Use o utilitário Partial em uma interface Usuario para criar uma variável que tenha apenas o nome.
Readonly: Crie uma versão Readonly de um objeto Carro e tente alterar uma propriedade.

🟡 Nível: Intermediário

Pick e Omit: A partir de uma interface Funcionario, use Pick para criar um tipo com apenas nome e cargo, e Omit para criar um tipo que não tenha o salario.
Record: Use o Record para mapear códigos de erro (números) para mensagens de erro (strings).

🔴 Nível: Desafio

Mapeamento de API: Crie um tipo que represente a resposta de uma "atualização de perfil", onde todos os campos do usuário original são opcionais, exceto o id, que deve ser obrigatório.

Exercícios: Aula 08 – Manipulação Avançada de Tipos 🧪

🟢 Nível: Básico

keyof: Use o operador keyof em uma interface Carro para criar uma união de suas chaves.
Indexed Access: Dada a interface Config, obtenha o tipo da propriedade versao usando acesso indexado.

🟡 Nível: Intermediário

Conditional Types: Crie um tipo que verifique se um dado tipo T é uma string. Se for, retorne "TEXTO", se não, retorne "OUTRO".
Template Literals: Crie um tipo que combine as direções "Norte" | "Sul" com as intensidades "Forte" | "Fraca".

🔴 Nível: Desafio

Uso de infer: Escreva um tipo utilitário que extraia o tipo do primeiro elemento de uma tupla genérica usando infer.

Exercícios: Aula 09 – Módulos e Organização Profissional 📁

🟢 Nível: Básico

Export/Import: Crie um módulo para uma classe Calculadora e importe-o em outro arquivo para realizar uma soma.
Export Default: Exporte uma constante por padrão e importe-a com um apelido à sua escolha.

🟡 Nível: Intermediário

Barrel Files: Crie uma estrutura de pastas para controllers e crie um arquivo index.ts que exporta tudo o que há dentro dela.
Namespaces: Crie um namespace para agrupar funções de validação de formulário (e-mail, senha).

🔴 Nível: Desafio

Path Aliases: Configure um alias @models no tsconfig.json e use-o para importar uma interface de uma pasta profunda do projeto.

Exercícios: Aula 10 – TypeScript com Node.js (Backend) 🟢

🟢 Nível: Básico

Instalação Backend: Inicialize um projeto Node, instale o express e os tipos @types/express.
Primeira Rota: Crie uma rota GET / que retorne uma mensagem de boas-vindas tipada.

🟡 Nível: Intermediário

Tipagem de Body: Crie uma rota POST /usuarios e use uma interface para tipar os dados recebidos no req.body.
Middleware de Log: Implemente um middleware que registre o método e a URL de cada requisição.

🔴 Nível: Desafio

Tratamento de Erros: Crie um middleware de erro customizado que capture exceções e retorne uma resposta JSON padronizada e tipada.

Exercícios: Aula 11 – TypeScript com Frontend Moderno ⚛️

🟢 Nível: Básico

Props de Componente: Crie um componente Botao em React que receba as props label (string) e ativo (boolean).
Estado Simples: Use o useState para criar um contador tipado que só aceite números.

🟡 Nível: Intermediário

Eventos: Tipar o evento de um formulário (React.FormEvent) em uma função handleSubmit.
useRef Tipado: Crie um formulário onde um botão "Focar" use um useRef para dar foco a um input de texto.

🔴 Nível: Desafio

Context API: Crie um contexto para gerenciar as informações do usuário logado. Defina uma interface para o contexto e garanta que o provedor seja tipado corretamente.

Exercícios: Aula 12 – Integração com APIs e Tipagem de Dados Externos 📡

🟢 Nível: Básico

Interface de API: Crie uma interface para o objeto retornado por uma API de clima (ex: OpenWeather).
Fetch Tipado: Realize um fetch para uma URL de teste e use o operador as para converter o resultado para a sua interface.

🟡 Nível: Intermediário

Axios Generics: Use o Axios para fazer um get genérico chamando uma interface Post.
Mapeamento DTO: Crie uma função que transforme um objeto de usuário da API (com nomes em snake_case) para um objeto da aplicação (com nomes em camelCase).

🔴 Nível: Desafio

Zod Schema: Crie um schema Zod para validar a entrada de um formulário de login (email e senha com requisitos de tamanho).

Exercícios: Aula 13 – Testes com TypeScript 🧪

🟢 Nível: Básico

Setup Jest: Configure um arquivo jest.config.js básico para aceitar arquivos TypeScript.
Primeiro Teste: Crie uma função que retorne a soma de três números e escreva um teste que valide o resultado.

🟡 Nível: Intermediário

Teste de Exceção: Escreva uma função que valide a idade de um usuário e lance um erro se for menor de 18. Teste se o erro é lançado corretamente.
Mock de Função: Use jest.fn() para simular o comportamento de um callback passado para uma função de processamento.

🔴 Nível: Desafio

Mock de API: Use o jest.mock('axios') para simular uma chamada de API e validar se o seu serviço está tratando a resposta corretamente.

Exercícios: Aula 14 – Padrões de Projeto com TypeScript 🛡️

🟢 Nível: Básico

Injeção de Dependência: Crie uma função que receba um objeto de configuração por parâmetro (em vez de usá-lo globalmente).
Singleton: Implemente o padrão Singleton para uma classe de Gerenciamento de Configurações.

🟡 Nível: Intermediário

Repository Pattern: Crie uma interface IRepository<T> e implemente uma versão básica para uma entidade Produto.
Factory Pattern: Implemente uma fábrica de objetos que crie diferentes tipos de "Veículos".

🔴 Nível: Desafio

Strategy Pattern: Use o padrão Strategy para implementar diferentes formas de cálculo de imposto baseadas no tipo de produto.

Exercícios: Aula 15 – Clean Code e Arquitetura 📐

🟢 Nível: Básico

Nomes Semânticos: Refatore uma função com nomes genéricos (ex: a, b, fn1) para nomes que expliquem sua função.
Função de Responsabilidade Única: Quebre uma função que faz duas coisas (ex: valida e salva no banco) em duas funções separadas.

🟡 Nível: Intermediário

Inversão de Dependência: Refatore uma classe que instancia diretamente um serviço para que ela receba o serviço no construtor.
Segregação de Interface: Quebre uma interface "gorda" que tem 10 métodos em três interfaces menores e mais específicas.

🔴 Nível: Desafio

Domain Entities: Crie uma Entidade de Domínio para um "Pedido" que contenha uma lógica interna para calcular o total sem depender de serviços externos.

Exercícios: Aula 16 – Projeto Final e Deploy 🚀

🟢 Nível: Básico

Build de Produção: Execute o comando npm run build e analise o código gerado na pasta dist.
Scripts NPM: Configure um script start que execute o arquivo dist/index.js.

🟡 Nível: Intermediário

Docker Básico: Escreva um Dockerfile que copie apenas o necessário para rodar a aplicação já compilada.
Variáveis de Ambiente: Configure o seu projeto para ler a porta do servidor de uma variável de ambiente (process.env.PORT).

🔴 Nível: Desafio

Pipeline CI/CD: Documente os passos necessários para configurar o deploy automático do seu projeto no GitHub Pages ou Vercel.

Projetos

Projetos Práticos 🚀

Construa portfólio com 16 mini-projetos reais e marcos importantes na sua trajetória.

Módulo 1: Core & Linguagem
Módulo 2: Ecossistema & Apps

Mini-Projeto: Aula 01 – Setup do Workspace Profissional 🛠️

Objetivo

Configurar um ambiente de desenvolvimento TypeScript completo, pronto para produção, seguindo as melhores práticas de organização de pastas e automação de scripts.

🏗️ Requisitos do Projeto

Inicializar um projeto Node.js.
Configurar o TypeScript com tsconfig.json.
Organizar a estrutura de pastas (src e dist).
Automatizar o processo de build e execução.

🛠️ Passo a Passo

1. Inicialização

Abra o terminal na pasta do projeto e execute:

npm init -y npm install -D typescript ts-node-dev

2. Configuração do TS

Gere o arquivo de configuração e ajuste as seguintes propriedades:

npx tsc --init

Configurações recomendadas no tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

3. Scripts de Automação

No arquivo package.json, adicione:

"scripts": {
  "dev": "ts-node-dev --respawn --transpile-only src/index.ts",
  "build": "tsc",
  "start": "node dist/index.js"
}

4. Código de Teste

Crie a pasta src/ e o arquivo index.ts:

const mensagem: string = "Ambiente TypeScript configurado com sucesso! 🚀";
console.log(mensagem);

✅ Verificação Final

Execute npm run dev e verifique se o log aparece no terminal.
Altere o texto da mensagem e veja se o servidor reinicia sozinho.
Execute npm run build e verifique se a pasta dist/ foi criada com o arquivo .js.

Mini-Projeto: Aula 02 – Calculadora de IMC (Tipos Primitivos) ⚖️

Objetivo

Praticar o uso de tipos primitivos (number, string), inferência de tipos e interação simples via console.

🏗️ Requisitos do Projeto

Receber peso e altura do usuário.
Calcular o IMC (Peso / Altura²).
Exibir o resultado formatado com uma classificação.
Usar tipagem explícita para as variáveis principais.

🛠️ Passo a Passo

1. Estrutura do Código

No seu arquivo src/index.ts, defina as variáveis:

const nome: string = "Ricardo";
const peso: number = 85;
const altura: number = 1.80;

function calcularIMC(p: number, a: number): number {
    return p / (a * a);
}

2. Lógica de Classificação

Use o resultado para determinar a categoria:

const imc = calcularIMC(peso, altura);
let classificacao: string;

if (imc < 18.5) classificacao = "Abaixo do peso";
else if (imc < 25) classificacao = "Peso normal";
else classificacao = "Sobrepeso";

console.log(`${nome}, seu IMC é ${imc.toFixed(2)} (${classificacao})`);

✅ Desafio Extra

Use um enum para as categorias de classificação (ABAIXO, NORMAL, SOBREPESO).
Crie uma tupla para armazenar os dados do usuário: [string, number, number].

Mini-Projeto: Aula 03 – Gerenciador de Inventário (Tipos Avançados) 📦

Objetivo

Utilizar Union Types, Type Aliases e Intersection Types para modelar um sistema de inventário de produtos.

🏗️ Requisitos do Projeto

Definir tipos para diferentes categorias de produtos (Eletrônicos, Alimentos).
Usar intersecção para criar modelos completos.
Implementar uma função que aceita diferentes tipos de IDs (número ou string).

🛠️ Passo a Passo

1. Modelagem com Type Aliases

type Categoria = "Eletronico" | "Alimento" | "Vestuario";

type ProdutoBase = {
    id: string | number;
    nome: string;
    preco: number;
    categoria: Categoria;
};

type Especificacoes = {
    peso: number;
    dimensoes?: string;
};

// Intersection Type
type ProdutoCompleto = ProdutoBase & Especificacoes;

2. Manipulação Tipada

Crie um array de produtos e uma função para buscar por ID.

const inventario: ProdutoCompleto[] = [
    { id: 1, nome: "Celular", preco: 2000, categoria: "Eletronico", peso: 0.2 },
    { id: "A-123", nome: "Maçã", preco: 5, categoria: "Alimento", peso: 0.1 }
];

function buscar(id: string | number) {
    return inventario.find(p => p.id === id);
}

✅ Desafio Extra

Implemente um Type Guard para verificar se um produto é da categoria "Eletronico".
Use Literal Types para definir o status do produto: "em_estoque" | "esgotado".

Mini-Projeto: Aula 04 – Sistema de Gerenciamento de Tarefas (Interfaces) ✅

Objetivo

Modelar um sistema de tarefas (To-Do) corporativo usando interfaces, propriedades opcionais e herança de interfaces.

🏗️ Requisitos do Projeto

Interface para Usuario.
Interface para Tarefa com campos opcionais.
Interface para Projeto que agrupa várias tarefas.
Garantir imutabilidade em campos críticos com readonly.

🛠️ Passo a Passo

1. Definição das Interfaces

interface IUser {
    readonly id: number;
    nome: string;
    email: string;
}

interface ITask {
    titulo: string;
    descricao?: string;
    concluida: boolean;
    responsavel: IUser;
}

interface IProject {
    nome: string;
    tarefas: ITask[];
}

2. Implementação

Crie uma função que receba um IProject e retorne apenas as tarefas concluídas.

const meuProjeto: IProject = {
    nome: "Refatoração TS",
    tarefas: [
        { titulo: "Setup", concluida: true, responsavel: { id: 1, nome: "R", email: "r@b.com" } },
        { titulo: "Build", concluida: false, responsavel: { id: 1, nome: "R", email: "r@b.com" } }
    ]
};

function listarConcluidas(projeto: IProject): ITask[] {
    return projeto.tarefas.filter(t => t.concluida);
}

✅ Desafio Extra

Crie uma interface ITaskUrgente que estende ITask e adiciona um campo prazo: Date.
Use Declaration Merging para adicionar uma propriedade avatar na interface IUser.

Mini-Projeto: Aula 05 – Sistema Bancário (Classes e POO) 🏦

Objetivo

Aplicar os conceitos de Programação Orientada a Objetos (Classes, Modificadores de Acesso, Herança) para criar um sistema de gerenciamento de contas bancárias.

🏗️ Requisitos do Projeto

Classe base Conta com atributos privados.
Uso de protected para permitir herança.
Subclasses ContaCorrente e ContaPoupanca com regras específicas.
Implementação de getters e setters para validação de saldo.

🛠️ Passo a Passo

1. Classe Base

abstract class Conta {
    constructor(
        private _titular: string,
        protected _saldo: number = 0
    ) {}

    get saldo() { return this._saldo; }

    depositar(valor: number): void {
        if (valor > 0) this._saldo += valor;
    }

    abstract sacar(valor: number): boolean;
}

2. Extensões

class ContaCorrente extends Conta {
    sacar(valor: number): boolean {
        if (valor <= this._saldo + 100) { // Limite extra
            this._saldo -= valor;
            return true;
        }
        return false;
    }
}

class ContaPoupanca extends Conta {
    sacar(valor: number): boolean {
        if (valor <= this._saldo) {
            this._saldo -= valor;
            return true;
        }
        return false;
    }
}

✅ Desafio Extra

Crie uma classe Banco que armazena um array de Conta e possui um método para listar todos os titulares e seus saldos (Polimorfismo).
Adicione uma propriedade readonly chamada numeroConta gerada automaticamente no construtor.

Mini-Projeto: Aula 06 – Repositório de Dados Genérico (Generics) 📦

Objetivo

Criar uma estrutura de dados genérica e reutilizável que possa gerenciar qualquer tipo de entidade (Usuários, Produtos, etc.) mantendo a tipagem original.

🏗️ Requisitos do Projeto

Classe genérica Repository<T>.
Restrição (Constraints) para garantir que as entidades possuam um id.
Métodos para Adicionar, Listar, Buscar por ID e Remover.

🛠️ Passo a Passo

1. Interface de Entidade

interface Entity {
    id: number | string;
}

2. Classe Repositório

class Repository<T extends Entity> {
    private data: T[] = [];

    add(item: T): void {
        this.data.push(item);
    }

    getAll(): T[] {
        return this.data;
    }

    findById(id: number | string): T | undefined {
        return this.data.find(item => item.id === id);
    }

    remove(id: number | string): void {
        this.data = this.data.filter(item => item.id !== id);
    }
}

✅ Desafio Extra

Crie uma interface User e uma Product e instancie repositórios específicos para cada uma: const userRepo = new Repository<User>().
Implemente um método update(id, item) que atualize os dados de uma entidade sem mudar seu id.

Mini-Projeto: Aula 07 – Formulário de Perfil (Utility Types) ⚙️

Objetivo

Utilizar utilitários como Partial, Readonly, Pick e Omit para gerenciar diferentes estados de um perfil de usuário em uma aplicação.

🏗️ Requisitos do Projeto

Interface completa de UserProfile.
Criar um tipo para "Visualização Pública" (omitindo dados sensíveis).
Criar um tipo para "Atualização de Perfil" (permitindo campos parciais).
Garantir que o ID do usuário seja imutável.

🛠️ Passo a Passo

1. Modelo Base

interface UserProfile {
    id: number;
    nome: string;
    email: string;
    telefone?: string;
    senhaHash: string;
    dataCriacao: Date;
}

2. Uso de Utility Types

// Apenas o que o usuário pode ver de outros
type PublicProfile = Omit<UserProfile, "senhaHash" | "email">;

// O que enviamos para o banco ao atualizar (ID obrigatório, resto parcial)
type UpdatePayload = Partial<Omit<UserProfile, "id" | "dataCriacao">> & { id: number };

// Usuário imutável após carregado
type SecureUser = Readonly<UserProfile>;

✅ Desafio Extra

Use Pick para criar um tipo UserContact que contenha apenas nome e email.
Use Record para criar um objeto que mapeie id do usuário para seu PublicProfile.

Mini-Projeto: Aula 08 – Dinamismo com Tipos (Advanced Manipulation) 🧪

Objetivo

Explorar propriedades dinâmicas usando keyof, Mapped Types e Template Literals para criar um sistema de notificações inteligente.

🏗️ Requisitos do Projeto

Usar keyof para criar um sistema de acesso seguro a chaves.
Template Literals para gerar nomes de manipuladores de eventos.
Criar tipos que se adaptam dinamicamente a modelos de dados.

🛠️ Passo a Passo

1. Acesso Dinâmico Seguro

function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const config = { porta: 3000, host: "localhost" };
const p = getProp(config, "porta"); // OK e Tipado!

2. Sistema de Eventos Literais

type Eventos = "focus" | "blur" | "click";
type EventHandlers = {
    [K in Eventos as `on${Capitalize<K>}`]: () => void;
};

const handlers: EventHandlers = {
    onFocus: () => console.log("Focado"),
    onBlur: () => {},
    onClick: () => {}
};

✅ Desafio Extra

Crie um Mapped Type que transforme todas as propriedades de um objeto em funções que retornam aquele tipo (Getters).
Use Conditional Types para criar um utilitário que remova a propriedade "id" de qualquer tipo de objeto passado.

Mini-Projeto: Aula 09 – Biblioteca Modular (Organização de Projeto) 📁

Objetivo

Organizar um sistema de gerenciamento de livros em uma estrutura modular profissional, utilizando ES Modules, Barrel Files e Path Aliases.

🏗️ Requisitos do Projeto

Dividir o código em pastas: models, services e app.
Usar index.ts para centralizar as exportações de cada pasta.
Configurar e usar um path alias @core para o diretório de modelos.

🛠️ Passo a Passo

1. Estrutura de Pastas

Crie a seguinte hierarquia:

src/
  ├── models/
  │    ├── Livro.ts
  │    └── index.ts
  ├── services/
  │    ├── Biblioteca.ts
  │    └── index.ts
  └── index.ts

2. Barrel File em `models`

No arquivo src/models/index.ts:

export * from './Livro';

3. Configurando o Alias no `tsconfig.json`

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@core/*": ["src/models/*"]
  }
}

✅ Verificação Final

Importe o modelo Livro em Biblioteca.ts usando o alias: import { Livro } from '@core';.
Certifique-se de que o arquivo principal (src/index.ts) importa apenas do serviço e executa uma lógica de teste (ex: adicionar um livro e listar).

Mini-Projeto: Aula 10 – API de Tarefas (Backend com Node.js) 🟢

Objetivo

Construir uma API REST funcional para gerenciamento de tarefas utilizando Node.js, Express e TypeScript, focando na tipagem de Request/Response e uso de DTOs.

🏗️ Requisitos do Projeto

Criar rotas para: Listar, Criar e Deletar tarefas.
Tipar rigorosamente o corpo da requisição (JSON Body).
Implementar um middleware simples de log.
Usar uma estrutura de "Base de Dados" em memória (Array tipado).

🛠️ Passo a Passo

1. Servidor Básico

import express, { Request, Response } from 'express';

const app = express();
app.use(express.json());

interface Tarefa {
    id: number;
    titulo: string;
    feita: boolean;
}

const db: Tarefa[] = [];

2. Rotas Tipadas

app.get('/tarefas', (req: Request, res: Response) => {
    res.json(db);
});

app.post('/tarefas', (req: Request<{}, {}, Omit<Tarefa, 'id'>>, res: Response) => {
    const nova: Tarefa = { id: Date.now(), ...req.body };
    db.push(nova);
    res.status(201).json(nova);
});

✅ Desafio Extra

Crie um middleware que verifique se o campo titulo está presente no corpo da requisição antes de passar para a rota de criação.
Implemente a rota DELETE /tarefas/:id tratando o parâmetro id de forma tipada.

Mini-Projeto: Aula 11 – Dashboard de Usuários (Frontend React) ⚛️

Objetivo

Desenvolver uma interface simples em React com TypeScript para listar e adicionar usuários, focando na tipagem de Props, Hooks e Eventos.

🏗️ Requisitos do Projeto

Componente UserCard tipado.
Formulário para adicionar novos usuários.
Uso de useState com interface genérica.
Tipagem de eventos de clique e mudança de input.

🛠️ Passo a Passo

1. Definição da Interface

interface User {
    id: number;
    nome: string;
    cargo: string;
}

2. Componente de Lista

const UserList = () => {
    const [users, setUsers] = useState<User[]>([]);

    const addUser = (nome: string) => {
        const newUser = { id: Date.now(), nome, cargo: "Dev" };
        setUsers([...users, newUser]);
    };

    return (
        <div>
            {users.map(u => <UserCard key={u.id} user={u} />)}
            <Form onAdd={addUser} />
        </div>
    );
};

✅ Desafio Extra

Crie um Context API para gerenciar o tema da aplicação (Light/Dark) e garanta que o provedor e o hook useTheme estejam 100% tipados.
Tipar o evento do formulário para evitar o recarregamento da página (e.preventDefault()).

Mini-Projeto: Aula 12 – Buscador de Repositórios (Integração API) 📡

Objetivo

Consumir a API pública do GitHub para buscar repositórios de um usuário, aplicando tipagem de dados externos, tratamento de erros e validação com Zod.

🏗️ Requisitos do Projeto

Usar Axios para realizar as chamadas HTTP.
Definir interfaces para a resposta do GitHub.
Validar os dados recebidos com um schema Zod.
Implementar tratamento de erro para usuários não encontrados.

🛠️ Passo a Passo

1. Schema de Validação (Zod)

import { z } from 'zod';

const RepoSchema = z.object({
    name: z.string(),
    description: z.string().nullable(),
    stargazers_count: z.number(),
    html_url: z.string().url()
});

type Repo = z.infer<typeof RepoSchema>;

2. Chamada de API com Axios

async function getRepos(user: string): Promise<Repo[]> {
    const { data } = await axios.get<Repo[]>(`https://api.github.com/users/${user}/repos`);
    // Validar cada repositório da lista
    return data.map(r => RepoSchema.parse(r));
}

✅ Desafio Extra

Crie uma função "Mapper" que transforme as chaves vindas do GitHub (ex: stargazers_count) para nomes mais amigáveis no seu código (ex: estrelas).
Exiba uma mensagem de erro customizada caso a API retorne um erro 404 (Usuário não encontrado).

Mini-Projeto: Aula 13 – Testando um Carrinho de Compras (Testes) 🧪

Objetivo

Implementar uma suíte de testes unitários para um sistema de carrinho de compras, utilizando Jest e TypeScript para garantir que cálculos de totais e descontos estejam corretos.

🏗️ Requisitos do Projeto

Classe Carrinho com métodos: adicionar, remover e calcularTotal.
Testar se o carrinho inicia vazio.
Testar se o total é calculado corretamente após adições.
Mockar um "Serviço de Frete" para testar o total com entrega.

🛠️ Passo a Passo

1. Classe a ser Testada

export class Carrinho {
    private itens: { nome: string, preco: number }[] = [];

    adicionar(item: { nome: string, preco: number }) {
        this.itens.push(item);
    }

    getTotal(): number {
        return this.itens.reduce((acc, curr) => acc + curr.preco, 0);
    }
}

2. Arquivo de Teste (`.spec.ts`)

import { Carrinho } from './Carrinho';

describe('Carrinho de Compras', () => {
    it('deve calcular o total corretamente', () => {
        const c = new Carrinho();
        c.adicionar({ nome: 'Livro', preco: 50 });
        c.adicionar({ nome: 'Mouse', preco: 100 });
        expect(c.getTotal()).toBe(150);
    });
});

✅ Desafio Extra

Implemente um teste para verificar se o método remover(nome) funciona conforme o esperado.
Adicione um teste que valide uma mensagem de erro caso tentemos adicionar um item com preço negativo.
Configure o Jest para exibir o relatório de cobertura (coverage) ao rodar os testes.

Mini-Projeto: Aula 14 – Gateway de Pagamentos (Design Patterns) 🛡️

Objetivo

Aplicar o padrão Strategy e Repository para criar um sistema de processamento de pagamentos flexível (Cartão, Boleto, Pix) sem acoplamento.

🏗️ Requisitos do Projeto

Interface IPaymentStrategy.
Implementações para CreditCardPayment e PixPayment.
Classe PaymentContext que executa a estratégia selecionada.
Uso de Dependency Injection para passar a estratégia desejada.

🛠️ Passo a Passo

1. O Padrão Strategy

interface IPaymentStrategy {
    process(amount: number): string;
}

class PixPayment implements IPaymentStrategy {
    process(amount: number) { return `Pix de R$${amount} gerado.`; }
}

class CardPayment implements IPaymentStrategy {
    process(amount: number) { return `Cartão de R$${amount} processado.`; }
}

2. O Contexto

class Checkout {
    constructor(private strategy: IPaymentStrategy) {}

    finalizar(valor: number) {
        console.log(this.strategy.process(valor));
    }
}

const pedido = new Checkout(new PixPayment());
pedido.finalizar(200);

✅ Desafio Extra

Implemente o padrão Factory para instanciar a estratégia correta baseada em uma string (ex: "PIX", "CARD").
Crie um Repository (interface + implementação em memória) para salvar o histórico de pagamentos realizados.

Mini-Projeto: Aula 15 – Refatorando para Clean Code (Arquitetura) 📐

Objetivo

Transformar um código funcional, porém "sujo" (com funções gigantes e múltiplas responsabilidades), em um sistema seguindo os princípios SOLID e Clean Code.

🏗️ Requisitos do Projeto

Dividir uma função "faz-tudo" em funções menores e específicas.
Aplicar nomes significativos em variáveis e tipos.
Isolar a lógica de negócio de efeitos colaterais (log, persistência).
Garantir que cada classe tenha apenas uma responsabilidade (SRP).

🛠️ Passo a Passo

1. O Código Sujo (Antes)

Analise este código que calcula desconto, salva no banco e envia email de uma vez:

async function processar(pedido: any) {
    let total = 0;
    for(let i of pedido) { total += i.preco; }
    if (total > 100) total *= 0.9;
    await db.save(pedido, total);
    await email.send("Pedido feito");
}

2. O Código Limpo (Depois)

Separe em classes e métodos: - OrderScanner: Para somar os itens. - DiscountService: Para aplicar regras de negócio. - NotificationService: Para envio de avisos.

✅ Desafio Extra

Aplique o Princípio da Inversão de Dependência (D do SOLID) no NotificationService, permitindo trocar Email por WhatsApp através de uma interface comum.
Implemente validações robustas que lancem exceções customizadas em vez de apenas retornar null.

Projeto Final: Aula 16 – Aplicação Fullstack e Deploy 🚀

Objetivo

O desafio final! Integrar todos os conhecimentos do curso para criar uma aplicação completa (Node + React + TS), containerizar com Docker e preparar para o Deploy.

🏗️ Requisitos do Projeto

Backend: API de catálogo de produtos com Node e Express.
Frontend: Dashboard para visualização e compra via React.
Integração: Consumo da API própria usando Axios e Zod.
Docker: Criar um Dockerfile funcional.
Build: Scripts de build para produção ativos.

🛠️ Etapas de Execução

1. Desenvolvimento Integrado

Aplique Interfaces e Shared Types entre os projetos.
Utilize Design Patterns (Repository/Service) no Backend.
Garanta Testes Unitários no núcleo da aplicação.

2. Preparação para Produção

No package.json:

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js"
}

3. Containerização (Docker)

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

✅ Critérios de Sucesso

[ ] A aplicação roda localmente via npm run dev.
[ ] O build de produção é gerado sem erros de tipagem.
[ ] A imagem Docker é construída com sucesso.
[ ] Existe uma documentação (README.md) explicando como rodar o projeto.

🚀 Rumo ao Deploy!

Parabéns por chegar até aqui. Sua aplicação está pronta para o mundo real!

Quizzes

Quizzes Interativos 🧠

Avalie sua retenção de conhecimento após cada aula do curso TypeScript Profissional.

Módulo 1: Core & Linguagem
Módulo 2: Ecossistema & Apps

Quiz 01 - Introdução

1. O que é o TypeScript em relação ao JavaScript?

Uma nova linguagem que substitui o JavaScript.

Um superset (superconjunto) que adiciona tipagem estática ao JavaScript.

Um framework para desenvolvimento web.

Um interpretador de código backend. > Explicação: O TypeScript é um superset, o que significa que todo código JS é TS válido, mas o TS adiciona funcionalidades extras como tipagem.

2. Qual é o principal benefício da tipagem estática?

Fazer o código rodar mais rápido.

Reduzir o tamanho do arquivo final.

Detectar erros durante o desenvolvimento (tempo de compilação).

Permitir o uso de emojis no código. > Explicação: A tipagem estática permite que o compilador identifique erros de lógica e de tipos antes mesmo do código ser executado.

3. Qual comando é usado para instalar o TypeScript globalmente via NPM?

`npm get typescript`

`npm install -g typescript`

`npm start typescript`

`npx install ts` > Explicação: O parâmetro `-g` (global) permite que o comando `tsc` fique disponível em qualquer lugar do sistema.

4. O que faz o comando `tsc --init`?

Inicia um novo servidor Node.js.

Compila todos os arquivos .ts da pasta.

Cria um arquivo de configuração `tsconfig.json`.

Instala as dependências do projeto. > Explicação: O `tsconfig.json` é o arquivo central que define as regras do compilador TypeScript no projeto.

5. O que acontece com os tipos do TypeScript após a compilação?

Eles são mantidos no arquivo .js gerado.

Eles são removidos (type erasure) e o resultado é JavaScript puro.

Eles são convertidos em comentários JSDoc.

Eles são ignorados pelo navegador. > Explicação: O navegador não entende TypeScript, por isso o compilador remove as anotações de tipo durante a transpilação para JS.

6. No `tsconfig.json`, o que a opção `"strict": true` faz?

Deixa o código mais curto.

Ativa uma série de verificações rigorosas de tipo.

Permite o uso de qualquer tipo (any) livremente.

Ignora erros de variáveis não utilizadas. > Explicação: O modo strict é recomendado para garantir a máxima segurança e as melhores práticas da linguagem.

7. Qual é a extensão padrão de arquivos TypeScript?

.js

.ts

.tsx

.typescript > Explicação: Arquivos TypeScript usam `.ts`. Para arquivos com React (JSX), usamos `.tsx`.

8. O que é o "DefinitelyTyped" (@types)?

Uma ferramenta de build.

Um repositório de definições de tipos para bibliotecas JavaScript puras.

Um plugin do VS Code.

Uma versão alternativa do TypeScript. > Explicação: Como muitas bibliotecas não são escritas em TS, o community fornece tipos via pacotes `@types/nome-da-lib`.

9. Onde o arquivo compilado é geralmente colocado se configurarmos `outDir`?

Na mesma pasta do código fonte.

Na pasta `node_modules`.

Na pasta especificada (ex: `dist/` ou `build/`).

Ele é enviado diretamente para a nuvem. > Explicação: O `outDir` define o diretório de saída para os arquivos JavaScript gerados pelo `tsc`.

10. Qual ferramenta é essencial para um setup profissional de TS para rodar o código em desenvolvimento sem gerar arquivos físicos?

Webpack

ts-node ou ts-node-dev

Babel

Excel > Explicação: `ts-node` permite executar arquivos TS diretamente na memória, facilitando muito o ciclo de desenvolvimento.

Quiz 02 - Introdução

1. Qual destes NÃO é um tipo primitivo no TypeScript?

string

boolean

tuple

number > Explicação: Tipos primitivos são os básicos herdados do JS. Tupla é uma estrutura de dados de array com tipos fixos.

2. Como o TypeScript infere o tipo de `let x = 10;`?

Como `any`.

Como `number`.

Como `string`.

Ele não infere, gera erro. > Explicação: O TS observa o valor inicial atribuído à variável para determinar seu tipo automaticamente.

3. O que define uma Tupla no TypeScript?

Um array que aceita qualquer tipo.

Um array com número fixo de elementos e tipos conhecidos em posições específicas.

Um objeto com chaves numéricas.

Uma lista encadeada. > Explicação: Diferente de um array comum, na tupla a ordem e o tipo de cada elemento importam.

4. Por que usar `enum` em vez de simples constantes de string?

Porque ocupa menos memória.

Para melhorar a legibilidade e evitar erros de digitação em valores fixos.

Porque é obrigatório em todas as classes.

Para permitir que o usuário mude o tipo da variável. > Explicação: Enums criam um conjunto de nomes amigáveis para valores constantes, facilitando a manutenção.

5. Qual a principal diferença entre `any` e `unknown`?

Nenhuma, ambos são iguais.

`any` é mais seguro que `unknown`.

`unknown` obriga você a verificar o tipo antes de realizar operações, enquanto `any` permite tudo.

`any` só aceita números e `unknown` só aceita strings. > Explicação: `unknown` é a "versão segura" do `any`, forçando o desenvolvedor a usar Type Guards.

6. Quando uma função deve ter o tipo de retorno `void`?

Quando ela retorna uma string vazia.

Quando ela não retorna nenhum valor deliberadamente.

Quando ela nunca termina sua execução.

Quando ela retorna `null`. > Explicação: `void` indica a ausência de retorno em uma função.

7. O tipo `never` é usado para quê?

Variáveis que podem ser nulas.

Funções que nunca retornam (lançam exceção ou loop infinito).

Funções que retornam um booleano falso.

Variáveis que ainda não foram inicializadas. > Explicação: `never` representa um estado que tecnicamente não deveria ocorrer ou que nunca chega ao fim.

8. Como declarar explicitamente um array de strings?

`let nomes: string`

`let nomes: string[]` ou `let nomes: Array`

`let nomes: [string]`

`let nomes: list(string)` > Explicação: As duas sintaxes são válidas e representam uma lista de elementos do mesmo tipo.

9. O que acontece se você tentar atribuir um número a uma variável inferida como string?

O TS converte o número para string automaticamente.

O código roda, mas dá erro no navegador.

O compilador gera um erro de tipo imediatamente.

Nada acontece. > Explicação: O sistema de tipos estáticos impede atribuições incompatíveis para garantir a consistência dos dados.

10. Qual a vantagem de usar Tipagem Explícita?

Deixar o código mais curto.

Documentar a intenção do código e evitar ambiguidades em lógica complexa.

Fazer o código compilar mais rápido.

Permitir o uso de variáveis sem valor inicial. > Explicação: Embora a inferência seja útil, a tipagem explícita em contratos (como funções e objetos) melhora a manutenção do projeto.

Quiz 03 - Introdução

1. O que representa o operador `|` no TypeScript?

Interseção de tipos.

União de tipos (ou um, ou outro).

Divisão de tipos.

Comparação de igualdade. > Explicação: O Union Type permite que uma variável aceite múltiplos tipos diferentes.

2. O que é um "Type Alias"?

Um novo tipo de dado primitivo.

Um nome personalizado para um tipo ou combinação de tipos.

Uma forma de ocultar dados privados.

Um atalho para o comando `tsc`. > Explicação: `type` permite criar apelidos para tipos, facilitando a reutilização e legibilidade.

3. Qual a função do operador `&` (Intersection)?

Escolher entre dois tipos.

Combinar dois ou mais tipos em um único tipo que possua todas as propriedades.

Comparar caminhos de arquivos.

Atribuir um valor nulo. > Explicação: Interseções são muito comuns para compor objetos complexos a partir de tipos menores.

4. O que são "Literal Types"?

Tipos que só aceitam literatura clássica.

Tipos que restringem uma variável a valores exatos e específicos.

O mesmo que o tipo `any`.

Variáveis que não podem ser alteradas. > Explicação: Você pode definir que uma string só aceite "ativo" ou "inativo", por exemplo.

5. "Narrowing" (Estreitamento) serve para quê?

Diminuir o tamanho do código compilado.

Identificar o tipo exato de uma variável dentro de um bloco de código lógico.

Remover espaços em branco do código.

Limitar o número de variáveis no projeto. > Explicação: O narrowing permite usar métodos específicos de um tipo após verificar qual ele é.

6. Qual destes é um exemplo de "Type Guard" nativo do JavaScript?

`if (x == y)`

`typeof x === "string"`

`x.map()`

`console.log(x)` > Explicação: Operadores como `typeof`, `instanceof` e `in` são usados pelo TS para estreitar tipos.

7. O que acontece se você tentar acessar um método de string em uma união `string | number` fora de um Type Guard?

O TS executa o método se for string, se não, ignora.

O TS gera um erro informando que o método não existe no tipo `number`.

O código compila normalmente.

O programa trava. > Explicação: O TS só permite acessar propriedades que existam em AMBOS os tipos da união, a menos que você faça o narrowing.

8. Qual o benefício de usar uniões de literais em vez de Enums simples em alguns casos?

Elas ocupam mais espaço.

São mais leves, pois desaparecem completamente no JavaScript compilado.

Permitem valores numéricos apenas.

São mais fáceis de depurar no console. > Explicação: Uniões de literais são apenas tipos do TS, enquanto Enums geram código JS real.

9. Como você criaria um tipo que aceita um objeto com `nome` ou um objeto com `id`?

Usando Interseção (`&`).

Usando União (`|`).

Usando `any`.

Não é possível. > Explicação: A união permite flexibilidade entre diferentes estruturas de objeto.

10. No estudo de caso de APIs, por que tipos avançados são importantes?

Para economizar largura de banda.

Para garantir que lidamos corretamente com todas as variações de resposta (sucesso, erro, vazio).

Para enviar dados mais rápido.

Para mudar o tema do VS Code. > Explicação: APIs são dinâmicas; tipos avançados como Union e Nullable ajudam a tratar todas as possibilidades de retorno.

Quiz 04 - Introdução

1. Qual a palavra-chave usada para definir um contrato de objeto?

type contract

interface

declare

model > Explicação: No TS, `interface` é a forma padrão de definir a estrutura de objetos e contratos na POO.

2. Como você indica que uma propriedade é opcional?

Usando `nullable`

Usando `optional`

Usando um ponto de interrogação (`?`) após o nome da propriedade.

Não existe propriedade opcional em interfaces. > Explicação: Propriedades marcadas com `?` podem ou não ser incluídas no objeto.

3. O que faz o modificador `readonly`?

Torna a propriedade invisível.

Impede que o valor da propriedade seja alterado após a criação do objeto.

Torna a propriedade obrigatória.

Converte a propriedade para string. > Explicação: `readonly` garante imutabilidade para propriedades específicas de um objeto.

4. Como uma interface pode herdar propriedades de outra?

Usando `implements`

Usando `extends`

Usando `inherits`

Usando `merge` > Explicação: `extends` permite compor interfaces, criando hierarquias de contratos.

5. Qual a diferença entre `interface` e `type` quanto ao "Declaration Merging"?

Nenhuma, ambos se fundem.

Interfaces com o mesmo nome se fundem; tipos com mesmo nome geram erro.

Tipos se fundem; interfaces não.

O TS não permite nomes repetidos em nenhum caso. > Explicação: O merging automático de interfaces é útil para estender bibliotecas de terceiros.

6. Quando uma classe quer seguir as regras de uma interface, ela usa:

extends

implements

follows

uses > Explicação: `implements` força a classe a fornecer implementações para todos os membros da interface.

7. Posso usar `interface` para definir o tipo de uma função?

Não, apenas `type` pode fazer isso.

Sim, usando uma sintaxe de chamada de assinatura.

Apenas se a função estiver dentro de um objeto.

Sim, mas a função não pode ter parâmetros. > Explicação: Interfaces no TS são versáteis e podem descrever quase qualquer coisa, inclusive funções.

8. Qual a recomendação oficial do TS sobre o uso de Interface vs Type?

Use sempre Type.

Prefira Interface para objetos e POO até que precise de lógicas específicas do Type.

A escolha é puramente estética.

Interfaces serão removidas em versões futuras. > Explicação: Interfaces tendem a ter um desempenho de compilação ligeiramente melhor e são o padrão para POO.

9. O que é "Modelagem de Domínio"?

Desenhar logos para o site.

Representar as regras e entidades do negócio através de tipos e interfaces.

Comprar domínios de internet (.com, .com.br).

Criar modelos 3D para o projeto. > Explicação: Modelar o domínio significa traduzir as necessidades reais do negócio em código seguro.

10. Pode uma interface estender múltiplas outras interfaces ao mesmo tempo?

Não, herança múltipla não é permitida.

Sim, basta separar as interfaces por vírgula no `extends`.

Sim, mas apenas se elas não tiverem propriedades repetidas.

Sim, mas apenas na versão corporativa do TS. > Explicação: O TS permite a composição flexível de múltiplos contratos em uma única interface.

Quiz 05 - Introdução

1. Qual o modificador de acesso padrão no TypeScript (se nada for escrito)?

private

protected

public

readonly > Explicação: Por padrão, todo membro de uma classe é público, permitindo acesso de qualquer lugar.

2. O que acontece com membros marcados como `private`?

Eles podem ser acessados por subclasses.

Eles só podem ser acessados de dentro da própria classe.

Eles aparecem com erro no JavaScript compilado.

Eles são removidos pelo compilador. > Explicação: O encapsulamento privado protege dados internos de modificações acidentais externas.

3. Para que serve o modificador `protected`?

Protege o arquivo contra leitura.

Permite o acesso dentro da própria classe e por suas subclasses (herança).

É o mesmo que o modificador private.

Torna a classe imutável. > Explicação: `protected` é ideal para permitir extensibilidade sem expor dados para o mundo externo.

4. Qual a vantagem da "Shorthand Syntax" no construtor?

Fazer o código rodar em navegadores antigos.

Declarar e inicializar atributos da classe em uma única linha.

Impedir a criação de objetos.

Aumentar o número de linhas de código. > Explicação: Facilita a escrita de classes concisas e limpas.

5. O que os métodos `get` e `set` permitem fazer?

Baixar dados da internet.

Interceptar e validar a leitura ou escrita em propriedades privadas.

Criar backups da classe.

Apenas mudar o nome das variáveis. > Explicação: Getters e setters são a base do encapsulamento moderno, permitindo lógica personalizada.

6. Como uma classe herda de outra no TypeScript?

implements

extends

inherits

using > Explicação: Assim como no JS moderno (ES6+), usamos `extends` para herança de classes.

7. O que é uma "Classe Abstrata"?

Uma classe que só tem teoria.

Uma classe que serve de base, mas não pode ser instanciada diretamente.

Uma classe sem métodos.

Uma classe criada automaticamente pelo compilador. > Explicação: Classes abstratas definem comportamentos comuns que devem ser implementados pelas subclasses.

8. Qual o comando usado para chamar o construtor da classe pai (base)?

parent()

this.base()

super()

constructor.call() > Explicação: O `super()` deve ser a primeira chamada no construtor de uma classe que estende outra.

9. Propriedades `readonly` em classes podem ser alteradas onde?

Em qualquer lugar.

Apenas no momento da declaração ou dentro do construtor.

Apenas em métodos estáticos.

Nunca, nem no construtor. > Explicação: Após a inicialização no construtor, um campo `readonly` torna-se imutável.

10. O que significa "Polimorfismo" na prática?

Mudar a forma física do servidor.

Classes diferentes executando o mesmo método de formas diferentes.

Criar muitos tipos com o mesmo nome.

Ocultar propriedades private. > Explicação: Permite tratar objetos de subclasses diferentes como se fossem da classe base, mas executando cada um sua lógica própria.

Quiz 06 - Introdução

1. Para que servem os Generics no TypeScript?

Gerar números aleatórios.

Criar componentes reutilizáveis que trabalham com diversos tipos mantendo a segurança.

Remover a necessidade de declarar variáveis.

Compilar o código mais rápido. > Explicação: Generics permitem que o "contrato" de tipo seja definido no momento do uso, e não na criação.

2. Qual caractere é comumente usado para representar um tipo genérico?

$

@

< T >

{ P } > Explicação: Embora qualquer nome possa ser usado, `` (de Type) é a convenção universal.

3. Qual a principal vantagem de Generics sobre o uso de `any`?

Generics são mais fáceis de digitar.

Generics preservam a informação do tipo original, evitando erros de runtime.

`any` é mais rápido que Generics.

Não há diferença real. > Explicação: Com `any`, perdemos o autocompletar e a segurança; com Generics, o TS "lembra" do tipo que foi passado.

4. O que é uma "Generic Constraint" (Restrição)?

Uma regra que impede o uso de Generics.

O uso de `extends` para limitar quais tipos podem ser passados ao componente genérico.

Um erro que acontece quando o código é muito grande.

Uma forma de ocultar tipos complexos. > Explicação: Constraints permitem garantir que o tipo passado possua certas propriedades (como `.length` ou `.id`).

5. Posso usar Generics em interfaces?

Não, apenas em funções e classes.

Sim, é muito comum para definir respostas de APIs ou estruturas de dados.

Sim, mas apenas com o tipo string.

Sim, mas apenas se a interface for vazia. > Explicação: Interfaces genéricas como `Response` facilitam a modelagem de dados consistentes.

6. O que significa ``?

Que T deve herdar de uma classe chamada string.

Que o tipo genérico T deve ser obrigatoriamente compatível com uma string.

Que string passa a ser um tipo genérico.

Nada, a sintaxe está errada. > Explicação: Restringe o Generic a aceitar apenas strings ou tipos que se comportem como strings.

7. Qual o resultado de `retornarItem(10)` se a função for genérica?

"10" (string)

10 (number)

any

Um erro de compilação. > Explicação: A função retorna exatamente o valor mantendo o tipo especificado ou inferido.

8. Onde a "Programação Genérica" é mais utilizada?

Apenas em calculadoras.

Em coleções (Arrays, Sets), Repositórios de dados e Wrappers de API.

Em arquivos de configuração apenas.

Nunca deve ser usada em projetos reais. > Explicação: Ferramentas de banco de dados e frameworks front/back dependem fortemente de Generics.

9. O TypeScript pode inferir o tipo genérico sozinho?

Não, é sempre obrigatório escrever ``.

Sim, a partir do valor passado como argumento para a função ou construtor.

Sim, mas apenas para o tipo boolean.

Sim, mas apenas no modo estrito. > Explicação: A inferência de argumentos de tipo torna o uso de Generics menos "verboso".

10. Generics aumentam o tamanho do código JavaScript final?

Sim, muito.

Não, eles são removidos completamente durante a compilação.

Sim, mas apenas se usarmos classes.

Apenas se usarmos constraints. > Explicação: Assim como a maioria das funcionalidades do TS, Generics são ferramentas de "tempo de design/compilação".

Quiz 07 - Introdução

1. O que faz o utilitário `Partial`?

Deleta metade das propriedades.

Torna todas as propriedades do tipo T opcionais (inclui `?`).

Torna as propriedades apenas de leitura.

Cria um erro se faltarem propriedades. > Explicação: Essencial para funções de "update" onde nem todos os campos são enviados.

2. Qual utilitário é o oposto exato do `Partial`?

All

Complete

Required

Final > Explicação: `Required` garante que todas as propriedades sejam obrigatórias, mesmo as que eram opcionais no original.

3. Para que serve o `Readonly`?

Para ler arquivos do HD.

Para impedir que qualquer propriedade do objeto seja alterada após a criação.

Para ocultar as propriedades no log do console.

Para transformar objetos em strings. > Explicação: Ajuda a manter a imutabilidade dos dados dentro da aplicação.

4. Se eu quiser um tipo com APENAS duas propriedades de uma interface com dez, qual uso?

Omit

Pick

Choose

Filter > Explicação: `Pick` permite "pegar" seletivamente o que importa para um novo tipo.

5. E se eu quiser todas as propriedades EXCETO uma?

Ignore

Remove

Omit

Delete > Explicação: `Omit` é ideal para remover campos sensíveis (como senhas) de um tipo antes de enviá-lo.

6. O que o `Record` faz?

Grava um áudio do código.

Cria um tipo de objeto com chaves específicas e valores de um tipo específico.

Salva os dados no banco de dados automaticamente.

Cria um log de todas as variáveis. > Explicação: Frequentemente usado para mapas, dicionários ou tabelas de lookup.

7. Posso aninhar Utility Types? Ex: `ReadOnly>`.

Não, gera erro de compilação.

Sim, você pode combiná-los para criar tipos complexos.

Sim, mas apenas dois de cada vez.

Sim, mas apenas no VS Code Insiders. > Explicação: A composição de utilitários é uma técnica poderosa para manipulação de modelos.

8. Utility Types geram código no JavaScript final?

Sim, funções utilitárias são adicionadas.

Não, eles servem apenas para checagem estática no TypeScript;

Sim, mas apenas o Record.

Sim, se usarmos o modo strict. > Explicação: Eles são abstrações de tipo puro.

9. Qual utilitário extrai o tipo de retorno de uma função?

Return

ReturnType

GetReturn

FuncResult > Explicação: Útil quando queremos saber o que uma biblioteca de terceiros retorna.

10. Mapped Types são a base para os Utility Types. O que eles fazem?

Mapeiam a localização dos arquivos no disco.

Permitem criar novos tipos transformando as propriedades de tipos existentes através de iteração.

Desenham diagramas das classes.

São um tipo de array. > Explicação: É a "mágica" por trás de como o TS consegue transformar todas as chaves em opcionais ou em apenas leitura.

Quiz 08 - Introdução

1. O que o operador `keyof` faz?

Obtém todos os valores de um objeto.

Gera uma união de strings contendo todas as chaves de um tipo de objeto.

Abre as chaves de um projeto no VS Code.

Deleta as chaves de um tipo. > Explicação: `keyof` é fundamental para criar funções genéricas que manipulam propriedades de objetos de forma segura.

2. Qual a sintaxe para "Indexed Access Types"?

`Tipo.propriedade`

`Tipo["propriedade"]`

`Tipo`

`Tipo[0]` > Explicação: Permite que você "olhe" para dentro de outro tipo e extraia o tipo de uma propriedade específica.

3. Como funciona um "Conditional Type"?

Usando um bloco `if/else` no TypeScript.

Usando uma sintaxe de ternário: `T extends U ? X : Y`.

Usando um `switch` de tipos.

Não existem tipos condicionais no TS. > Explicação: Permite criar lógicas de decisão complexas em nível de tipo.

4. Para que serve a palavra-chave `infer`?

Para inferir o valor de uma variável.

Para capturar e extrair um tipo de dentro de outra estrutura (como o retorno de uma função) em tipos condicionais.

Para sugerir um novo nome para uma função.

Para forçar o compilador a ignorar um erro. > Explicação: `infer` é usado exclusivamente dentro da cláusula `extends` de um tipo condicional.

5. O que são "Template Literal Types"?

Apenas strings comuns.

Tipos de string construídos a partir de outros tipos usando a sintaxe de crases (` `` `).

Templates HTML para o frontend.

Comentários dinâmicos no código. > Explicação: Permitem gerar uniões de strings baseadas em combinações de outros tipos literais.

6. Qual o resultado de `keyof { a: 1, b: 2 }`?

`number`

`1 | 2`

`"a" | "b"`

`{ a, b }` > Explicação: Ele extrai os nomes das propriedades como tipos literais de string.

7. Se eu tenho `type Pessoa = { nome: string }`, o que é `Pessoa["nome"]`?

`"nome"`

`string`

`object`

`any` > Explicação: O acesso indexado retorna o **tipo** associado àquela chave.

8. Onde os tipos condicionais são mais úteis?

Em scripts pequenos de aprendizado.

No desenvolvimento de bibliotecas e frameworks que precisam ser altamente flexíveis.

Em arquivos CSS.

Para mudar a cor do terminal. > Explicação: Eles permitem que os tipos se adaptem dinamicamente às entradas, fornecendo APIs muito inteligentes.

9. `T extends any[] ? T[number] : T`. O que esse tipo faz?

Converte T em um array.

Se T for um array, retorna o tipo de seus itens; se não, retorna T.

Conta quantos itens o array T possui.

Gera um erro se T não for array. > Explicação: É um padrão comum para "desembrulhar" arrays em seus tipos base.

10. Pode-se usar Template Literals para criar nomes de eventos como `on-click` | `on-change`?

Não, strings de tipos são estáticas.

Sim, combinando um prefixo `"on-"` com uma união de ações.

Sim, mas apenas no backend.

Sim, mas apenas se a ação for uma string única. > Explicação: A combinação de uniões em template literals cria o produto cartesiano de todas as possibilidades.

Quiz 09 - Introdução

1. Qual a palavra-chave para disponibilizar uma função em outro arquivo?

provide

share

export

public > Explicação: No sistema de módulos ES, `export` torna o código visível para fora do arquivo atual.

2. Como importo apenas uma função específica de um módulo?

`import modulo.funcao`

`import { funcao } from './modulo'`

`require('./modulo').funcao`

`use funcao from modulo` > Explicação: A desestruturação no import permite carregar apenas o necessário, economizando recursos.

3. O que é um `export default`?

Um erro de exportação.

Define a exportação principal do arquivo, que pode ser importada sem chaves `{}`.

Uma forma de exportar tudo do arquivo de uma vez.

Uma exportação que só funciona no servidor. > Explicação: Cada arquivo pode ter apenas um export default.

4. Para que serve um "Barrel File" (`index.ts`)?

Para guardar segredos do projeto.

Para concentrar exportações de uma pasta e simplificar os pacotes de imports.

Para acelerar a internet do desenvolvedor.

Para apagar arquivos não utilizados. > Explicação: Permite que outros arquivos importem de uma pasta (`import { a, b } from './modulo'`) em vez de arquivos específicos.

5. O que os "Path Aliases" resolvem?

Erros de sintaxe no código.

Evitam caminhos relativos longos e confusos como `../../../`.

Mudam o nome das variáveis automaticamente.

Permitem o uso de caminhos absolutos do Windows. > Explicação: Ao configurar aliases como `@models`, o código fica muito mais legível e fácil de mover.

6. Onde configuramos os Path Aliases?

No package.json

No tsconfig.json, dentro de `compilerOptions.paths`.

No arquivo de índice do projeto.

No VS Code diretamente. > Explicação: O compilador TS precisa saber como resolver esses apelidos durante o build.

7. Posso usar `Namespace` e `ES Modules` no mesmo projeto?

Não, o TS proíbe.

Sim, mas recomenda-se focar em ES Modules para projetos modernos.

Sim, mas Namespaces só funcionam em arquivos .js.

Apenas se o projeto for pequeno. > Explicação: ES Modules são o padrão da indústria e melhor suportados por bundlers modernos como Webpack e Vite.

8. Qual a função do `baseUrl` no tsconfig?

Define o endereço do site na nuvem.

Define a pasta raiz de onde o compilador deve começar a procurar os módulos.

Muda a cor da base do terminal.

Não existe essa propriedade. > Explicação: `baseUrl` é necessário para que os path aliases funcionem corretamente.

9. O que acontece se eu esquecer o `export` em uma classe dentro de um módulo?

Ela fica pública por padrão.

Ela fica privada (local) àquele arquivo e não pode ser importada.

O compilador gera um erro fatal.

O TS adiciona o export sozinho. > Explicação: No sistema de módulos, o isolamento é o comportamento padrão para segurança.

10. Como reorganizar um projeto conforme ele cresce?

Colocar tudo em um arquivo gigante para não perder nada.

Dividir em pastas por responsabilidade (models, services, utils, controllers).

Mudar para JavaScript puro.

Criar uma pasta diferente para cada variável. > Explicação: A organização em camadas e diretórios semânticos é a chave para a escalabilidade de qualquer software.

Quiz 10 - Introdução

1. Qual pacote é necessário para usar o Express com TypeScript?

express-ts

typescript-express

@types/express (além do próprio express)

express-types > Explicação: O pacote `@types` fornece as definições de tipo que não vêm nativamente na biblioteca JS do Express.

2. O que o `ts-node-dev` faz de diferente do `tsc`?

Ele cria arquivos .js físicos.

Ele roda o código TS diretamente na memória e reinicia o servidor em cada alteração (hot reload).

Ele apenas checa erros sem rodar o código.

Ele publica o site na nuvem. > Explicação: É a ferramenta padrão de produtividade para desenvolvimento backend com TS.

3. Como você tipa os argumentos `req` e `res` do Express?

req: any, res: any

import { Request, Response } from 'express'

use express.types

O TS faz isso sozinho sem imports. > Explicação: Importar as interfaces `Request` e `Response` garante que você tenha autocompletar e validação nos métodos HTTP.

4. O que é um "DTO" (Data Transfer Object)?

Um motor de banco de dados.

Um objeto que define precisamente o formato dos dados trafegados entre camadas (ex: da requisição para o serviço).

Uma forma de criptografar o banco de dados.

Um comando do terminal. > Explicação: DTOs evitam o uso de `any` no backend e garantem que o contrato da API seja respeitado.

5. Qual a importância de tipar o `req.body`?

Para o código ficar mais bonito.

Para garantir que as propriedades esperadas existam antes de tentarmos usá-las, evitando erros de runtime.

Não é possível tipar o req.body.

Para aumentar o uso de memória. > Explicação: Sem tipagem, o `body` é tratado como `any`, o que anula os benefícios do TypeScript.

6. O que é um `Middleware` no Express?

Um hardware de rede.

Uma função que tem acesso aos objetos `req` e `res` e pode interromper ou modificar o fluxo da requisição.

Uma base de dados leve.

Um tipo de loop infinito. > Explicação: Middlewares são usados para logs, autenticação, tratamento de erros e muito mais.

7. Como tipar um middleware customizado?

Usando o tipo string.

Usando o tipo `NextFunction` além de `Request` e `Response`.

Não se tipa middlewares.

Usando a interface `Middleware`. > Explicação: O `NextFunction` é essencial para passar o controle para a próxima função na pilha do Express.

8. Onde os arquivos compilados de um projeto Node/TS devem ficar em produção?

Na pasta `src`

Na pasta `dist` (ou similar definida no `outDir`).

No Desktop do servidor.

Não precisam ser compilados em produção. > Explicação: Em produção, rodamos o JavaScript puro por questões de performance e compatibilidade do ambiente Node.

9. Para que serve o arquivo `.env` em um projeto backend?

Para salvar o código fonte.

Para guardar variáveis de ambiente e segredos (como senhas de banco) fora do código.

Para configurar o tema do editor.

Para listar os arquivos do projeto. > Explicação: Usar variáveis de ambiente é fundamental para a segurança e configuração dinâmica do app.

10. Qual a vantagem de usar TypeScript no backend (Node.js)?

Nenhuma, JS é melhor.

Maior segurança em manipulação de dados, melhores ferramentas de refatoração e documentação automática através de tipos.

O Node.js roda TypeScript nativamente sem ferramentas.

Permite que o servidor use menos RAM. > Explicação: O TS reduz drasticamente os erros comuns de "propriedade não encontrada" em aplicações backend complexas.

Quiz 11 - Introdução

1. Qual o principal benefício de usar React com TypeScript?

Os sites carregam mais rápido.

Garantia de que as Props passadas para os componentes estão corretas.

Não precisa mais usar CSS.

O React remove o TypeScript automaticamente. > Explicação: O TS no React foca na segurança da comunicação entre componentes através das Props.

2. Como definimos as props de um componente funcional?

Usando um array.

Definindo uma interface ou type e passando como tipo ao componente.

Não se define tipos para props.

No arquivo index.html. > Explicação: Ao tipar as props, o editor avisa se você esquecer um campo obrigatório ou passar um tipo errado.

3. Qual a sintaxe correta para um estado numérico com `useState` explícito?

`useState(number)(0)`

`useState(0)`

`useState[number](0)`

`useState.number(0)` > Explicação: O uso de `` (Generics) define o tipo de dado que aquele estado pode carregar.

4. O TS consegue inferir o tipo de um estado se eu fizer `useState("Olá")`?

Não, é sempre obrigatório ser explícito.

Sim, ele infere que o estado é do tipo `string`.

Sim, mas apenas se estiver no modo estrito.

Ele infere como `any`. > Explicação: O TypeScript usa o valor inicial para deduzir o tipo, facilitando a escrita do código.

5. Para que serve o `React.FC` ou `React.FunctionComponent`?

Para criar classes em React.

É um tipo auxiliar para definir componentes funcionais (aunque hoje em dia o uso simples de interfaces é mais comum).

Para conectar com o banco de dados.

Para definir o estado global. > Explicação: Ele fornece tipagem automática para propriedades como `children`, embora muitos desenvolvedores prefiram tipar manualmente hoje em dia.

6. Como tipar o evento de mudança de um input (`onChange`)?

e: any

e: Event

e: React.ChangeEvent

e: string > Explicação: O React usa um sistema de eventos próprios (Synthetic Events) que precisam ser mapeados corretamente para ter acesso ao `e.target.value`.

7. O que acontece se você passar uma prop não definida na interface do componente?

O React ignora e o código roda.

O TypeScript gera um erro de compilação informando que a prop não existe.

O componente não renderiza.

O navegador trava. > Explicação: Essa é a "mágica" do TS: prevenir o uso de propriedades inexistentes antes mesmo de salvar o arquivo.

8. Como tipar uma referência de um elemento DOM com `useRef`?

`useRef(null)`

`useRef(null)` (substituindo pelo elemento correto).

`useRef(any)`

Referências não podem ser tipadas. > Explicação: Tipar corretamente o elemento permite que você use propriedades específicas do DOM (como `.focus()` ou `.value`) com segurança.

9. No Context API, o que passamos como Generic no `createContext`?

O nome do contexto.

O formato (interface) dos dados que o contexto irá carregar.

O componente principal.

Nada. > Explicação: Isso garante que qualquer componente que consuma o contexto saiba exatamente quais dados estão disponíveis lá dentro.

10. Componentes Genéricos em React servem para quê?

Deixar o design genérico.

Criar componentes abstratos (como Tabelas ou Listas) que funcionam com qualquer tipo de dado fornecido.

Criar componentes sem estilo.

Não existem componentes genéricos. > Explicação: Permite máxima reutilização de UI para diferentes tipos de dados de negócio.

Quiz 12 - Introdução

1. Por que não podemos confiar 100% nos tipos do TS ao receber dados de uma API?

Porque as APIs são proibidas de usar TS.

Porque o TS não existe em tempo de execução; se a API mudar o formato dos dados, o TS não saberá.

Porque os dados da internet são criptografados.

Porque preferimos usar `any`. > Explicação: O TypeScript é uma ferramenta de desenvolvimento e compilação, mas não valida dados reais durante a execução do programa.

2. Qual a forma correta de tipar uma resposta do Axios?

`axios.get(url, { type: Usuario })`

`axios.get(url)`

`axios.get(url) as Usuario`

O Axios não aceita tipagem. > Explicação: O uso de Generics no método `.get` do Axios informa ao TS qual o formato esperado para o campo `.data`.

3. Para que serve o padrão "DTO" (Data Transfer Object) na integração?

Para salvar dados no disco.

Para transformar e limpar os dados que vêm da API antes de usá-los na aplicação.

Para criptografar a resposta.

Para diminuir a velocidade da internet. > Explicação: DTOs permitem que sua aplicação dependa de modelos limpos, independentemente de como a API envia os dados originais.

4. O que é o "Zod"?

Um editor de texto.

Uma biblioteca de declaração e validação de esquemas em tempo de execução (runtime).

Um plugin do Chrome.

Um novo tipo de servidor. > Explicação: O Zod garante que os dados externos realmente sigam o contrato definido enquanto o app está rodando.

5. O que faz o comando `z.infer`?

Deleta o schema.

Extrai automaticamente um tipo (Type) do TypeScript a partir de um schema do Zod.

Executa a validação.

Cria uma interface no Java. > Explicação: Evita a duplicidade de ter que escrever a interface manualmente e o schema de validação; um gera o outro.

6. O que acontece se o Zod validar dados que estão em formato errado?

Ele converte os dados à força.

Ele lança um erro detalhado (ou retorna um status de falha) descrevendo o que está errado.

Ele ignora e segue o fluxo.

Ele apaga a variável. > Explicação: Isso permite tratar erros de API de forma robusta e amigável para o usuário.

7. Por que devemos evitar o uso de `as` ao receber dados de uma API?

Porque deixa o código mais longo.

Porque o `as` apenas "silencia" o compilador sem garantir que o dado é real, podendo causar erros depois.

Porque o `as` é exclusivo para números.

Porque o `as` foi removido do TS 5.0. > Explicação: O uso de assertions (`as`) pode esconder bugs graves se a API mudar.

8. Qual o benefício de lidar com erros de API usando `axios.isAxiosError()`?

Para fechar o programa.

Permite que o TS conheça as propriedades específicas de erro do Axios (como `response.data`).

Faz a requisição ser reexecutada.

Nenhuma vantagem técnica. > Explicação: É um "Type Guard" específico para erros de rede.

9. O que significa uma API ser "Self-Documenting" através de tipos no TS?

Ela fala com você.

Quando você tem as interfaces, o código diz exatamente o que enviar e o que esperar receber.

A API cria seu próprio site de documentação.

Não existe esse conceito. > Explicação: Tipos atuam como documentação viva que nunca fica desatualizada em relação ao código.

10. Durante o desenvolvimento, o que o "Network Tab" do navegador ajuda na integração?

A mudar o tema do Chrome.

A inspecionar os dados reais (JSON) que estão chegando para criar suas interfaces fielmente.

A editar o código TS diretamente.

A aumentar a velocidade do Wi-Fi. > Explicação: Ver o JSON real que a API envia é o primeiro passo para criar os tipos corretos no TypeScript.

Quiz 13 - Introdução

1. Qual o framework de testes mais popular no ecossistema JS/TS?

Mocha

Jasmine

Jest

PyTest > Explicação: Jest é o padrão da indústria devido à sua facilidade de configuração e funcionalidades integradas.

2. Por que precisamos do `ts-jest`?

Para rodar testes mais rápido.

Para permitir que o Jest entenda e compile arquivos TypeScript durante os testes.

Para desenhar diagramas de teste.

Para instalar o TypeScript. > Explicação: O Jest nativamente só entende JS; o `ts-jest` faz a ponte para o TS.

3. O que define um "Teste Unitário"?

Testar se o banco de dados está ligado.

Testar uma pequena parte isolada do código (função ou classe) sem dependências externas reais.

Testar a interface gráfica (UI) apenas.

Testar a conexão de rede. > Explicação: O foco é a lógica interna daquela "unidade" específica.

4. O que faz o bloco `describe` no Jest?

Executa uma função.

Agrupa um conjunto de testes relacionados (uma suíte de testes).

Deleta os testes antigos.

Descreve o projeto para o usuário final. > Explicação: Organiza os testes por categoria ou funcionalidade.

5. Qual a função do método `expect()`?

Espera a internet carregar.

Define o valor que estamos testando para compará-lo com um resultado esperado.

Faz a função rodar de novo.

Cria uma nova variável. > Explicação: É onde as asserções (verificações) do teste começam.

6. O que é um "Mock" em testes?

Uma piada sobre o código.

Um objeto simulado que substitui uma dependência real (como uma API ou banco) para controlar o comportamento no teste.

Um erro de compilação.

Uma versão oficial do código. > Explicação: Mocks permitem testar a lógica sem precisar de infraestrutura real e lenta.

7. No TypeScript, por que usamos `jest.Mocked`?

Para deletar o módulo.

Para que o TypeScript saiba que aquele módulo foi mockado e permita acessar métodos de simulação (como `.mockResolvedValue`).

Para tornar o módulo privado.

Para converter o módulo em string. > Explicação: Garante que o TS não reclame quando tentarmos usar funções de mock em variáveis tipadas.

8. O que é "Cobertura de Testes" (Coverage)?

O número de arquivos do projeto.

A porcentagem do código que é executada durante os testes.

O tamanho total do projeto em MB.

O número de desenvolvedores no time. > Explicação: Ajuda a identificar partes do código que ainda não foram verificadas pelos testes.

9. Diferença entre `it` e `test` no Jest:

`it` é para backend e `test` para frontend.

Nenhuma, são sinônimos gramaticais apenas.

`test` é mais rápido que `it`.

`it` foi removido na versão 20. > Explicação: Você pode usar qualquer um conforme sua preferência de leitura (Ex: "it should...", "test that...").

10. Qual a vantagem de usar TDD (Test Driven Development)?

Fazer o código mais rápido na primeira vez.

Garantir que o código atenda aos requisitos desde o início e facilitar refatorações seguras no futuro.

Eliminar a necessidade de documentação.

Diminuir o salário do QA. > Explicação: Escrever testes antes do código obriga o desenvolvedor a pensar no design e nos contratos da aplicação.

Quiz 14 - Introdução

1. O que são "Design Patterns" (Padrões de Projeto)?

Designs bonitos para o site.

Soluções testadas e aprovadas para problemas comuns de design de software.

Atalhos de teclado no VS Code.

Comandos para formatar o código. > Explicação: Padrões ajudam a criar sistemas mais flexíveis e fáceis de manter.

2. Qual o objetivo do "Repository Pattern"?

Organizar as pastas do Windows.

Isolar a lógica de acesso aos dados para que a aplicação não dependa de um banco de dados específico.

Salvar arquivos no GitHub.

Criar backups diários. > Explicação: Permite trocar o banco de dados (ex: SQL para Mongo) sem mexer na lógica de negócio.

3. O que faz o "Factory Pattern"?

Cria robôs.

Centraliza a criação de objetos complexos em um único lugar (fábrica).

Deleta objetos antigos automaticamente.

Apenas gera listas aleatórias. > Explicação: Útil quando a criação de um objeto depende de muitos parâmetros ou lógicas de decisão.

4. O "Strategy Pattern" é usado para quê?

Planejar o projeto no calendário.

Definir uma família de algoritmos intercambiáveis (diferentes formas de fazer a mesma coisa).

Atacar hackers.

Diminuir o custo do servidor. > Explicação: Exemplo: Diferentes formas de cálculo de imposto ou frete selecionáveis em tempo de execução.

5. O que é "Injeção de Dependência" (DI)?

Instalar vírus no computador.

Fornecer as dependências de uma classe por fora (geralmente via construtor) em vez de criá-las internamente.

Mudar a versão do Node.js.

Injetar código no navegador. > Explicação: Isso torna as classes menos "presas" umas às outras, facilitando testes e manutenção.

6. Por que o TypeScript é ótimo para Design Patterns?

Porque ele é mais rápido.

O uso de Interfaces permite definir contratos claros para os padrões funcionarem com segurança.

Ele tem ícones melhores para classes.

Padrões de projeto só funcionam no TypeScript. > Explicação: Padrões de design dependem fortemente de interfaces e polimorfismo, que o TS domina.

7. O que é o padrão "Singleton"?

Uma classe que só pode ter uma única instância em todo o ciclo de vida do programa.

Uma classe sem métodos.

Um arquivo com uma única linha.

Um comando que roda uma vez. > Explicação: Comumente usado para conexões de banco de dados ou gerenciamento de estado global.

8. Qual a diferença entre Service Layer e Repository?

Nenhuma, são o mesmo.

O Service contém a lógica de negócio; o Repository cuida apenas de buscar/salvar dados.

O Repository é para frontend; o Service é para backend.

O Service é opcional, o Repository é obrigatório. > Explicação: Separar "como eu busco" de "o que eu faço com o que busquei" é crucial para Clean Code.

9. Qual o risco de não usar padrões de projeto em sistemas grandes?

O sistema para de funcionar.

O código se torna um "Big Ball of Mud" (grande bola de lama), impossível de entender e modificar sem quebrar outras partes.

O servidor fica mais caro.

Nenhum risco real. > Explicação: Padrões dão estrutura e previsibilidade ao crescimento do software.

10. Pode-se combinar múltiplos padrões no mesmo projeto?

Não, eles entram em conflito.

Sim, projetos reais costumam usar dezenas de padrões de forma complementar.

Sim, mas apenas no Java.

Sim, mas apenas dois por arquivo. > Explicação: Padrões como Service, Repository e Factory são frequentemente usados juntos em arquiteturas modernas.

Quiz 15 - Introdução

1. O que significa "Clean Code" (Código Limpo)?

Código sem comentários.

Código escrito de forma que seja fácil de ler, entender e manter por outros desenvolvedores.

Código que usa muitos emojis.

Código que ocupa pouco espaço no disco. > Explicação: Um código limpo é aquele que parece ter sido escrito por alguém que se importa com quem vai ler depois.

2. No acrônimo SOLID, o que significa a letra **S**?

Simple Code.

Single Responsibility Principle (Princípio da Responsabilidade Única).

Syntax Check.

Super Classes. > Explicação: Uma classe ou função deve ter apenas uma razão para mudar (fazer apenas uma coisa).

3. O Princípio Aberto/Fechado (Open/Closed) diz que:

O código deve ser aberto para o público.

O código deve ser aberto para extensão, mas fechado para modificação direta.

Todas as funções devem estar fechadas em arquivos.

O projeto deve ser open source. > Explicação: Devemos ser capazes de adicionar novos comportamentos sem alterar o código que já funciona.

4. O que defende a "Segregação de Interfaces"?

Que não devemos usar interfaces.

Que é melhor ter várias interfaces específicas do que uma única interface "gorda" e genérica.

Que as interfaces devem ficar em pastas separadas.

Que as interfaces devem ser privadas. > Explicação: Evita que as classes sejam obrigadas a implementar métodos de que não precisam.

5. O que é a Inversão de Dependência (D do SOLID)?

Mudar a ordem dos imports.

Depender de abstrações (interfaces/classes abstratas) em vez de implementações concretas.

Deletar todas as dependências do projeto.

Inverter o nome das classes. > Explicação: Isso desconecta as camadas da aplicação, permitindo trocas fáceis de tecnologia.

6. Sobre nomenclatura: qual o melhor nome para uma variável que guarda a lista de usuários ativos?

`l`

`users`

`activeUsers` ou `activeUserList`

`data123` > Explicação: Nomes devem ser pronunciáveis e expressar intenção clara sem necessidade de comentários.

7. Qual a regra de ouro para o tamanho das funções em Clean Code?

Funções devem ter pelo menos 100 linhas para serem úteis.

Funções devem ser pequenas e fazer apenas uma coisa.

Funções devem ter o máximo de parâmetros possível.

Não existe regra para tamanho de funções. > Explicação: Funções pequenas são mais fáceis de testar, ler e reutilizar.

8. O que é o "Domain" (Domínio) em uma arquitetura de software?

O endereço do site (ex: google.com).

Onde vivem as regras de negócio puras, independentes de banco de dados ou frameworks.

A pasta de imagens.

O servidor principal. > Explicação: O coração do software; deve ser a parte mais protegida e testada.

9. Por que evitar comentários óbvios no código?

Porque economiza digitação.

Porque o código deve ser autoexplicativo; comentários óbvios tornam-se ruído e ficam desatualizados.

Porque comentários aumentam o tamanho do site.

Porque o computador não lê comentários. > Explicação: Comente o "porquê" de decisões estranhas/complexas, não o "o quê" o código faz.

10. O que significa "Boy Scout Rule" (Regra do Escoteiro) no desenvolvimento?

Usar uniforme para programar.

Sempre deixar o código um pouco mais limpo do que você o encontrou.

Criar fogueiras no escritório.

Ajudar o time apenas uma vez por dia. > Explicação: A manutenção contínua e pequenas melhorias evitam que o projeto vire um legado impossível de manter.

Quiz 16 - Introdução

1. O que acontece durante a etapa de "Build" de um projeto TypeScript?

O código TS é enviado para o GitHub.

O código TS é transpilado para JS puro para poder ser executado pelo Node ou Navegador.

O computador apaga todos os erros de tipo.

O código é traduzido para inglês. > Explicação: O ambiente de produção (seja servidor ou browser) não entende o TypeScript nativamente.

2. O que faz o comando `tsc --noEmit`?

Apaga o projeto.

Apenas verifica os erros de tipo sem gerar arquivos JavaScript de saída.

Compila o código muito rápido.

Instala uma nova versão do TS. > Explicação: Comumente usado em CI/CD para validar se o código está correto antes de tentar o deploy.

3. Por que não devemos commitar a pasta `dist/` ou `node_modules/` no Git?

Porque elas têm vírus.

Porque são arquivos gerados automaticamente; o Git deve conter apenas o seu código fonte original.

Porque o GitHub proíbe essas pastas.

Porque as pastas são muito pesadas. > Explicação: Outros desenvolvedores e servidores podem gerar esses arquivos a partir do seu código fonte e do `package.json`.

4. Para que serve o arquivo `.gitignore`?

Para ignorar as ordens do chefe.

Para listar pastas e arquivos que o Git deve desconsiderar (como pastas de build e segredos).

Para apagar arquivos permanentemente.

Para mudar o nome dos arquivos. > Explicação: Essencial para manter o repositório limpo e seguro.

5. O que o Docker resolve no processo de Deploy?

Aumenta a velocidade da internet do servidor.

Garante que a aplicação rode exatamente na mesma versão de Node e SO, evitando o problema "na minha máquina funciona".

Deixa o código TS mais rápido.

Cria backups da internet. > Explicação: Conteinerização padroniza o ambiente de execução em qualquer nuvem.

6. Em uma arquitetura profissional, onde o Frontend deve ser hospedado?

No mesmo servidor que o Banco de Dados.

Em serviços de "Static Hosting" (Vercel, Netlify, S3) para maior performance.

No computador local do desenvolvedor.

Dentro de um arquivo PDF. > Explicação: Frontends modernos (React, Vue, etc) são apenas arquivos estáticos após o build.

7. O que é uma "Variável de Ambiente"?

Uma variável que muda conforme a temperatura.

Configurações que mudam dependendo de onde o app está rodando (ex: porta do servidor, senha do banco).

Uma variável global no TypeScript.

Uma regra de reciclagem. > Explicação: Permitem que o mesmo código funcione em "Desenvolvimento", "Staging" e "Produção".

8. Qual o script padrão para iniciar a aplicação em produção no `package.json`?

`npm dev`

`npm start` (geralmente executando `node dist/index.js`).

`npm compile`

`npm deploy` > Explicação: O script de start deve rodar o código compilado, não o TS original.

9. O "Continuous Deployment" (CD) serve para:

Deixar o desenvolvedor cansado.

Automatizar o envio do código para produção assim que ele é aprovado no repositório.

Fazer backups das pastas.

Compilar apenas uma vez por semana. > Explicação: Agiliza o ciclo de vida do software e reduz o erro humano no processo de deploy manual.

10. Qual a importância de testar o build localmente antes de fazer o deploy?

Nenhuma, a nuvem resolve tudo.

Para garantir que não existam erros de importação ou arquivos faltando que só aparecem após a transpilação.

Para ocupar o tempo livre.

Para esquentar o computador. > Explicação: O comportamento do código em desenvolvimento (`ts-node`) pode ser sutilmente diferente do código compilado (`dist`).

Slides

Slides de Apoio 📽️

Material visual utilizado durante as aulas teóricas do curso.

Módulo 1: Core & Linguagem
Módulo 2: Ecossistema & Apps

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? ❓

Aula 02 - Tipos Fundamentais e Inferência 🛠️

Recapitulando 🔄

TypeScript adiciona tipos ao JavaScript
O compilador protege nosso código
tsconfig.json é a base

Tipos Primitivos 🧱

Os blocos básicos: - string: textos - number: números (inteiros e decimais) - boolean: verdadeiro ou falso

Exemplo: Sintaxe de Anotação ✍️

let nome: string = "Ricardo";
let idade: number = 30;
let vivo: boolean = true;

O Poder da Inferência 🧠

O TypeScript é inteligente!
Se você atribui um valor, ele adivinha o tipo.

let curso = "TypeScript Profissional"; 
// TS já sabe que é string!

Quando Anotar? ⚖️

Inferencia: Variáveis locais simples.
Anotação: Parâmetros de função, retorno de funções e objetos complexos.

Trabalhando com Arrays 📚

Duas formas de escrever:

let precos: number[] = [10, 20, 30];
// OU
let precos: Array<number> = [10, 20, 30];

Arrays Fortemente Tipados 🛡️

O TS impede que você adicione um string em um array de number.
Segurança total em iterações (map, filter).

Tuplas: Arrays com Regras 📏

Tamanho fixo e tipos específicos por posição.

let produto: [number, string] = [1, "Notebook"];

Tuplas na Prática 📦

Ideal para coordenadas (lat, long), retornos simples de funções ou estados (como no React).

Enums: Legibilidade 🏷️

Define um conjunto de nomes para valores constantes.

enum Status {
    Pendente,
    Aprovado,
    Cancelado
}

Enums de String 🔠

Valores mais claros para depuração.

enum Tema {
    Escuro = "DARK",
    Claro = "LIGHT"
}

O Tipo `any` (Perigo!) ⚠️

Desativa a checagem de tipos.
Use apenas em migrações ou casos extremos.

O Tipo `unknown` (Segurança) 🛡️

Diferente do any, ele não permite operações sem checagem de tipo prévia.

let valor: unknown = 10;
// valor.toUpperCase() -> Erro!

Estreitamento (Type Guards) 🔍

Como "provar" ao TS o tipo de uma variável.

if (typeof valor === "string") {
    console.log(valor.toUpperCase());
}

Void: Sem Retorno 🚫

Usado em funções que executam uma tarefa mas não devolvem valor.

Never: O Impossível 🛑

Funções que lançam erro ou entram em loop infinito.

Null e Undefined ❓

No modo strict, eles são tratados como erros se você não os prever.
Evita erros de "null references".

Resumo 🏁

Tipos Primitivos
Arrays e Tuplas
Enums e Any/Unknown

Próxima Aula: Tipos Avançados!

Vamos ver Uniões, Interseções e mais. 🚀

Aula 03 - Tipos Avançados 🧩

O Desafio da Flexibilidade 🤸

Nem tudo no mundo é preto no branco (string ou number).
Às vezes um dado pode ser várias coisas.

Union Types (União) 🤝

O operador | (ou).
Permite que uma variável aceite mais de um tipo.

let id: number | string;
id = 10;
id = "ABC";

Uniões na Prática 📦

Útil para: Status de API, IDs, Cores de tema.

Type Aliases (Apelidos) 🏷️

Em vez de repetir string | number, criamos um nome.

type ID = string | number;
let userId: ID = 123;

Aliases de Objetos 🏗️

Organização e legibilidade.

type Usuario = {
    nome: string;
    email: string;
};

Intersection Types (Interseção) 🔗

O operador & (e).
Combina tipos existentes em um novo.

type Pessoa = { nome: string };
type Admin = { nivel: number };

type SuperUser = Pessoa & Admin;

Interseção vs União ⚖️

União (|): Um ou outro.
Interseção (&): Todos juntos.

Literal Types (Literais) 🎯

Restringe uma variável a valores exatos.

type Alinhamento = "esquerda" | "direita" | "centro";

Segurança com Literais 🛡️

Evita erros de digitação (ex: "esquerada").

Narrowing: Estreitando Tipos 🔍

O TS analisa a lógica do if para saber o tipo exato.

function processar(id: number | string) {
    if (typeof id === "string") {
        // Aqui o TS sabe que é string!
    }
}

Type Guards Reais 🕵️

Além de typeof:
instanceof (para classes)
Operador in (para propriedades)

Funções como Guards 🛡️

Podemos criar funções que retornam um booleano de tipagem.

function isUsuario(obj: any): obj is Usuario {
    return "email" in obj;
}

O operador `as` (Type Assertion) ⚠️

Avisar ao TS: "Pode confiar, eu sei que isso é X".
Use com cautela!

Non-Null Assertion ‼️

O ponto de exclamação !.
Garante que algo não é nulo/indefinido.

Discriminated Unions 🆔

Adicionar um campo "tag" para facilitar a distinção entre tipos em uma união.

interface Sucesso { type: "sucesso"; data: string; }
interface Erro { type: "erro"; msg: string; }

Exemplo: API Response 📡

graph TD;
    Response[API Response] --> Success[Tipo: Success];
    Response --> Error[Tipo: Error];
    Success --> UI[Renderizar Dados];
    Error --> Log[Mostrar Alerta];

Resumo 🏁

Union e Intersection
Type Aliases
Narrowing e Type Guards

Próxima Aula: Interfaces!

Vamos modelar sistemas complexos. 🚀

Aula 04 - Interfaces e Modelagem de Domínio 🏗️

O que são Interfaces? 🧩

Contratos para o seu código.
Definem a "forma" de um objeto.

Diferença: Interface vs Type ⚖️

Interface: Focada em objetos e extensibilidade (POO).
Type: Mais flexível (Unions, Primitivos, Interseções).

Sintaxe Básica ✍️

interface Usuario {
    nome: string;
    email: string;
}

Propriedades Opcionais ❓

Use ? para campos que podem não existir.

interface Produto {
    nome: string;
    preco: number;
    descricao?: string;
}

Propriedades Readonly 🔒

Proteção contra alterações após a criação.

interface Config {
    readonly apiKey: string;
}

Extensibilidade (Herança) 🌲

Interfaces podem herdar de outras.

interface Animal { nome: string; }
interface Gato extends Animal { miau: boolean; }

Herança Múltipla 🌳

Sim, uma interface pode estender várias!

interface Humano extends Pessoa, Trabalhador {}

Implementação em Classes 🏛️

O contrato que a classe deve seguir.

class MeuBotao implements BotaoInterface {
    // Deve ter os métodos da interface
}

Declaration Merging 🤝

Interfaces com o mesmo nome na mesma pasta se fundem automaticamente.

Quando usar Merging? 🛠️

Ideal para estender definições de bibliotecas externas (como adicionar um campo no Request do Express).

Modelagem de Domínio 🗺️

Traduzindo a realidade em interfaces.
Cliente, Produto, Pedido, Pagamento.

Exemplo: Pedido de Ecommerce 🛒

classDiagram
    Pedido --> Cliente
    Pedido --> "many" ItemPedido
    ItemPedido --> Produto
    class Produto{ +id, +nome, +preco }

Interfaces para Funções 📞

Sim, interfaces podem descrever a assinatura de uma função.

interface Calculadora {
    (a: number, b: number): number;
}

Boas Práticas de Nomeação ✍️

Use nomes substantivos (Usuario, Produto).
A convenção do prefixo I (ex: IUsuario) é opcional, mas herdada do C#.

Interface vs Model 🏗️

No TS, usamos interfaces para definir a estrutura dos dados que trafegam na nossa aplicação.

Segurança de Tipo Total 🛡️

Com interfaces bem definidas, erros de "undefined" somem do seu projeto.

Resumo 🏁

Definição de Interfaces
Extensão (extends)
Interface vs Type Alias

Próxima Aula: Classes e POO!

Vamos entrar no mundo dos objetos. 🚀

Perguntas? ❓

Aula 05 - Classes e Programação Orientada a Objetos 🏛️

O que é POO? 🧱

Programação Orientada a Objetos.
Organizar o código em "moldes" (classes) e "exemplares" (objetos).

Classes no TypeScript 🏗️

Diferente do JS puro, o TS permite tipar atributos e usar modificadores.

class Animal {
    nome: string;
    constructor(nome: string) { this.nome = nome; }
}

Modificadores de Acesso 🔑

public: Acesso em qualquer lugar (padrão).
private: Acesso apenas dentro da classe.
protected: Acesso na classe e em suas subclasses.

Shorthand Properties 🏎️

Mais rápido e limpo!

class Pessoa {
    constructor(private nome: string, public idade: number) {}
}

Readonly em Classes 🔒

Propriedades que só podem ser mudadas no construtor.

Getters e Setters 🛡️

Interceptam o acesso aos dados.

get preco() { return this._preco; }
set preco(v: number) { if(v > 0) this._preco = v; }

Herança (Extends) 🌲

Reutilize código de classes base.

class Gato extends Animal {
    miar() { console.log("Miau!"); }
}

O Método `super()` 🦸

Chama o construtor da classe pai.
Obrigatório se a classe filha tiver seu próprio construtor.

Polimorfismo 🎭

"Muitas formas".
Uma subclasse pode sobrescrever métodos do pai.

Sobreescrita de Métodos ✍️

class Cachorro extends Animal {
    falar() { console.log("Au Au!"); }
}

Classes Abstratas ☁️

Moldes que não podem ser usados sozinhos.
Servem apenas para serem herdados.

Métodos Abstratos 📋

O pai define o que deve ser feito.
A filha decide como fazer.

Membros Estáticos (`static`) ⚡

Pertencem à classe, não ao objeto (instância).
Ex: Math.random().

Diagramas de Classe 📊

classDiagram
    Animal <|-- Cachorro
    Animal : +nome string
    Animal : +falar()
    class Cachorro{
        +falar()
    }

Vantagens no TypeScript 💎

Checagem rigorosa de quem pode acessar o quê.
Melhores sugestões de refatoração no editor.

Encapsulamento Real 🛡️

Ocultar complexidade interna e expor apenas o necessário.

Composição vs Herança 🧩

Dica: Prefira compor objetos pequenos em vez de criar hierarquias gigantes de herança.

Resumo 🏁

Modificadores (Public, Private, Protected)
Herança e Polimorfismo
Classes Abstratas

Próxima Aula: Generics!

Vamos criar código universal e seguro. 🚀

Perguntas? ❓

Aula 06 - Generics (Programação Genérica) 📦

O que são Generics? 🧬

Componentes que funcionam com vários tipos de dados.
Mantêm a segurança sem usar any.

O Problema do `any` 🌪️

Perdemos o autocompletar.
O TypeScript para de nos proteger.

A Sintaxe `<T>` ✍️

O Diamante (Diamond Operator).
"T" representa um tipo que será definido depois.

Exemplo: Função Genérica 📞

function Identity<T>(arg: T): T {
    return arg;
}

Como usar Generics 🛠️

Especificando o tipo: Identity<string>("Olá").
Deixando o TS inferir: Identity(10).

Generics em Arrays 📚

Já vimos isso: Array<string> é um Generic!

Múltiplos Tipos Genéricos 👥

Podemos ter mais de um.
<T, U, K>.

function par<T, U>(a: T, b: U) { ... }

Generic Constraints (Restrições) ⛓️

Limitar quais tipos podem ser usados.
Usamos a palavra-chave extends.

Exemplo: Restrição de Propriedade 🛡️

interface PossuiLength { length: number; }

function logSize<T extends PossuiLength>(arg: T) {
    console.log(arg.length);
}

Classes Genéricas 🏗️

Criar moldes que se adaptam ao dado neles guardado.

class Caixa<T> {
    constructor(public conteudo: T) {}
}

Interfaces Genéricas 🧩

Muito comum para respostas de servidores.

interface Resposta<T> {
    data: T;
    error: string | null;
}

Generics com Valor Padrão 🎁

Podemos definir um tipo "default".

interface Config<T = string> { ... }

Por que usar Generics? 💎

Reutilização de código masiva.
Tipagem 100% segura.
Menos código duplicado.

Onde encontramos Generics? 🕵️

Bancos de dados (Prisma, TypeORM).
Consumo de APIs (Axios).
Hooks do React (useState<User>()).

Visualizando Generics 📊

graph LR;
    Func[Função Genérica] -- "Passa String" --> Res1[Retorna String];
    Func -- "Passa Number" --> Res2[Retorna Number];
    style Func fill:#f9f,stroke:#333

Boas Práticas ✍️

Não use Generics se não for necessário (KISS).
Use nomes curtos como T, U, V ou descriptivos como TData, TResponse.

Erros Comuns ❌

Tentar usar métodos específicos de um tipo (ex: .toUpperCase()) sem antes de fazer a restrição com extends.

Generics vs Unions ⚖️

Unions: Aceita A ou B.
Generics: "Prende" o tipo do início ao fim da execução.

Resumo 🏁

Conceito de Generics
Constraints (extends)
Classes e Interfaces Genéricas

Próxima Aula: Utility Types!

Vamos manipular tipos como magos. 🚀

Perguntas? ❓

Aula 07 - Utility Types e Manipulação de Tipos ⚙️

O que são Utility Types? 🛠️

Atalhos integrados no TypeScript.
Transformam tipos existentes em novos tipos de forma fácil.

`Partial<T>` (Opcional) ❓

Torna todas as propriedades de um tipo opcionais.

Exemplo: Update de Usuário 🔄

Frequentemente usado em formulários de edição onde você só muda alguns campos.

function update(id: number, fields: Partial<User>) { ... }

`Required<T>` (Obrigatório) ❗️

O oposto do Partial.
Garante que todas as propriedades existam, mesmo as marcadas com ?.

`Readonly<T>` (Imutável) 🔒

Transformar todas as propriedades em apenas leitura.

Curiosidade 🧠

Readonly só impede a alteração via TypeScript. No JavaScript compilado, o valor ainda pode ser alterado se não usarmos técnicas de JS como Object.freeze.

`Pick<T, K>` (Escolher) 🎯

Selecionar apenas algumas propriedades de um tipo.

type UserBasic = Pick<User, "nome" | "email">;

`Omit<T, K>` (Omitir) 🚫

Remove propriedades específicas de um tipo.

type UserSemSenha = Omit<User, "senha">;

Pick vs Omit ⚖️

Use Pick quando quiser poucas coisas de um tipo grande.
Use Omit quando quiser remover poucas coisas de um tipo grande.

`Record<K, T>` (Mapear) 🗺️

Criar um objeto de chave-valor bem definido.

const roles: Record<number, string> = {
    1: "Admin",
    2: "User"
};

`Exclude<T, U>` e `Extract<T, U>` 🔍

Exclude: Remove tipos de uma união.
Extract: Mantém apenas tipos comuns entre uniões.

`ReturnType<T>` 📞

Captura o tipo de retorno de uma função automaticamente.

Por que usar estes utilitários? 💎

Evita repetição de código (DRY).
Se o tipo base mudar, os utilitários se atualizam sozinhos!

Mapped Types: Por debaixo dos panos 🪄

Os Utility Types usam iteração sobre as chaves do objeto para funcionar.

Visualizando as Transformações 📊

graph LR;
    Original[User Full] -- "Omit 'senha'" --> Public[User Public];
    Original -- "Partial" --> Update[User Update Form];
    Original -- "Pick 'id' | 'nome'" --> Summary[User Summary];

Dica: Documentação Oficial 📚

O TypeScript possui dezenas de utilitários. Sempre consulte antes de criar um tipo complexo manualmente.

Utility Types em APIs 📡

Muito útil para filtrar dados sensíveis antes de enviá-los ao frontend.

Refatoração com Utilitários 🛠️

Reduza suas 200 linhas de interfaces para 50 usando composição e utilitários.

Resumo 🏁

Partial, Required e Readonly
Pick e Omit
Record e ReturnType

Próxima Aula: Manipulação Avançada!

Vamos ver Keyof, Infer e Conditional Types. 🚀

Perguntas? ❓

Aula 08 - Manipulação Avançada de Tipos 🧪

Subindo o Nível 🚀

Hoje vamos além das interfaces simples.
Veremos como o TS pode ser dinâmico e "mágico".

O operador `keyof` 🔑

Extrai todas as chaves (nomes das propriedades) de um tipo.

type User = { id: number; nome: string };
type UserKeys = keyof User; // "id" | "nome"

`keyof` na Prática 🛠️

Criar funções que acessam propriedades de objetos com garantia de que a chave existe.

Indexed Access Types 📂

"Olhar" para o tipo de uma propriedade específica.

type NomeTipo = User["nome"]; // string

Conditional Types (Se/Então) ⚖️

Tipos que decidem seu formato baseados em condições.
Sintaxe: T extends U ? X : Y.

Exemplo: Verificação de Tipo 🔍

type IsString<T> = T extends string ? "Sim" : "Não";

A palavra-chave `infer` 🕵️

Capturar um tipo de "dentro" de outro durante uma checagem condicional.

Exemplo: Extrair Tipo do Array 📦

type GetArrayType<T> = T extends (infer U)[] ? U : T;

Template Literal Types 🔠

Criar uniões de strings dinâmicas usando crases.

type Evento = "click" | "hover";
type EventoDinamico = `on${Capitalize<Evento>}`; 
// "onClick" | "onHover"

Manipulando Nomes de Propriedades ✍️

Utilitários: Uppercase, Lowercase, Capitalize, Uncapitalize.

Mapped Types Avançados 🗺️

Mudar o nome das chaves durante a criação do tipo.

type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

Recursividade em Tipos 🔁

Um tipo pode chamar a si mesmo! (Cuidado com loops infinitos).

Utilitário: `Exclude` e `Extract` Revisitados 🛠️

Por baixo dos panos todos eles usam tipos condicionais.

Visualizando Lógica de Tipos 📊

graph TD;
    T{T extends string?};
    T -- Sim --> R1[Tipo: String];
    T -- Não --> R2[Tipo: Outro];

Onde isso é usado? 💎

Filtros de busca tipados automaticamente.
Transformadores de dados complexos.
Frameworks como NestJS e bibliotecas de Schema (Zod).

Por que aprender isso? 🏆

Para construir ferramentas (libraries) que outros desenvolvedores usarão.
Para entender as mensagens de erro mais cabulosas do TS.

Dica: Não abuse! 🛑

Código de tipagem muito complexo pode ser tão difícil de manter quanto código de lógica complexa.

Deep Dive: `infer` 🌊

Pense no infer como uma variável temporária que o TS preenche para você.

Resumo 🏁

keyof e Acesso Indexado
Tipos Condicionais e infer
Template Literal Types

Próxima Aula: Módulos e Organização!

Vamos organizar nosso caos. 🚀

Perguntas? ❓

Aula 09 - Módulos e Organização Profissional 📁

Organizando o Caos 🌪️

Conforme o projeto cresce, não podemos ter tudo em um arquivo só.
Precisamos de uma estrutura modular e escalável.

ES Modules (Import/Export) 📦

O padrão moderno do JavaScript.
export: Disponibilizar algo.
import: Trazer algo de outro arquivo.

Named Exports (Exportações Nomeadas) 🏷️

Várias exportações por arquivo.

export class Usuario {}
export const PI = 3.14;

Default Export (Exportação Padrão) 🥇

Apenas uma por arquivo.
Não precisa de chaves {} ao importar.

Barrel Files (index.ts) 🛢️

Concentrar exportações de uma pasta em um único ponto.
Simplifica a vida de quem consome.

Exemplo: Pasta de Controllers 🎮

Em vez de importar de 5 arquivos, importa tudo do index.ts.

Namespaces (Espaços de Nomes) 🏘️

Uma forma antiga de organizar código TS.
Evitam colisões de nomes globais.
Dica: Prefira Módulos para projetos modernos.

Path Aliases (Apelidos de Caminho) 🔗

Chega de ../../../.
Use @models/Usuario em vez de caminhos relativos infinitos.

Configurando Aliases ⚙️

Feito no tsconfig.json.

"paths": {
  "@models/*": ["src/models/*"]
}

Estrutura de Pastas Profissional 🏗️

src/
  ├── models/
  ├── services/
  ├── controllers/
  ├── routes/
  └── index.ts

Módulos de Terceiros 📦

Instalando tipos: @types/nome-da-biblioteca.
Ex: @types/node, @types/express.

Tipagem de Bibliotecas Legadas 🕰️

Como criar seu próprio arquivo .d.ts se a biblioteca não tiver tipos.

Declare: O comando de confiança 🤝

declare var jQuery: any;
Avisa ao TS que algo existe globalmente (ex: via CDN).

Modificadores de Acesso de Módulos 🔒

Se você não exportar, fica privado ao arquivo.
Encapsulamento em nível de sistema de arquivos!

Re-exportação 🔄

export * from './outro-arquivo';
Útil para criar bibliotecas e SDKs.

Visualizando o Fluxo de Módulos 📊

graph LR;
    User[User.ts] -- Export --> Index[index.ts];
    App[App.ts] -- Import --> Index;
    style Index fill:#f96,stroke:#333

Scripts NPM de Organização 📝

lint: Verificar estilo.
format: Ajustar código automaticamente (Prettier).

Barrel Files: Menos é Mais! ⚖️

Cuidado com o "Circula Dependency" ao usar Barrel Files em excesso.

Resumo 🏁

Import / Export
Barrel Files e Namespaces
Path Aliases e Organização de Pastas

Próxima Aula: TypeScript com Node.js!

Vamos para o Backend. 🚀

Perguntas? ❓

Aula 10 - TypeScript com Node.js (Backend) 🟢

TypeScript no Servidor 🖥️

Segurança total desde a requisição até o banco de dados.

Setup de um Projeto Backend 🛠️

Instalar: express, ts-node-dev, @types/node, @types/express.

Por que Node + TS? 🚀

Autocompletar nos métodos do Express.
Refatoração de APIs de larga escala.
Redução de erros 500 (Internal Server Error).

Configurando o Servidor 📡

import express, { Request, Response } from 'express';
const app = express();

Tipando Requisições (Request) 📥

Garantir que o body ou params tenham o formato correto.

interface UserBody { nome: string; }
app.post('/', (req: Request<{}, {}, UserBody>, res: Response) => { ... });

Tipando Respostas (Response) 📤

Forçar que sua API retorne sempre o mesmo padrão JSON.

O uso de DTOs 🔄

Data Transfer Object.
Simplesmente um tipo que define o que entra e o que sai da aplicação.

Camada de Serviços (Services) 🏗️

Tire a lógica de dentro da rota!
Crie classes de serviço tipadas.

Middlewares Tipados 🛡️

Autenticação e logs.
O uso da NextFunction.

Tratamento de Erros Profissional ⚠️

Criar classes de erro customizadas (AppError).
Middleware global de erros para capturar tudo de forma tipada.

Banco de Dados com TS 💾

Ferramentas modernas: Prisma ou TypeORM.
Elas geram os tipos automaticamente a partir do seu esquema!

Exemplo: Fluxo de Dados Backend 📊

graph LR;
    Client[Cliente] -- Requisição --> Router[Rotas];
    Router -- DTO --> Controller[Controller];
    Controller --> Service[Service];
    Service --> DB[(Banco de Dados)];

Scripts de Desenvolvimento 📝

"dev": "ts-node-dev --respawn --transpile-only src/server.ts"

Variáveis de Ambiente Tipadas 🗝️

Como garantir que seu process.env tenha as chaves necessárias.

Deploy de Código Backend 🚀

Transpilação com tsc.
Execução com node dist/server.js.

Performance: --transpile-only 🏎️

Em desenvolvimento, ignoramos os erros de tipo para rodar mais rápido; o editor já nos avisou antes!

CORS e Segurança 🔒

Tipando as configurações de Cross-Origin.

Documentação Automática (Swagger) 📖

Como gerar docs a partir dos seus tipos TS.

Resumo 🏁

Express + TS Setup
Tipagem de Request/Response
Organização em Middlewares e Services

Próxima Aula: TypeScript com Frontend Moderno!

Vamos para o React. 🚀

Perguntas? ❓

Aula 11 - TypeScript com Frontend Moderno ⚛️

TypeScript no Navegador 🌐

Foco em: Componentização e Segurança de Dados.

Por que Frontend + TS? 🚀

Saber exatamente quais Props um componente recebe.
Evitar o clássico "undefined is not a function" na UI.
Estado (State) 100% previsível.

Tipando Props 🧩

O contrato entre o componente pai e o filho.

interface BotaoProps {
    label: string;
    onClick: () => void;
}

Componentes Funcionais 🧱

Como declarar: const MeuComp = ({ label }: Props) => { ... }

Hooks: `useState` 🎣

Inferência vs Explícito.

const [user, setUser] = useState<Usuario | null>(null);

Hooks: `useRef` 🔍

Manipulando o DOM com segurança.

const inputRef = useRef<HTMLInputElement>(null);

Eventos de Formulário 📝

Tipos específicos: ChangeEvent, FormEvent.

Context API Tipada 🌍

Estado global seguro.

interface Contexto { tema: string; user: User; }
const GlobalContext = createContext<Contexto | undefined>(undefined);

Hooks Customizados Genéricos 🛠️

useLocalStorage<T>: Reutilização total!

Estilização (CSS-in-JS) 🎨

Tipando temas no Styled Components ou Tailwind.

Consumo de API no Front 📡

Onde realizar a chamada (useEffect) e como guardar no estado tipado.

Componentes Genéricos de UI 🔘

Tabelas, Listas e Grids que aceitam qualquer dado.

O operador `as` no DOM ⚠️

e.target as HTMLButtonElement.
Necessário às vezes para acessar propriedades específicas.

Hierarquia de Componentes 📊

graph TD;
    App[App.tsx] --> AuthProvider[Context: Auth];
    AuthProvider --> Dashboard[Página: Dashboard];
    Dashboard --> UserCard[Componente: UserCard];

Erros comuns no Frontend ❌

Esquecer de tipar o null inicial do useState.

Melhores ferramentas 🛠️

Vite + TypeScript (O padrão atual).
ESLint + Prettier.

Tipagem de Bibliotecas UI 📚

Material UI, Shadcn/UI, Radix.

Testando Componentes 🧪

Introdução rápida ao Testing Library com TS.

Resumo 🏁

Props e State Tipados
Hooks e Context API
Componentes Genéricos

Próxima Aula: Integração com APIs!

Vamos conectar tudo. 🚀

Perguntas? ❓

Aula 12 - Integração com APIs e Tipagem de Dados Externos 📡

O Mundo Externo é Incerto 🌪️

O TypeScript não roda na internet.
Dados vindos de APIs podem estar errados ou incompletos.

Fetch e Axios com Generics 🌐

Informar ao TS o que esperamos receber.

const { data } = await axios.get<User>(url);

Tipagem de Respostas de API 📥

Crie interfaces que reflitam EXATAMENTE o JSON da API.

O Padrão DTO Revisitado 🔄

Diferença entre o que a API envia e o que sua aplicação precisa.

Mapeamento de Dados (Mappers) 🗺️

Funções que convertem a resposta da API para o seu modelo interno.

Por que mapear? 💎

Se a API mudar um campo de nome, você só altera o Mapper, não o app inteiro!

Validação em Tempo de Execução 🛡️

O TypeScript desaparece no build.
Precisamos de algo que valide os dados enquanto o usuário usa o app.

Conhecendo o Zod 🛡️

Biblioteca de Schema Validation.
"Criação de tipos que validam".

Exemplo: Schema Zod ✍️

const UserSchema = z.object({
  id: z.number(),
  nome: z.string().min(3)
});

Inferencia do Zod 🧠

Gere seu tipo TS a partir do Schema!

type User = z.infer<typeof UserSchema>;

Tratamento de Erros de Rede ⚠️

Tipando erros HTTP (404, 500, etc).

Axios Interceptors 🛠️

Adicionar cabeçalhos (Auth) e tratar erros globalmente com tipagem.

Estado de Loading e Error ⏳

Criar uniões para representar os estados de uma requisição.

type APIStatus = "idle" | "loading" | "success" | "error";

Visualizando o Ciclo da Requisição 📊

graph LR;
    App[App/Store] -- Request --> Axios[Axios];
    Axios -- JSON --> Zod{Validação};
    Zod -- OK --> Mapper[Mapper/App];
    Zod -- Erro --> UI[Alerta de Erro];

React Query e SWR ⚡

Bibliotecas que facilitam a vida com TS, Cache e estados de carregamento.

Tipagem de Parâmetros de Busca (Query Params) 🔍

/users?ordenar=nome&limite=10.

Mocking de APIs para Testes 🎭

Usando MSW (Mock Service Worker) para simular respostas tipadas.

O Perigo do `any` em APIs 🛑

NUNCA deixe o retorno da API como any. É o lugar onde mais acontecem bugs silenciosos.

Resumo 🏁

Axios + Generics
Mapeamento e DTOs
Validação com Zod

Próxima Aula: Testes com TypeScript!

Vamos garantir a estabilidade. 🚀

Perguntas? ❓

Aula 13 - Testes com TypeScript 🧪

Por que Testar? 🛡️

Garantir que o código faz o que deve fazer.
Evitar que bugs antigos voltem (regressão).
Confiança para refatorar.

O Ecossistema Jest 🎪

Jest: O framework de testes "tudo em um".
ts-jest: O motor que permite rodar TS no Jest.

Tipos de Teste 🧱

Unitário: Pequenas partes (funções).
Integração: Várias partes juntas (API + DB).
E2E (Ponta a Ponta): O fluxo completo do usuário no navegador.

Anatomia de um Teste 🔍

describe('Calculadora', () => {
  it('deve somar dois números', () => {
    expect(somar(2, 2)).toBe(4);
  });
});

Configurando o Jest ⚙️

jest.config.js
Preset: ts-jest.

Testando Funções Assíncronas ⏳

async/await nos testes.

it('deve buscar dados', async () => {
    const data = await api.get();
    expect(data).toBeDefined();
});

O Poder dos Mocks 🎭

Simular dependências que não queremos usar nos testes (ex: banco de dados real).

Mockando Módulos 🧩

jest.mock('./api');
const mockedApi = api as jest.Mocked<typeof api>;

Spies (Espiões) 🕵️

Verificar se uma função foi chamada, quantas vezes e com quais argumentos.

Testando Erros ⚠️

Garantir que seu código lança as exceções corretas nos momentos certos.

Cobertura de Código (Coverage) 📊

Saber quais partes do projeto ainda não foram testadas.

Testes de Integração com Supertest 🔗

Testar rotas do Express sem precisar subir o servidor de verdade.

Hooks de Teste 🪝

beforeEach: Rodar algo antes de cada teste (ex: limpar banco).
afterAll: Rodar após tudo (ex: fechar conexões).

TDD (Test Driven Development) 🔄

Escrever o teste antes do código.

graph LR;
    Red[Vermelho: Falha] --> Green[Verde: Passa];
    Green --> Refactor[Refatorar];
    Refactor --> Red;

Vantagens no TypeScript 💎

O próprio compilador já é um "teste de tipo" constante.
Os testes unitários focam na lógica, enquanto o TS foca nos contratos.

Testando o Frontend (React) ⚛️

React Testing Library.
Focar no comportamento do usuário, não na implementação.

CI/CD e Testes 🚀

Rodar os testes automaticamente em cada git push.

Dica: Testes Legíveis 📖

O nome do teste deve ser uma frase que explique o cenário e o resultado esperado.

Resumo 🏁

Jest e ts-jest
Mocks e Spies
TDD e Integração

Próxima Aula: Padrões de Projeto!

Vamos arquitetar como profissionais. 🚀

Perguntas? ❓

Aula 14 - Padrões de Projeto com TypeScript 🛡️

Software de Alta Qualidade 🏆

Não basta funcionar; o código deve ser fácil de manter e evoluir.

O que são Design Patterns? ♟️

Soluções reutilizáveis para problemas recorrentes no design de arquitetura.

Padrão Repository 🏛️

Isolar a lógica de persistência de dados.
O app não sabe se os dados vêm do SQL, Mongo ou Memória.

Implementando um Repository 🏗️

Use Interfaces para definir o contrato.

interface IUserRepository {
  save(user: User): Promise<void>;
}

Service Layer 🏗️

Onde vive a Lógica de Negócio.
Os serviços orquestram os repositórios.

Dependency Injection (DI) 💉

Injetar dependências via construtor.
Classes desacopladas e fáceis de testar.

Factory Pattern 🏭

Centralizar a lógica de criação de objetos complexos.

class PaymentFactory {
  static create(type: string): IPayment { ... }
}

Strategy Pattern 🎯

Trocar algoritmos em tempo de execução.
Ex: Diferentes formas de cálculo de desconto.

Singleton Pattern 🥇

Garantir que uma classe tenha apenas uma instância (ex: Configuração, Database).

Observer Pattern 👁️

Um objeto notifica outros sobre mudanças de estado.

Decorators em TypeScript 🎀

Adicionar metadados ou comportamentos a classes e métodos de forma elegante (muito usado no NestJS).

Onde usar cada padrão? 🗺️

graph TD;
    API[API/Routes] --> Service[Service Layer - Business Logic];
    Service --> Repository[Repository Pattern - Data];
    Service --> Factory[Factory - Object Creation];
    Service --> Strategy[Strategy - Algorithms];

Vantagens dos Padrões 💎

Linguagem comum entre desenvolvedores.
Código mais organizado e previsível.
Facilidade de expansão.

Composição sobre Herança 🧩

Use padrões para compor comportamentos em vez de criar cadeias longas de classes pais.

Padrões no Frontend ⚛️

Custom Hooks (são um tipo de Factory/Service).
Render Props e HOCs (Padrão Decorator/Wrapper).

Dica: Não "Super-Arquitete" 🛑

Use padrões apenas quando houver um problema real para resolver. Evite complexidade desnecessária.

Padrões de Criação, Estruturais e Comportamentais 📂

As três grandes categorias do GoF (Gang of Four).

Resumo 🏁

Repository e Service
Injeção de Dependência
Factory e Strategy

Próxima Aula: Clean Code e Arquitetura!

O refino final do seu código. 🚀

Perguntas? ❓

Aula 15 - Clean Code e Arquitetura 📐

Código para Humanos 👥

"Qualquer tolo consegue escrever código que um computador entenda. Bons programadores escrevem código que humanos entendam."

O que é Clean Code? ✨

Um código que se lê como uma prosa bem escrita.

Princípios SOLID 💎

Cinco pilares da arquitetura orientada a objetos: - Single Responsibility - Open/Closed - Liskov Substitution - Interface Segregation - Dependency Inversion

S: Responsabilidade Única 🎯

Uma classe/função deve ter apenas UM motivo para mudar.

O: Aberto para Extensão, Fechado para Mudança 🔓

Adicione novas funcionalidades sem quebrar o que já existe.

I: Segregação de Interfaces 🧩

Interfaces pequenas e específicas são melhores que interfaces "gordas".

D: Inversão de Dependência 💉

Dependa de abstrações, não de implementações.

DRY: Don't Repeat Yourself 🔁

Evite duplicar lógica em vários lugares.

KISS: Keep It Simple, Stupid! 🧠

Não complique o que pode ser simples.

YAGNI: You Ain't Gonna Need It 🚫

Não adicione funcionalidades "para o futuro" que você ainda não precisa.

Nomes Significativos ✍️

Variáveis e funções devem dizer o que fazem sem precisar de comentários.

Funções Pequenas 🤏

Máximo de 20 linhas.
Se a função está grande, ela provavelmente faz coisas demais.

Comentários: O Mal Necessário ⚠️

Se você precisa comentar o que o código faz, o código não está limpo o suficiente. Comente o "porquê" de decisões complexas.

Arquitetura em Camadas 🏢

graph TD;
    UI[Interface / API] --> Application[Camada de Aplicação];
    Application --> Domain[Camada de Domínio];
    Domain --> Infra[Infraestrutura / BD];

DDD: Domain-Driven Design 🗺️

O coração do software é o Domínio (regras de negócio).

Entidades e Value Objects 💎

Entidades: Têm ID (Ex: Usuário).
Value Objects: Definidos pelos seus atributos (Ex: Endereço).

Refatoração Contínua 🧹

Aplique a "Regra do Escoteiro": Deixe o código sempre um pouco melhor do que o encontrou.

Dívida Técnica 💸

Código "sujo" hoje é juros que você pagará amanhã em forma de bugs e lentidão.

Resumo 🏁

Princípios SOLID
Regras de Clean Code (Nomes, Tamanho)
Arquitetura em Camadas

Próxima Aula: Projeto Final e Deploy!

Vamos colocar tudo no ar. 🚀

Perguntas? ❓

Aula 16 - Projeto Final e Deploy 🚀

O Grand Finale! 🎓

Hora de colocar em prática tudo o que aprendemos.

O Projeto: E-commerce Fullstack 🛒

Backend: Node.js + Express + TS.
Frontend: React + Hooks + TS.
Integração: Axios + Zod.
Qualidade: Jest.

O Ciclo da Produção 🏗️

graph LR;
    Code[Código TS] --> Build[Compilação tsc];
    Build --> Test[Testes CI];
    Test --> Artifact[Artefato JS];
    Artifact --> Deploy[Servidor / Nuvem];

Preparando o Build 📦

O comando: npm run build.
Gerando a pasta dist/.

Scripts de Produção 📝

start: Executar o código compilado com node.

Variáveis de Ambiente (.env) 🗝️

Senhas de banco, portas do servidor, chaves de API.
Nunca envie seu .env para o Git!

Dockerizando a Aplicação 🐳

Padronização total do ambiente.

# Exemplo básico
FROM node:18
WORKDIR /app
COPY . .
RUN npm install && npm run build
CMD ["node", "dist/index.js"]

Deploy Frontend 🌐

Hostings Estáticos: Vercel, Netlify.
Alta performance via CDNs globais.

Deploy Backend 🖥️

Plataformas: Railway, Render, AWS, Heroku.

Continuous Deployment (CD) 🔄

Push no GitHub = Deploy automático.

Monitoramento e Logs 📊

Saber quando o site cai e por que.

Documentação Final 📖

O README.md é a vitrine do seu projeto.
Inclua instruções de como rodar e quais tecnologias usou.

Dicas para o Carreira 💼

Coloque o código no seu Portfolio / GitHub.
Mostre que você usa TypeScript Profissionalmente.

Além do Curso 🚀

O aprendizado nunca para!
Explore: NestJS, Next.js, GraphQL, Microservices.

Parabéns! 🎉

Você agora domina o TypeScript Profissional.

Vamos para a Apresentação? 📊

Mostre seu projeto para a turma.

Resumo 🏁

Estrutura de Build
Docker e Nuvem
Projeto Completo

Obrigado! ❤️

Continue codando e evoluindo.

Perguntas Finais? ❓

Setups

Guias de Instalação 🛠️

Prepare seu ambiente de desenvolvimento.

Ferramentas Iniciais

Comece por aqui.
Linguagens Corporativas

Para grandes sistemas.
Sistemas e Mobile

Performance e Apps.

Curso de TypeScript Profissional 🚀

🎯 O Que Você Vai Aprender

📚 Estrutura do Curso (16 Aulas)

Módulo 1: Core & Linguagem (Aulas 01-08)

Módulo 2: Aplicações & Ecossistema (Aulas 09-16)

Sobre o Curso

🎓 TypeScript Profissional: Do Core à Arquitetura

🎯 Objetivos do Curso

📚 O Que Você Vai Aprender

Módulo 1 – Core & Linguagem

Módulo 2 – Ecossistema & Arquitetura

🛠️ Metodologia

👨‍🎓 Para Quem é Este Curso

📋 Pré-requisitos

🎖️ O Que Você Receberá

🚀 Comece Agora

Aulas

Aulas do Curso 📚

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

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

O Problema da Tipagem Dinâmica 🧨

2. O que é TypeScript? 🛡️

Por que usar TypeScript?

3. Setup Profissional 🛠️

Instalação Global

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

Criando a Configuração

5. Primeiro Projeto Estruturado (Laboratório) 🧪

Visualizando o Fluxo de Trabalho (Mermaid)

Exemplo de Código no VS Code

6. Exercícios de Fixação 📝

🚀 Mini-Projeto da Aula

Aula 02 - Tipos Fundamentais e Inferência 🛠️

1. Tipos Primitivos 🧱

Exemplo de Declaração

2. Arrays e Tuplas 📊

Arrays

Tuplas

3. Enum, Any e Unknown 🎭

Enum

Any vs Unknown

4. Void e Never 🚫

5. Inferência de Tipos 🧠

6. Strict Mode: O Coração da Qualidade 🛡️

Visualizando a Hierarquia de Tipos (Mermaid)

7. Exercícios Práticos 📝

🚀 Mini-Projeto da Aula

Aula 03 – Tipos Avançados 🧩

1. Union Types (|) 🔗

2. Type Alias 🏷️

3. Intersection Types (&) 🤝

4. Literal Types 🎯

5. Narrowing e Type Guards 🛡️

Exemplo com typeof

6. Estudo de Caso: Validação de Dados de API 📡

Visualizando a Validação (Mermaid)

7. Exercícios Práticos 📝

🚀 Mini-Projeto da Aula

Aula 04 – Interfaces e Modelagem de Domínio 🏗️

1. O que são Interfaces? 📜

2. Extensão de Interfaces (Herança de Contratos) 🧬

3. Implementação em Classes 🏛️

4. Diferença entre Interface e Type Alias ⚖️

5. Modelagem de Domínio (Entidades) 🗺️

Visualizando o Domínio (Mermaid)

6. Exercícios Práticos 📝

🚀 Mini-Projeto da Aula

Aula 05 – Classes e Programação Orientada a Objetos 🏛️

1. Modificadores de Acesso 🔒

2. Parâmetros Readonly e Shorthand Syntax ⚡

3. Getters e Setters 🔄

4. Herança e Polimorfismo 🧬

5. Classes Abstratas ☁️

Visualizando a Abstração (Mermaid)

6. Exercícios Práticos 📝

🚀 Mini-Projeto da Aula

Aula 06 – Generics (Programação Genérica) 📦

1. O que são Generics? 🧬

O problema sem Generics

A solução com Generics

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

Exemplo com `typeof`