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 🎣
const [user, setUser] = useState<Usuario | null>(null);
Hooks: useRef 🔍
- Manipulando o DOM com segurança.
const inputRef = useRef<HTMLInputElement>(null);
- Tipos específicos:
ChangeEvent, FormEvent.
Context API Tipada 🌍
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
Vamos conectar tudo. 🚀
Perguntas? ❓