Conteúdo do Workshop
Vamos começar? Antes de mais nada, um overview do que iremos tratar no Workshop de hoje. Vamos em todo o workshop - salvo em casos específicos - utilizar uma única aplicação que é um gerador de frases motivacionais. Eu sei, o exemplo é bobo 🙄, mas vai ser legal para entendermos os principais conceitos.
O que vamos aprender hoje?
Os principais tópicos que iremos ver são
01. Instalação do TS em um repositório JS
- o temido
tsconfig.json - principais props do
tsconfig - o que é
npx tsc?
02. Tipando props e children
- Algumas alternativas para tipar props
- Interfaces vs Types vs Inline. Qual escolher?
- Tipando
children
03. Tipando eventos e event handlers
- Eventos e tipos prontos do React
- Event Handlers e tipos prontos do React
04. Criando componentes flexíveis
- Vamos ver as melhores técnicas para implementar componentes flexíveis assim como as melhores bibliotecas de UI - como por exemplo a shadcn/ui
- TS ajudando a criarmos componentes flexíveis
05. Criando componentes flexíveis ii - TailwindCSS
- Se você usa TailwindCSS, essa parte é para você. Se você não usa, comece a usar (brincadeira!)
06. Tipando Hooks
- Aqui vamos ver os principais hooks. Spoiler - nada de outro mundo
- Provavelmente se você ainda não captou, aqui irá captar o conceito de generics no typescript
07. Context
Por fim, vamos adicionar contexto na nossa aplicação e ver como podemos tipá-lo.