Slide 1
Slide 1 text
TypeScript
TypeScript: Introdução ao superset
para devs JavaScript 18/11/2023
Slide 2
Slide 2 text
Quem sou eu?
- Me chamo Baú, ou Lucas Viana se
preferir
- Button Painter Engineer há
aproximadamente 6 anos
- Caiçara
- Corredor aspirante
- Estudante de Mandarim
mechamobau
Slide 3
Slide 3 text
1. TypeScript: definição e proposta
Quem é esse tal de TS?
Slide 4
Slide 4 text
TypeScript: definição e proposta
- 1o de Outubro de 2012 (8 anos)
- Anders Hejlsberg
- Tipagem estática para JS
Slide 5
Slide 5 text
TypeScript: definição e proposta
Slide 6
Slide 6 text
TypeScript: definição e proposta
- Type Checker
- Transpilador
- Documentação de Tipos
Slide 7
Slide 7 text
+600
~23M
Downloads
Downloads por semana no
npm
Contribuidores
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 8
Slide 8 text
//Definição de Tipos
Como defino tipos no
TipoScript?
Slide 9
Slide 9 text
Definição de tipos
Tipos literais
Slide 10
Slide 10 text
Definição de tipos
TypeScript Haskell
Tipos compostos
Slide 11
Slide 11 text
Definição de tipos
Slide 12
Slide 12 text
//Composição de Tipos
Hora da fusão de tipos
Slide 13
Slide 13 text
Composição de tipos
Union
Intersection
- Há duas formas de compor tipos em TS:
Slide 14
Slide 14 text
Composição de tipos
Intersection types
Slide 15
Slide 15 text
Composição de tipos
Union types
Slide 16
Slide 16 text
//Manipulação de Tipos
Brincando com os Tipos
criados
Slide 17
Slide 17 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 18
Slide 18 text
Manipulação de tipos
NewType
Slide 19
Slide 19 text
2. Como criar um projeto TypeScript
Configuração e instalação
Slide 20
Slide 20 text
TypeScript: Configuração e instalação
- Para instalar o TypeScript basta
instalá-lo como um pacote global
Slide 21
Slide 21 text
TypeScript: Configuração e instalação
Slide 22
Slide 22 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 23
Slide 23 text
3. Como criar tipos para projetos JavaScript
O porquê do TypeScript ser
mais que uma linguagem
Slide 24
Slide 24 text
Como criar tipos para projetos JavaScript
- 8 de abril de 2016
- Salsa
- Execução de tipos estáticos
Slide 25
Slide 25 text
Como criar tipos para projetos JavaScript
Slide 26
Slide 26 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 27
Slide 27 text
//Como utilizar o JSDoc como sistema de tipos
O que é? Pra que serve?
Onde vive?
Slide 28
Slide 28 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 29
Slide 29 text
Como utilizar o JSDoc como sistema de tipos
Slide 30
Slide 30 text
Como utilizar o JSDoc como sistema de tipos
Slide 31
Slide 31 text
Como utilizar o JSDoc como sistema de tipos
Slide 32
Slide 32 text
@typedef
Slide 33
Slide 33 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 34
Slide 34 text
Como utilizar o JSDoc como sistema de tipos
Slide 35
Slide 35 text
Como utilizar o JSDoc como sistema de tipos
Slide 36
Slide 36 text
@type
Slide 37
Slide 37 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 38
Slide 38 text
Como utilizar o JSDoc como sistema de tipos
Slide 39
Slide 39 text
Como utilizar o JSDoc como sistema de tipos
Slide 40
Slide 40 text
@callback
Slide 41
Slide 41 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 42
Slide 42 text
Como utilizar o JSDoc como sistema de tipos
Slide 43
Slide 43 text
Como utilizar o JSDoc como sistema de tipos
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
//Arquivos de declaração de tipos
Tipos em JavaScript sem
perder a facilidade
Slide 47
Slide 47 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 48
Slide 48 text
Arquivos de declaração de tipos
Slide 49
Slide 49 text
Arquivos de declaração de tipos
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