Slide 1
Slide 1 text
TypeScript
TypeScript: Introdução ao superset
para devs JavaScript
Slide 2
Slide 2 text
Quem sou eu?
- Me chamo Baú, ou Lucas Viana se
preferir
- Button Painter Engineer há
aproximadamente 4 anos
- Amo funcional, meu hobby é escrever
e meu prato favorito é: estrogonofe
de frango
mechamobau
Slide 3
Slide 3 text
O que veremos hoje?
1. TypeScript: definição e proposta
- Definição de Tipos
- Composição de Tipos
- Manipulação de Tipos
2. Como criar um projeto TypeScript
- Como funciona um projeto que
utiliza o TypeScript
- Exemplos utilizando TypeScript
Slide 4
Slide 4 text
1. TypeScript: definição e proposta
Quem é esse tal de TS?
Slide 5
Slide 5 text
TypeScript: definição e proposta
- 1o de Outubro de 2012 (8 anos)
- Anders Hejlsberg
- Tipagem estática para JS
Slide 6
Slide 6 text
TypeScript: definição e proposta
Slide 7
Slide 7 text
TypeScript: definição e proposta
- Type Checker
- Transpilador
- Documentação de Tipos
Slide 8
Slide 8 text
Downloads
~23M
Downloads por semana no
npm
Contribuidores
+600
Contribuidores totais da
linguagem
Adoção
2a
linguagem que as pessoas mais
querem usar de acordo com
StackOverflow Survey 2021
TypeScript: definição e adoção
Slide 9
Slide 9 text
//Definição de Tipos
Tipo assim, como defino
tipos no TipoScript?
Slide 10
Slide 10 text
Definição de tipos
Tipos literais
Slide 11
Slide 11 text
Definição de tipos
TypeScript Haskell
Tipos compostos
Slide 12
Slide 12 text
Definição de tipos
Slide 13
Slide 13 text
//Composição de Tipos
Hora da fusão de tipos
Slide 14
Slide 14 text
Composição de tipos
Union
Intersection
- Há duas formas de compor tipos
em TS:
Slide 15
Slide 15 text
Composição de tipos
Intersection types
Slide 16
Slide 16 text
Composição de tipos
Union types
Slide 17
Slide 17 text
//Manipulação de Tipos
Brincando com os Tipos
criados
Slide 18
Slide 18 text
Manipulação de tipos
Utility types
Omit
Pick
NonNullable
Retorna um novo tipo, sem as propriedades
declaradas
Retorna um novo tipo, apenas com as
propriedades declaradas
Retorna um tipo novo sem null ou
undefined
Record Retorna um tipo de objeto com o mesmo
tipo para a chave e para os valores
E outros 15+ tipos utilitários...
Slide 19
Slide 19 text
Manipulação de tipos
Slide 20
Slide 20 text
2. Como criar um projeto TypeScript
Configuração e instalação
Slide 21
Slide 21 text
TypeScript: Configuração e instalação
- Para instalar o TypeScript, existem
muitas etapas de configuração.
- Foque ao máximo no passo a passo
- Não perca nenhum passo!
Slide 22
Slide 22 text
TypeScript: Configuração e instalação
- Brincadeira 😅 É muito simples!
- Para instalar o TypeScript basta
instalá-lo como um pacote global
Slide 23
Slide 23 text
TypeScript: Configuração e instalação
Slide 24
Slide 24 text
TypeScript: Configuração e instalação
- O tsc é o CLI que conecta o
seu projeto ao compilador (e
servidor) do TypeScript
tsc [options] [file…]
- Para iniciar um projeto
TypeScript basta rodar:
tsc --init
Slide 25
Slide 25 text
3. Como criar tipos para projetos JavaScript
O porquê do TypeScript ser
mais que uma linguagem
Slide 26
Slide 26 text
Como criar tipos para projetos JavaScript
- 8 de abril de 2016
- Salsa
- Execução de tipos estáticos
Slide 27
Slide 27 text
Como criar tipos para projetos JavaScript
Slide 28
Slide 28 text
Como criar tipos para projetos JavaScript
- Através do Salsa é possível definir
tipos para um projeto JavaScript de
duas formas:
1. JSDoc
2. Declarações de tipos (.d.ts)
Slide 29
Slide 29 text
//Como utilizar o JSDoc como sistema de tipos
O que é? Pra que serve?
Onde vive?
Slide 30
Slide 30 text
Como utilizar o JSDoc como sistema de tipos
O que é JSDoc?
É um projeto JavaScript criado com o
propósito de documentar APIs de
aplicações ou bibliotecas JavaScript.
- @typedef
- @type
- @callback
Slide 31
Slide 31 text
Como utilizar o JSDoc como sistema de tipos
Slide 32
Slide 32 text
Como utilizar o JSDoc como sistema de tipos
Slide 33
Slide 33 text
Como utilizar o JSDoc como sistema de tipos
Slide 34
Slide 34 text
@typedef
Slide 35
Slide 35 text
Como utilizar o JSDoc como sistema de tipos
@typedef
- A tag @typedef é equivalente a
uma declaração de type alias no
TypeScript.
- Esta tag é muito utilizada para
declaração de estruturas de
múltiplos campos no seu código
através do @property
Slide 36
Slide 36 text
Como utilizar o JSDoc como sistema de tipos
Slide 37
Slide 37 text
Como utilizar o JSDoc como sistema de tipos
Slide 38
Slide 38 text
@type
Slide 39
Slide 39 text
Como utilizar o JSDoc como sistema de tipos
@type
- A tag @type é usada para
definirmos o tipo de uma
expressão.
- Esta tag é pode ser utilizada para
declaração também
Slide 40
Slide 40 text
Como utilizar o JSDoc como sistema de tipos
Slide 41
Slide 41 text
Como utilizar o JSDoc como sistema de tipos
Slide 42
Slide 42 text
@callback
Slide 43
Slide 43 text
Como utilizar o JSDoc como sistema de tipos
@callback
- A tag @callback é usada para
definirmos o tipo de uma função
junto às tags @param e
@returns.
- É possível também declarar
funções curry
Slide 44
Slide 44 text
Como utilizar o JSDoc como sistema de tipos
Slide 45
Slide 45 text
Como utilizar o JSDoc como sistema de tipos
Slide 46
Slide 46 text
Como utilizar o JSDoc como sistema de tipos
Slide 47
Slide 47 text
Como utilizar o JSDoc como sistema de tipos
Slide 48
Slide 48 text
//Arquivos de declaração de tipos
Tipos em JavaScript sem
perder a facilidade
Slide 49
Slide 49 text
Arquivos de declaração de tipos
- São arquivos responsáveis por
criar declarações de tipos para
APIs JavaScript
- Através destes arquivos é
possível compartilhar
documentações
Slide 50
Slide 50 text
Arquivos de declaração de tipos
Slide 51
Slide 51 text
Arquivos de declaração de tipos
Slide 52
Slide 52 text
Arquivos de declaração de tipos
Slide 53
Slide 53 text
Arquivos de declaração de tipos