Slide 1
Slide 1 text
Tipos Genéricos em TypeScript
Boas práticas para escrever tipos fortes em seu código
25 de Agosto de 2021
Slide 2
Slide 2 text
Introdução pessoal
- Lucas Viana (a.k.a. Baú)
- Caiçara
- Desenvolvedor de Software na Trybe
- Redes sociais: @mechamobau
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
>01. Definição
O que são Tipos Genéricos?
>03. Exemplos
Exemplos de aplicação em TypeScript;
Agenda
>02. Sintaxe
Como e quando utilizá-los?
>04. Boas práticas
Equilibrando flexibilidade e rigidez em seus
tipos.
Slide 5
Slide 5 text
01. Definição
O que são Tipos Genéricos?
Slide 6
Slide 6 text
Definição
O que são Tipos?
O TypeScript é um superset do JavaScript.
No TypeScript, uma das formas mais
conhecidas para se declarar tipos é através
de type alias, onde utilizamos a
palavra-chave type seguida do nome de
nosso tipo.
Slide 7
Slide 7 text
Definição
O que são Tipos?
O TypeScript é um superset do JavaScript.
No TypeScript, uma das formas mais
conhecidas para se declarar tipos é através
de type alias, onde utilizamos a
palavra-chave type seguida do nome de
nosso tipo.
Slide 8
Slide 8 text
Definição
O que são Tipos?
Tipos primitivos Tipos estruturados
Slide 9
Slide 9 text
Definição
O que são Tipos?
Tipos Genéricos são tipos
parametrizáveis, tornando as entidades
declaradas flexíveis a novos tipos sem
alterar seu funcionamento.
Exemplos de uso de Tipos Genéricos são em
Requests a APIs, manipulação de estado e
etc.
Slide 10
Slide 10 text
Exemplo de
aplicação: Filas
Slide 11
Slide 11 text
Exemplo de aplicação: Filas
Em uma fila o primeiro item que entrou
nesse conjunto também será o primeiro a
sair (FIFO).
Com isto o início da fila fica onde está a
última pessoa a sair.
Slide 12
Slide 12 text
Exemplo de aplicação: Filas
Slide 13
Slide 13 text
Exemplo de aplicação: Filas
Slide 14
Slide 14 text
Exemplo de aplicação: Filas
Slide 15
Slide 15 text
Exemplo de aplicação: Filas
Slide 16
Slide 16 text
Exemplo de aplicação: Filas
Slide 17
Slide 17 text
02. Sintaxe
Como e quando utilizá-los?
Slide 18
Slide 18 text
Sintaxe
Como utilizá-los?
Os Tipos Genéricos são declarados em
volta de setas ("<>"), onde recebem suas
declarações de nome podendo ser utilizadas
dentro de sua estrutura.
Slide 19
Slide 19 text
Sintaxe
Como utilizá-los?
Slide 20
Slide 20 text
Sintaxe
Como utilizá-los?
Slide 21
Slide 21 text
Sintaxe
Como utilizá-los?
Slide 22
Slide 22 text
Sintaxe
Como utilizá-los?
Slide 23
Slide 23 text
Sintaxe
Como utilizá-los?
Slide 24
Slide 24 text
Sintaxe
Como utilizá-los?
Slide 25
Slide 25 text
Sintaxe
Como utilizá-los?
Slide 26
Slide 26 text
Sintaxe
Como utilizá-los?
Slide 27
Slide 27 text
Recapitulando...
Slide 28
Slide 28 text
Recapitulando...
1. Vimos como utilizar os Tipos Genéricos
em nosso código.
2. Vimos o porquê de utilizar os Tipos
Genéricos em nossas estruturas
Slide 29
Slide 29 text
Recapitulando...
Slide 30
Slide 30 text
Constraints e
Default Types
Slide 31
Slide 31 text
Constraints e Default Types
Slide 32
Slide 32 text
Constraints e Default Types
Slide 33
Slide 33 text
"Você poderia
simplesmente ter
declarado
Array,
certo?"
Slide 34
Slide 34 text
Constraints e Default Types
Slide 35
Slide 35 text
Constraints e Default Types
Slide 36
Slide 36 text
03. Exemplos
Slide 37
Slide 37 text
Utility Types
Slide 38
Slide 38 text
Utility Types
Slide 39
Slide 39 text
Utility Types
Required
Slide 40
Slide 40 text
Utility Types
Required
Slide 41
Slide 41 text
Utility Types
Readonly
Slide 42
Slide 42 text
Utility Types
Readonly
Slide 43
Slide 43 text
Utility Types
Pick
Slide 44
Slide 44 text
Utility Types
Pick
Slide 45
Slide 45 text
Utility Types
Record
Slide 46
Slide 46 text
Utility Types
Record
Slide 47
Slide 47 text
Utility Types
Record
Slide 48
Slide 48 text
Tipos Genéricos
“intrínsecos”
Slide 49
Slide 49 text
Tipos Genéricos Intrínsecos
A partir da versão 4.1, os Tipos Genéricos
"Intrísecos" possibilitam a manipulação de
strings em nossos tipos através dos Tipos
Genéricos:
● Uppercase
● Lowercase
● Capitalize
● Uncapitalize
Slide 50
Slide 50 text
Tipos Genéricos Intrínsecos
Slide 51
Slide 51 text
Tipos Genéricos Intrínsecos
Slide 52
Slide 52 text
Tipos Genéricos Intrínsecos
Slide 53
Slide 53 text
Tipos Genéricos Intrínsecos
Slide 54
Slide 54 text
Bibliotecas
externas
Slide 55
Slide 55 text
Bibliotecas externas
Slide 56
Slide 56 text
Bibliotecas externas
Reverse
Slide 57
Slide 57 text
Bibliotecas externas
Reverse
Slide 58
Slide 58 text
Bibliotecas externas
Update
Slide 59
Slide 59 text
Bibliotecas externas
Lista de bibliotecas interessantes:
● sindresorhus/type-fest
● type-challenges/type-challenges
● krzkaczor/ts-essentials
● piotrwitek/utility-types
● unional/type-plus
● remeda/remeda
Slide 60
Slide 60 text
Exemplos
TypeScript é Turing Complete
Slide 61
Slide 61 text
04. Boas práticas
Equilibrando flexibilidade e rigidez em seus tipos
Slide 62
Slide 62 text
Nomenclatura
Slide 63
Slide 63 text
Boas práticas
Nomenclatura
Slide 64
Slide 64 text
Boas práticas
Nomenclatura
● E = Elementos.
● K = Chaves.
● N = Números.
● T - Tipos
● V - Valores.
● S - Estado.
Slide 65
Slide 65 text
Constraints
Slide 66
Slide 66 text
Boas práticas
Constraints
Slide 67
Slide 67 text
T extends object
Slide 68
Slide 68 text
Boas práticas
T extends object
Slide 69
Slide 69 text
Boas práticas
T extends object
Slide 70
Slide 70 text
Boas práticas
T extends object
Slide 71
Slide 71 text
Boas práticas
T extends object
Slide 72
Slide 72 text
T extends {}
Slide 73
Slide 73 text
Boas práticas
T extends {}
Slide 74
Slide 74 text
Boas práticas
T extends {}
Slide 75
Slide 75 text
Boas práticas
T extends {}
Slide 76
Slide 76 text
Boas práticas
T extends {}
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
betrybe.com