Guia de 21 dias
JavaScript com cinto de segurança: o erro aparece enquanto você digita, e não na tela do usuário.
Para quem já sabe o básico de JavaScript. Um dia por vez, na ordem. Cada dia tem uma tarefa e um vídeo.
Constância vence intensidade. Se perder um dia, continue de onde parou. Não tente compensar fazendo dois.
Semana 1 · dias 1 a 7
Instalar e rodar o tsc, tipos básicos, inferência, arrays e tuplas, funções tipadas, union e type vs interface.
Tipo é contrato: diz o que entra e o que sai.
Instale o TypeScript, crie um arquivo index.ts com um console.log e compile com tsc. Abra o .js gerado e compare com o que você escreveu.
Curso de Typescript - Aula 2: Instalando o Typescript e compilando via TSC (Daniel Bergholz)
Assistir ↗
Declare variáveis com string, number, boolean, null e undefined. Atribua um valor do tipo errado em cada uma e leia a mensagem do compilador.
Curso de Typescript - Aula 3: Tipos básicos e inferência de tipos (Daniel Bergholz)
Assistir ↗
Reescreva o código de ontem sem anotar nenhum tipo. Passe o mouse em cada variável no editor e anote onde o TypeScript acertou sozinho.
Curso de Typescript Completo #P04 Entendendo como funciona Type Inference em Typescript (CFBCursos)
Assistir ↗
Crie uma lista de nomes como string[] e uma tupla [string, number] para nome e idade. Tente colocar um terceiro item na tupla e veja o erro.
Curso de Typescript - Aula 4: Arrays e tuplas (Daniel Bergholz)
Assistir ↗
Escreva três funções com parâmetros e retorno tipados: somar, formatar preço e verificar maioridade. Chame cada uma com um argumento errado de propósito.
Curso de Typescript - Aula 6: Funções (Daniel Bergholz)
Assistir ↗
Crie uma função que recebe string | number e devolve o valor formatado. Tente usar um método de string direto no parâmetro e leia o erro.
Curso de Typescript - Aula 7: Union e Type Alias (Daniel Bergholz)
Assistir ↗
Modele um usuário uma vez com type e outra com interface. Estenda os dois para criar um admin e escreva em um comentário qual você prefere e por quê.
TypeScript - Interfaces vs Types, as principais diferenças (Mateus Durães)
Assistir ↗
Semana 2 · dias 8 a 14
Opcionais, narrowing, literal types, generics e utility types (Partial, Pick, Omit).
Aqui o editor vira teu par de programação.
Crie um tipo Produto com descricao opcional. Escreva uma função que imprime a descrição e resolva o erro de possível undefined sem usar any.
Curso de Typescript - Aula 10: Propriedades opcionais (Daniel Bergholz)
Assistir ↗
Escreva uma função que recebe string | number | string[] e trata cada caso com typeof e Array.isArray. Veja o tipo mudar dentro de cada if.
15 - Narrowing (Refinamento de tipos) - Curso completo de Typescript em NodeJs (Rincko Dev)
Assistir ↗
Crie um tipo Status = "pendente" | "pago" | "cancelado" e uma função que recebe esse status. Passe "pagou" de propósito e leia o erro.
Enums e Literal Types no TypeScript - Aula 12 - Curso de TypeScript 💙 (Dev Victor Navarro)
Assistir ↗
Escreva uma função primeiro<T> que devolve o primeiro item de um array. Teste com array de números e de strings e veja o tipo de retorno mudar.
Curso de Typescript - Aula 11: Generics (Daniel Bergholz)
Assistir ↗
Crie uma função generic com T extends { id: number } que busca um item por id em uma lista. Passe um objeto sem id e leia o erro.
TypeScript Generics: O Guia Essencial (Dev Junior Alves)
Assistir ↗
A partir de um tipo Usuario, crie UsuarioUpdate com Partial, UsuarioPublico com Omit removendo a senha e UsuarioResumo com Pick. Use cada um em uma função.
Interfaces no TypeScript - PARTIAL, PICK e OMIT (Tutorial) (Coffstack)
Assistir ↗
Modele um resultado de pagamento com union discriminada usando literal types. Escreva um switch que trata cada caso e confira o que acontece quando falta um.
TypeScript Essencial: Domine o padrão Discriminated Union em TS (Otávio Miranda)
Assistir ↗
Semana 3 · dias 15 a 21
tsconfig strict, tipar resposta de API, TS no Node e no React e um projeto final migrando um projeto JS.
Migrar um projeto real ensina mais que 10 tutoriais.
Rode tsc --init, ligue strict: true e compile os exercícios das semanas anteriores. Corrija cada erro novo sem desligar nenhuma opção.
04. Criando e configurando TSconfig - Mini-curso de TypeScript (Willian Justen)
Assistir ↗
Faça um fetch para uma API pública, trate o retorno como unknown e valide com um schema do Zod. Use o tipo inferido do schema no resto do código.
Introdução ao Zod, lib de validação TS (alternativa ao Yup, joi, io-ts, runtypes) (Pablo Dinella)
Assistir ↗
Monte um projeto Node com TypeScript do zero, com tsconfig e script de dev. Escreva um script que lê um arquivo JSON e imprime os dados tipados.
Configurando Node.js v20 com TypeScript (Rocketseat)
Assistir ↗
Crie uma rota POST que valida o corpo da requisição com Zod e devolve 400 quando os dados vêm errados. Mande um corpo inválido e confira a resposta.
Criando validações com Zod em uma requisição HTTP (Rocketseat)
Assistir ↗
Crie um app React com o template TypeScript e um componente Card com props tipadas. Esqueça uma prop obrigatória de propósito e leia o erro.
TypeScript no React JS: segurança de tipos para suas props (Roger Melo | JavaScript)
Assistir ↗
Monte uma lista de tarefas com useState tipado, adicionando e removendo itens. Tipe o evento do input sem usar any.
TypeScript no React JS: hook useState e como escrever menos ao tipar um componente (Roger Melo | JavaScript)
Assistir ↗
Pegue um projeto JS pequeno seu, adicione tsconfig com strict ligado e renomeie um arquivo por vez para .ts. Corrija os erros até o tsc passar sem nenhum any.
Como migrar um projeto JavaScript para TypeScript - Parte 1 - fetch, objeto dinâmico e tsconfig.json (Roger Melo | JavaScript)
Assistir ↗
Projeto final
Escolha um projeto JavaScript pequeno que você já fez, como uma lista de tarefas ou um consumidor de API, e migre tudo para TypeScript com strict ligado. Tipe as funções, os dados que vêm da API e as props, se for React. O projeto termina quando o tsc passa sem erros e sem nenhum any no código.
Coloca um README dizendo o que o projeto faz e como rodar. É a primeira coisa que o recrutador abre.
Próximos guias
Mais conteúdo sobre carreira dev no Instagram: @lucasadvice ↗
