AULA 1 – Fundamentos do TypeScript

(Parte 1)
🎯 Objetivo da Aula:
Compreender os tipos primitivos e como tipar variáveis, funções e objetos em
TypeScript.

🧠 CONCEITO: O que é TypeScript?

TypeScript é um superconjunto do JavaScript que adiciona tipagem estática.
Ele ajuda a evitar erros e melhora a legibilidade e a manutenção do código.

🛠️ AMBIENTE PARA TESTES

Você pode usar:

●​ Playground oficial TypeScript​

●​ VS Code com um arquivo .ts local (instale o Node.js + TypeScript: npm install
-g typescript)​

📘 1. TIPOS PRIMITIVOS
✅ String
ts
Copiar código
let nome: string = "Darcy";

✅ Number
ts
Copiar código
let idade: number = 28;
✅ Boolean
ts
Copiar código
let ativo: boolean = true;

✅ Any (Evite sempre que possível!)

ts
Copiar código
let valor: any = "texto";
valor = 5; // válido, mas sem segurança

📘 2. ARRAYS
✅ Array de strings
ts
Copiar código
let frutas: string[] = ["maçã", "banana"];

✅ Array de números
ts
Copiar código
let notas: number[] = [10, 8, 7.5];

📘 3. OBJETOS
✅ Objeto com tipagem direta
ts
Copiar código
let usuario: { nome: string; idade: number } = {
nome: "Darcy",
idade: 28
};

✅ Usando interface
ts
Copiar código
interface Usuario {
nome: string;
idade: number;
}

let usuario2: Usuario = {

nome: "Beca",
idade: 27
};

📘 4. FUNÇÕES TIPADAS
✅ Tipagem nos parâmetros e retorno
ts
Copiar código
function saudacao(nome: string): string {
return `Olá, ${nome}`;
}

const resultado = saudacao("Darcy"); // "Olá, Darcy"

🧪 EXERCÍCIO 1
Crie um arquivo chamado aula1.ts com o seguinte conteúdo e preencha os tipos
corretos:

ts
Copiar código
// 1. Crie uma variável chamada 'produto' com tipo string
// 2. Crie uma variável chamada 'preco' com tipo number
// 3. Crie uma função chamada 'calcularDesconto' que recebe preço e
percentual e retorna o preço com desconto
// 4. Crie uma interface chamada 'Livro' com título (string), autor
(string), ano (number)
// 5. Crie um array de livros (3 livros) tipado corretamente

Se quiser, posso corrigir seu exercício ou mostrar o gabarito depois de você tentar.
📝 RESUMO DA AULA 1
●​ Tipos primitivos (string, number, boolean, any)​

●​ Arrays tipados​

●​ Objetos com interface​

●​ Funções com parâmetros e retorno tipado​

AULA 2 – Tipos Avançados (Parte 2)

🎯 Objetivo da Aula:
Aprender os tipos Tuple, Enum, Union, Intersection, Type Alias e Generics.

📘 1. TUPLAS (Tuple)
Uma tupla define a quantidade e tipo de elementos de um array de forma fixa.

ts
Copiar código
let coordenadas: [number, number] = [10.5, 20.3];

Se tentar colocar uma string no lugar de um número, ou trocar a ordem, o TS acusa erro.

📘 2. ENUMS
Enums são usados para representar valores nomeados, geralmente em categorias fixas.

ts
Copiar código
enum StatusPedido {
Pendente,
Processando,
 Concluido,
Cancelado
}

let statusAtual: StatusPedido = StatusPedido.Processando;

Você também pode definir valores personalizados:

ts
Copiar código
enum Status {
Ativo = "ativo",
Inativo = "inativo"
}

let usuarioStatus: Status = Status.Ativo;

📘 3. UNION TYPES (|)

Permite que uma variável aceite mais de um tipo.

ts
Copiar código
let resposta: string | number;

resposta = "ok";
resposta = 200;

📘 4. INTERSECTION TYPES (&)

Combina duas interfaces em uma.

ts
Copiar código
interface Pessoa {
nome: string;
}

interface Funcionario {
 cargo: string;
}

type PessoaFuncionario = Pessoa & Funcionario;

const colaborador: PessoaFuncionario = {

nome: "Darcy",
cargo: "Dev Full Stack"
};

📘 5. TYPE ALIAS (type)

Um apelido para tipos reutilizáveis, inclusive com union ou intersection.

ts
Copiar código
type ID = string | number;

let userId: ID = "abc123";

let postId: ID = 99;

Você também pode criar tipos compostos:

ts
Copiar código
type Produto = {
nome: string;
preco: number;
};

📘 6. GENERICS (<T>)
Permitem tipos dinâmicos com segurança, muito usados em funções e libs.

ts
Copiar código
function mostrarValor<T>(valor: T): T {
return valor;
}
mostrarValor<string>("Olá");
mostrarValor<number>(123);

Outro exemplo: lista genérica

ts
Copiar código
function primeiroItem<T>(lista: T[]): T {
return lista[0];
}

🧪 EXERCÍCIO 2
1.​ Crie uma tupla chamada ponto com dois números (x, y)​

2.​ Crie um enum chamado DiaSemana com valores de Segunda a Domingo​

3.​ Crie uma variável entrada que pode ser string ou number​

4.​ Crie dois types chamados Pessoa e Endereco, e combine os dois com &​

5.​ Crie uma função genérica retornaUltimo<T> que recebe um array e retorna o
último item​

📝 RESUMO DA AULA 2
●​ Tuple → Array com tipos e ordem fixa​

●​ Enum → Conjunto de valores nomeados​

●​ Union → Um tipo ou outro​

●​ Intersection → Combina tipos​

●​ Type → Apelido para tipos​

 ●​ Generics → Tipos dinâmicos, mas seguros​

AULA 3 – Primeiros passos com React +

TypeScript
🎯 Objetivo da Aula:
●​ Criar o ambiente do projeto React com TypeScript​

●​ Entender a estrutura básica​

●​ Criar o primeiro componente tipado​

📦 1. Criando o projeto React com TypeScript

Abra o terminal e execute:

bash
Copiar código
npx create-react-app meu-projeto --template typescript

Alternativa com Vite (mais leve e rápido):

bash
Copiar código
npm create vite@latest meu-projeto -- --template react-ts
cd meu-projeto
npm install
npm run dev

📁 2. Estrutura inicial do projeto

java
Copiar código
meu-projeto/
├── node_modules/
├── public/
├── src/
│ ├── App.tsx ← nosso componente principal
│ ├── main.tsx ← ponto de entrada
│ ├── vite-env.d.ts
│ └── ...
├── tsconfig.json ← configuração do TypeScript
├── package.json

⚛️ 3. Criando seu primeiro componente com

TypeScript

✅ Crie o componente BoasVindas.tsx

tsx
Copiar código
// src/components/BoasVindas.tsx
type Props = {
nome: string;
}

export function BoasVindas({ nome }: Props) {

return <h2>Olá, {nome}! Seja bem-vindo(a) ao React com
TypeScript!</h2>;
}

✅ Use o componente no App.tsx

tsx
Copiar código
import { BoasVindas } from './components/BoasVindas';

function App() {
return (
<div>
<h1>Meu Primeiro Projeto com React e TS</h1>
<BoasVindas nome="Darcy" />
</div>
 );
}

export default App;

🧠 EXPLICAÇÃO
●​ type Props define a interface das propriedades esperadas.​

●​ O React, com TypeScript, exige que você diga que tipo de dados o componente
espera.​

●​ Isso ajuda o editor a sugerir, validar e evitar bugs.​

⚙️ 4. Tipando eventos e estados

✅ Estado com useState
tsx
Copiar código
import { useState } from 'react';

const [contador, setContador] = useState<number>(0);

✅ Evento de clique
tsx
Copiar código
function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
alert("Clicado!");
}

🧪 EXERCÍCIO 3
1.​ Crie um componente Contador.tsx que tenha:​
 ○​ Um número no estado (useState)​

○​ Um botão para incrementar o número​

○​ Tipagem correta do estado e do evento​

2.​ Utilize esse componente no App.tsx​

Se quiser, posso corrigir o exercício com você depois.

📝 RESUMO DA AULA 3
●​ Criamos o projeto com React e TS​

●​ Entendemos como tipar props​

●​ Vimos como tipar useState e eventos​

●​ Começamos a montar componentes reutilizáveis​

AULA 4 – Props, useState e useEffect

com Tipagem
🎯 Objetivo da Aula:
●​ Entender a passagem de props com tipos​

●​ Usar useState com tipagem correta​

●​ Trabalhar com useEffect para efeitos colaterais​

📘 1. Relembrando Props Tipadas

Props são os dados que você envia de um componente pai para um filho.
✅ Exemplo:
// src/components/Saudacao.tsx
type SaudacaoProps = {
nome: string;
idade?: number; // idade é opcional
};

export function Saudacao({ nome, idade }: SaudacaoProps) {

return (
<div>
<h2>Olá, {nome}!</h2>
{idade && <p>Idade: {idade} anos</p>}
</div>
);
}

tsx
Copiar código
// App.tsx
import { Saudacao } from './components/Saudacao';

function App() {
return <Saudacao nome="Darcy" idade={28} />;
}

📘 2. useState Tipado
O hook useState cria um estado no componente. Com TypeScript, você define o tipo do
valor armazenado.

✅ Exemplo com número:

tsx
Copiar código
const [contador, setContador] = useState<number>(0);

✅ Exemplo com string ou nulo:

tsx
Copiar código
const [nome, setNome] = useState<string | null>(null);

✅ Exemplo com objeto:

tsx
Copiar código
type Usuario = {
nome: string;
email: string;
};

const [usuario, setUsuario] = useState<Usuario | null>(null);

📘 3. useEffect Tipado
O useEffect permite executar efeitos colaterais como buscar dados ou rodar lógica ao
montar/desmontar o componente.

✅ Exemplo simples:
tsx
Copiar código
useEffect(() => {
console.log('Componente montado!');
}, []);

✅ Exemplo com setTimeout:

const [mensagem, setMensagem] = useState<string>("Carregando...");

useEffect(() => {
setTimeout(() => {
setMensagem("Bem-vindo ao sistema!");
}, 2000);
}, []);

📘 4. Evento tipado + estado

tsx
Copiar código
function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
setNome(e.target.value);
}

🧪 EXERCÍCIO 4
1.​ Crie um componente PerfilUsuario.tsx que:​

○​ Receba nome e email via props​

○​ Mostre os dados na tela​

2.​ No componente, use useEffect para simular o carregamento com:​

○​ Mensagem inicial: "Carregando..."​

○​ Depois de 2 segundos, mostrar o nome e email recebidos​

📝 RESUMO DA AULA 4
●​ Props devem sempre ser tipadas​

●​ useState<T>() define o tipo do estado​

●​ useEffect() é executado com base em mudanças de estado ou props​

●​ Eventos (onChange, onClick etc.) devem ser tipados​

AULA 5 – Listas, Eventos e

Comunicação entre Componentes
🎯 Objetivos da Aula:
 ●​ Renderizar listas com tipagem​

●​ Manipular eventos em elementos da lista​

●​ Enviar funções como props para componentes filhos​

📦 1. Trabalhando com listas tipadas

Você geralmente vai iterar sobre arrays com .map().

✅ Exemplo com lista de tarefas:

tsx
Copiar código
type Tarefa = {
id: number;
titulo: string;
};

const tarefas: Tarefa[] = [

{ id: 1, titulo: 'Estudar React' },
{ id: 2, titulo: 'Fazer exercícios' },
{ id: 3, titulo: 'Descansar' },
];

✅ Renderizando a lista:
tsx
Copiar código
return (
<ul>
{tarefas.map((tarefa) => (
<li key={tarefa.id}>{tarefa.titulo}</li>
))}
</ul>
);

📦 2. Lidando com eventos da lista

Você pode criar botões para interagir com cada item.

✅ Exemplo com botão de remover:

tsx
Copiar código
function removerTarefa(id: number) {
console.log(`Removendo tarefa com id ${id}`);
}

return (
<ul>
{tarefas.map((tarefa) => (
<li key={tarefa.id}>
{tarefa.titulo}
<button onClick={() =>
removerTarefa(tarefa.id)}>Remover</button>
</li>
))}
</ul>
);

📦 3. Comunicação entre componentes (Callback como

prop)
Você pode passar funções do pai para o filho como props. Isso permite que o filho acione
ações no pai.

✅ Exemplo:
Componente Pai (App.tsx):

tsx
Copiar código
import { ListaTarefas } from './components/ListaTarefas';

function App() {
function aoRemover(id: number) {
alert(`Remover tarefa com ID: ${id}`);
}

return <ListaTarefas aoRemover={aoRemover} />;

}

Componente Filho (ListaTarefas.tsx):

tsx
Copiar código
type Tarefa = {
id: number;
titulo: string;
};

type Props = {
aoRemover: (id: number) => void;
};

export function ListaTarefas({ aoRemover }: Props) {

const tarefas: Tarefa[] = [
{ id: 1, titulo: 'Estudar React' },
{ id: 2, titulo: 'Praticar TypeScript' },
];

return (
<ul>
{tarefas.map((tarefa) => (
<li key={tarefa.id}>
{tarefa.titulo}
<button onClick={() =>
aoRemover(tarefa.id)}>Remover</button>
</li>
))}
</ul>
);
}

🧪 EXERCÍCIO 5
Crie um componente chamado ListaDeProdutos.tsx que:

Receba uma lista de produtos via prop:​

​
ts​
Copiar código​
type Produto = {
id: number;
nome: string;
preco: number;
}

1.​
2.​ Para cada produto, exiba nome e preço formatado (ex: R$ 10,00)​

3.​ Ao clicar em "Comprar", dispare uma função passada por prop: aoComprar(id:
number)​

📝 RESUMO DA AULA 5
●​ Tipamos listas com Array<T> ou T[]​

●​ key é obrigatório no .map() para performance​

●​ Eventos são tipados com base no elemento (React.MouseEvent)​

●​ Podemos passar funções como props para permitir comunicação do filho para o pai​

AULA 6 – Formulários e Controle de

Inputs
🎯 Objetivo:
●​ Criar formulários controlados​

●​ Trabalhar com inputs em React + TypeScript​

●​ Tipar eventos e dados de formulários​

🧩 1. O que é um formulário controlado?
Formulários controlados são aqueles em que o valor do input vem do estado (useState). O
React mantém o valor e reage a qualquer mudança.

🧪 2. Exemplo simples com useState

tsx
Copiar código
import { useState } from 'react';

export function Formulario() {

const [nome, setNome] = useState<string>('');

function handleSubmit(e: React.FormEvent<HTMLFormElement>) {

e.preventDefault();
alert(`Nome enviado: ${nome}`);
}

return (
<form onSubmit={handleSubmit}>
<label>
Nome:
<input
type="text"
value={nome}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setNome(e.target.value)
}
/>
</label>
<button type="submit">Enviar</button>
</form>
);
}

📘 3. Múltiplos campos no formulário

tsx
Copiar código
type FormularioDados = {
nome: string;
email: string;
};

const [dados, setDados] = useState<FormularioDados>({

nome: '',
email: '',
});

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {

const { name, value } = e.target;
setDados((prev) => ({ ...prev, [name]: value }));
}

return (
<form onSubmit={...}>
<input name="nome" value={dados.nome} onChange={handleChange} />
<input name="email" value={dados.email} onChange={handleChange}
/>
</form>
);

📋 4. Select, Checkbox e outros tipos

✅ Select
tsx
Copiar código
<select
value={opcao}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
setOpcao(e.target.value)}
>
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
</select>

✅ Checkbox
tsx
Copiar código
<input
type="checkbox"
checked={aceito}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setAceito(e.target.checked)}
/>

⚠️ 5. Eventos Tipados no React

●​ onChange: React.ChangeEvent<HTMLInputElement>​

●​ onSubmit: React.FormEvent<HTMLFormElement>​

●​ onClick: React.MouseEvent<HTMLButtonElement>​

🧪 EXERCÍCIO 6
Crie um componente chamado CadastroProduto.tsx que:

1.​ Tenha os campos:​

○​ Nome do produto (string)​

○​ Preço (number)​

○​ Disponível? (checkbox)​

2.​ Ao submeter o formulário, exiba os dados no console (ou alert)​

3.​ Use tipagem correta para todos os estados e eventos​

📝 RESUMO DA AULA 6
 ●​ Inputs controlados com useState garantem controle total do formulário​

●​ Eventos em React com TypeScript precisam de tipos específicos​

●​ Checkbox, Select e outros inputs também precisam de atenção especial​

AULA 7 – Estilização com CSS Modules

em React + TypeScript
🎯 Objetivo:
●​ Aprender a usar CSS Modules para estilizar componentes React​

●​ Garantir que os estilos sejam isolados por componente​

●​ Integrar o CSS Modules com TypeScript​

🧩 1. O que são CSS Modules?

CSS Modules permitem escrever CSS local para cada componente, evitando conflitos de
nomes de classes.

O arquivo termina com .module.css.

🧪 2. Criando um CSS Module

1. Crie um arquivo chamado:

📄 Botao.module.css
css
Copiar código
.botao {
background-color: #007bff;
color: white;
padding: 10px 20px;
 border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
}

.botao:hover {
background-color: #0056b3;
}

🧪 3. Usando no componente com TypeScript

📄 Botao.tsx
tsx
Copiar código
import styles from './Botao.module.css';

type Props = {
texto: string;
onClick: () => void;
};

export function Botao({ texto, onClick }: Props) {

return (
<button className={styles.botao} onClick={onClick}>
{texto}
</button>
);
}

🔒 O className={styles.botao} garante que o nome seja único.

✅ 4. Vantagens do CSS Module

●​ Escopo local: sem conflito de nomes​
 ●​ Ótimo para grandes projetos​

●​ Facilidade de manutenção​

⚠️ 5. Cuidados com TypeScript

Se o VS Code não reconhecer styles.botao, pode ser necessário declarar os tipos de
módulos CSS:

📄 Criar arquivo global.d.ts (caso necessário):

ts
Copiar código
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}

🧪 EXERCÍCIO 7
Crie um componente CardProduto.tsx que:

1.​ Recebe props:​

○​ nome (string)​

○​ preco (number)​

2.​ Estilize com CardProduto.module.css:​

○​ Fundo claro​

○​ Borda arredondada​

○​ Nome grande​

○​ Preço em destaque​

3.​ Use className={styles.algumaCoisa} corretamente com TypeScript​

📝 RESUMO DA AULA 7
●​ CSS Modules encapsulam estilos por componente​

●​ Tipagem funciona naturalmente com TypeScript​

●​ Criar arquivos .module.css e importar com import styles from​

AULA 8 – children, Composição e

Componentes Reutilizáveis
🎯 Objetivo:
●​ Entender o conceito de composição de componentes​

●​ Usar props.children para criar componentes flexíveis​

●​ Aprender a tipar children com TypeScript​

📦 1. O que é composição em React?

React incentiva a composição: construir componentes maiores a partir de menores.

Exemplo:​
Um <Card> pode envolver qualquer conteúdo.

🔤 2. Usando children
Exemplo 1 – Componente Container
tsx
Copiar código
type Props = {
children: React.ReactNode;
};

export function Container({ children }: Props) {

return (
<div style={{ padding: '20px', border: '1px solid gray' }}>
{children}
</div>
);
}

Usando no App:
tsx
Copiar código
<Container>
<h2>Título</h2>
<p>Esse conteúdo está dentro do Container!</p>
</Container>

🔁 3. Reutilização com flexibilidade

Imagine que temos um componente Alerta:

tsx
Copiar código
type Props = {
tipo: 'sucesso' | 'erro';
children: React.ReactNode;
};

export function Alerta({ tipo, children }: Props) {

const cor = tipo === 'sucesso' ? 'green' : 'red';

return (
<div style={{ color: 'white', backgroundColor: cor, padding:
'10px' }}>
{children}
</div>
);
}
Uso:
tsx
Copiar código
<Alerta tipo="sucesso">
Produto cadastrado com sucesso!
</Alerta>

✅ 4. Quando usar children?

Use children quando quiser que o conteúdo seja definido fora do componente, como:

●​ Layouts​

●​ Modais​

●​ Cards​

●​ Containers​

●​ Alertas​

●​ Botões com ícone + texto​

🧪 EXERCÍCIO 8
Crie o componente Card.tsx:

1.​ Deve ter:​

○​ Borda​

○​ Padding​

○​ Título (via prop)​

○​ Conteúdo flexível (via children)​

 2.​ Exemplo de uso:​

tsx
Copiar código
<Card titulo="Informações do Produto">
<p>Nome: Camisa Polo</p>
<p>Preço: R$ 59,90</p>
</Card>

3.​ Estilize com Card.module.css​

📝 RESUMO DA AULA 8
●​ children permite componentes com conteúdo interno personalizado​

●​ Tipamos com React.ReactNode​

●​ Ideal para layouts e composição reutilizável

AULA 9 – React Router DOM +

TypeScript
🎯 Objetivo:
●​ Instalar e configurar o React Router DOM​

●​ Criar rotas com navegação​

●​ Tipar parâmetros de rota com TypeScript​

🧩 1. O que é o React Router DOM?

É a biblioteca mais usada para criar navegação entre páginas em projetos React (SPA –
Single Page Application).

⚙️ 2. Instalação
Execute:

bash
Copiar código
npm install react-router-dom

Para projetos TypeScript, também instale os tipos:

bash
Copiar código
npm install --save-dev @types/react-router-dom

🧪 3. Configuração básica
📄 App.tsx
tsx
Copiar código
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Sobre from './pages/Sobre';

export function App() {

return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/sobre" element={<Sobre />} />
</Routes>
</BrowserRouter>
);
}
🧭 4. Criando os componentes das páginas
📄 pages/Home.tsx
tsx
Copiar código
export default function Home() {
return <h1>Página Inicial</h1>;
}

📄 pages/Sobre.tsx
tsx
Copiar código
export default function Sobre() {
return <h1>Sobre Nós</h1>;
}

🔗 5. Navegação com <Link>

tsx
Copiar código
import { Link } from 'react-router-dom';

export function Navbar() {

return (
<nav>
<Link to="/">Início</Link> | <Link to="/sobre">Sobre</Link>
</nav>
);
}

🔄 6. Parâmetros de Rota
Exemplo: /produto/123

📄 Rota:
tsx
Copiar código
<Route path="/produto/:id" element={<Produto />} />

📄 Componente:
tsx
Copiar código
import { useParams } from 'react-router-dom';

export default function Produto() {

const { id } = useParams<{ id: string }>();

return <h2>Produto ID: {id}</h2>;

}

🧪 EXERCÍCIO 9
1.​ Crie as páginas:​

○​ Home​

○​ Contato​

○​ Produto (rota com /produto/:id)​

2.​ Crie um menu de navegação com <Link>​

3.​ Ao clicar em um produto da lista (ex: Produto 1), redirecione para /produto/1​

📝 RESUMO DA AULA 9
●​ react-router-dom gerencia rotas em SPAs​

●​ Usa <Routes> e <Route> para declarar as rotas​

●​ <Link> cria navegação sem recarregar a página​

●​ Parâmetros são acessados com useParams​

AULA 10 – Consumindo APIs com Axios
+ TypeScript
🎯 Objetivo:
●​ Instalar e configurar o Axios​

●​ Fazer requisições GET, POST, etc.​

●​ Tipar os dados que vêm da API​

●​ Tratar erros​

⚙️ 1. Instalação
bash
Copiar código
npm install axios

🧩 2. Criando uma API falsa para testes

(JSONPlaceholder)
Vamos usar a API pública de teste:

●​ https://jsonplaceholder.typicode.com/posts​

🧪 3. Fazendo uma requisição GET

📄 Criando o tipo da resposta:
ts
Copiar código
type Post = {
id: number;
title: string;
 body: string;
};

📄 Componente com useEffect:

tsx
Copiar código
import { useEffect, useState } from 'react';
import axios from 'axios';

export function ListaDePosts() {

const [posts, setPosts] = useState<Post[]>([]);
const [carregando, setCarregando] = useState(true);

useEffect(() => {
axios
.get<Post[]>('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
setPosts(res.data);
setCarregando(false);
})
.catch((err) => {
console.error('Erro ao buscar posts:', err);
setCarregando(false);
});
}, []);

if (carregando) return <p>Carregando posts...</p>;

return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<strong>{post.title}</strong>
<p>{post.body}</p>
</li>
))}
</ul>
);
}
📥 4. Enviando dados com POST
Exemplo:
tsx
Copiar código
function criarPost() {
axios
.post('https://jsonplaceholder.typicode.com/posts', {
title: 'Novo Post',
body: 'Conteúdo do post',
userId: 1,
})
.then((res) => {
console.log('Post criado:', res.data);
})
.catch((err) => {
console.error('Erro ao criar post:', err);
});
}

✅ 5. Boas práticas com Axios

●​ Criar uma instância:​

tsx
Copiar código
const api = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
});

●​ Usar em outros arquivos:​

tsx
Copiar código
api.get<Post[]>('/posts');
api.post('/posts', { title: '...', body: '...' });
🧪 EXERCÍCIO 10
1.​ Crie um componente chamado ListaDeUsuarios.tsx​

2.​ Busque dados da rota https://jsonplaceholder.typicode.com/users​

3.​ Tipagem:​

ts
Copiar código
type Usuario = {
id: number;
name: string;
email: string;
};

4.​ Mostre os nomes e e-mails dos usuários​

📝 RESUMO DA AULA 10
●​ axios facilita o consumo de APIs​

●​ Tipamos as respostas com <T> no .get<T>()​

●​ Usamos useEffect para chamadas automáticas​

●​ Tratamos erros com .catch()

AULA 11 – Context API + TypeScript

🎯 Objetivo:
●​ Entender o que é a Context API​

●​ Criar um contexto global com TypeScript​

 ●​ Compartilhar dados entre componentes sem "props drilling"​

🧠 1. O que é Context API?

É uma ferramenta do React para compartilhar dados globalmente entre componentes,
sem precisar passar props manualmente por todos os níveis da árvore de componentes.

🧩 2. Exemplo prático – Autenticação de Usuário

Vamos simular um contexto de usuário logado.

📄 3. Criando o Contexto
1. Tipagem:
ts
Copiar código
type Usuario = {
nome: string;
email: string;
};

type UsuarioContextType = {
usuario: Usuario | null;
login: (usuario: Usuario) => void;
logout: () => void;
};

2. Criando o contexto:

import { createContext, useState, ReactNode, useContext } from

'react';

const UsuarioContext = createContext<UsuarioContextType |

undefined>(undefined);
export function UsuarioProvider({ children }: { children: ReactNode
}) {
const [usuario, setUsuario] = useState<Usuario | null>(null);

function login(user: Usuario) {

setUsuario(user);
}

function logout() {
setUsuario(null);
}

return (
<UsuarioContext.Provider value={{ usuario, login, logout }}>
{children}
</UsuarioContext.Provider>
);
}

3. Criando o hook personalizado:

export function useUsuario() {

const context = useContext(UsuarioContext);
if (!context) {
throw new Error('useUsuario deve ser usado dentro de
UsuarioProvider');
}
return context;
}

📦 4. Usando no App
Envolvendo tudo com o Provider:

import { UsuarioProvider } from './contexts/UsuarioContext';

export function App() {

 return (
<UsuarioProvider>
<MinhaPagina />
</UsuarioProvider>
);
}

🧪 5. Usando o contexto em qualquer lugar

tsx
Copiar código
import { useUsuario } from '../contexts/UsuarioContext';

export function Header() {

const { usuario, logout } = useUsuario();

return (
<header>
{usuario ? (
<>
<p>Bem-vindo, {usuario.nome}</p>
<button onClick={logout}>Sair</button>
</>
) : (
<p>Usuário não logado</p>
)}
</header>
);
}

🧪 EXERCÍCIO 11
1.​ Crie um contexto chamado TemaContext​

2.​ Ele deve armazenar:​

○​ Um estado: tema: 'claro' | 'escuro'​

 ○​ Uma função alternarTema()​

3.​ Use o TemaContext para:​

○​ Mostrar o tema atual em um componente​

○​ Ter um botão que alterna o tema​

📝 RESUMO DA AULA 11
●​ Context API permite estado global entre componentes​

●​ Tipamos o contexto com createContext<Type | undefined>​

●​ Hooks personalizados ajudam a reutilizar lógica de forma limpa

AULA 12 – Custom Hooks com

TypeScript
🎯 Objetivo:
●​ Entender o que são hooks personalizados (custom hooks)​

●​ Criar hooks reutilizáveis e organizados​

●​ Tipar corretamente parâmetros e retornos com TypeScript​

🧠 1. O que é um Custom Hook?

Um custom hook é uma função que começa com use e reutiliza lógica de hooks React
(como useState, useEffect, etc.).

Ele facilita a organização e reaproveitamento de código.

📦 2. Exemplo prático – Hook de contador
📄 useContador.ts
import { useState } from 'react';

export function useContador(valorInicial: number = 0) {

const [contador, setContador] = useState<number>(valorInicial);

function incrementar() {
setContador((prev) => prev + 1);
}

function decrementar() {
setContador((prev) => prev - 1);
}

function resetar() {
setContador(valorInicial);
}

return { contador, incrementar, decrementar, resetar };

}

🧪 3. Usando o custom hook

📄 Contador.tsx
import { useContador } from '../hooks/useContador';

export function Contador() {

const { contador, incrementar, decrementar, resetar } =
useContador(10);

return (
<div>
<h2>Contador: {contador}</h2>
<button onClick={incrementar}>+</button>
<button onClick={decrementar}>-</button>
 <button onClick={resetar}>Resetar</button>
</div>
);
}

✅ 4. Regras dos Hooks personalizados

●​ O nome deve começar com use​

●​ Pode usar outros hooks (ex: useState, useEffect)​

●​ Não pode ser chamado fora de componentes ou outros hooks​

🧪 EXERCÍCIO 12
Crie um hook chamado useTempoAtual:

1.​ Ele deve:​

○​ Retornar a hora atual (new Date().toLocaleTimeString())​

○​ Atualizar o tempo a cada segundo​

2.​ Use setInterval dentro de useEffect​

3.​ Use em um componente Relogio.tsx com:

<h2>Hora atual: {tempo}</h2>

📝 RESUMO DA AULA 12
●​ Custom hooks encapsulam lógica reutilizável​

●​ Tipamos parâmetros e retorno normalmente​

●​ Ideal para organizar código e manter componentes limpos​

AULA 13 – Formulários com React +
TypeScript
🎯 Objetivo:
●​ Criar formulários controlados com useState​

●​ Tipar corretamente os dados do formulário​

●​ Fazer uma validação básica antes do envio​

🧠 1. Conceito: Formulário controlado

No React, formulário controlado é quando o valor de um input é armazenado no estado
(useState).

🧾 2. Estrutura básica com TypeScript

Exemplo: formulário de cadastro de usuário

import { useState } from 'react';

type FormularioUsuario = {
nome: string;
email: string;
};

export function FormularioCadastro() {

const [form, setForm] = useState<FormularioUsuario>({
nome: '',
email: '',
});

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {

const { name, value } = e.target;
 setForm((prev) => ({
...prev,
[name]: value,
}));
}

function handleSubmit(e: React.FormEvent) {

e.preventDefault();

if (form.nome.trim() === '' || form.email.trim() === '') {

alert('Preencha todos os campos!');
return;
}

console.log('Dados enviados:', form);

alert(`Usuário cadastrado com sucesso!`);
}

return (
<form onSubmit={handleSubmit}>
<div>
<label>Nome:</label>
<input type="text" name="nome" value={form.nome}
onChange={handleChange} />
</div>

<div>
<label>Email:</label>
<input type="email" name="email" value={form.email}
onChange={handleChange} />
</div>

<button type="submit">Cadastrar</button>
</form>
);
}

✅ 3. Pontos importantes
 ●​ Tipamos o objeto do formulário com type FormularioUsuario​

●​ Usamos e: React.ChangeEvent<HTMLInputElement> para o onChange​

●​ Usamos e: React.FormEvent no onSubmit​

🧪 EXERCÍCIO 13
1.​ Crie um componente chamado FormularioProduto​

2.​ O formulário deve conter:​

○​ Nome do produto​

○​ Preço (number)​

○​ Quantidade (number)​

3.​ Mostre os dados no console ao enviar​

4.​ Valide:​

○​ Nome obrigatório​

○​ Preço e quantidade devem ser > 0​

📝 RESUMO DA AULA 13
●​ Formulários controlados usam useState​

●​ Tipamos os campos com objetos específicos​

●​ Validação básica pode ser feita antes do envio​

●​ TypeScript ajuda a evitar erros comuns​

👨‍🏫 Próxima aula:
Aula 14 – Estilização com CSS Modules + Condicionais com classe

Deseja fazer o exercício do FormularioProduto agora ou seguimos direto para a Aula

14?

Ferramentas
O ChatGPT pode cometer erros. Considere verificar inform