SlideShare uma empresa Scribd logo
1 de 51
Começamos em instantes...
Hypescript Typescript!!
Uma breve introdução.
Cristiano Gonçalves
Cristiano
Gonçalves
Desenvolvedor FrontEnd
● React
● Typescript
● Mobx
● SCSS
Um tempo atrás eu fazia cara feia
só de ouvir o nome typescript...
Pra mim não fazia sentido deixar de
aproveitar a tipagem dinâmica
nativa do javascript e usar uma
tipagem estática e "engessada".
“
Um tempo atrás eu fazia cara feia
só de ouvir o nome typescript...
Pra mim não fazia sentido deixar de
aproveitar a tipagem dinâmica
nativa do javascript e usar uma
tipagem estática e "engessada".
“
Antes de prosseguir...
Javascript é uma linguagem muito permissiva e simples, ela não tem tipagem
forte e isso torna seu aprendizado mais fácil, porém, com grandes poderes vem
grandes responsabilidades. Toda a liberdade que o javascript oferece pode ser
muito perigosa caso você não saiba exatamente o que está fazendo.
Apesar do JavaScript ser talvez uma das linguagens mais
fáceis de se começar, suas excentricidades fazem com que o
domínio sólido da linguagem seja muito menos comum do
que em outras linguagens. Enquanto se precisa um
conhecimento aprofundado em linguagens como C ou C++
para escrever um programa em grande escala, uma
aplicação similar em JavaScript pode ser desenvolvida, e
muitas vezes é, apenas arranhando parte do que a
linguagem pode fazer de verdade
“
Kyle Simpson
Tipos de linguagens de programação
● Linguagens fortemente tipadas ou estáticas: são linguagens onde você é
obrigado a declarar o tipo do dado. Ex: Java, C++, C#
● Linguagens fracamente tipadas ou dinâmicas: são linguagens onde a
conversão é feita durante a execução do programa e sem a necessidade
do programador forçar a conversão. Ex: PHP, Javascript, Ruby, Python.
Exemplo em JS
Exemplo em JS
Trabalhar com a tipagem dinâmica do
javascript é como andar em um labirinto...
Você não sabe onde está, mas quando
pensa que sabe tudo pode mudar muito
rápido e acabar te deixando confuso.
https://github.com/cezaraugusto/You-Dont-Know-JS
O que é?
É um superset para javascript que adiciona tipagem forte e
alguns outros recursos para a linguagem.
Ela foi criada pela Microsoft em meados de 2012 e vem
caindo no gosto dos programadores.
A queridinha da web...
Pesquisa do stack overflow sobre as linguagens mais amadas em 2019.
A queridinha da web...
Pesquisa do stack overflow sobre as linguagens mais amadas em 2020.
A queridinha da web...
Pesquisa do stack overflow sobre as linguagens mais amadas em 2016.
Como funciona?
Typescript funciona apenas em tempo de execução. O que
isso quer dizer? Enquanto você estiver escrevendo seu
código ele vai ser typescript, mas quando você fazer o build
e acessar no seu navegador ele será exatamente o javascript
comum que você já conhece. Tá! Pode não ter ficado tão
claro assim, mas vamos ao código.
Como funciona?
Typescript funciona em tempo de execução. Em outras
palavras, todas as verificações e validações são feitas
enquanto estamos desenvolvendo nossos programas. No
momento em que saímos do “dev-mode” todo nosso código
vira um javascript comum que qualquer navegador consegue
interpretar.
Como funciona?
Essa transformação, também conhecida como transpilação,
é feita com ajuda de ferramentas como babel, ts-node,
webpack, parcel etc.
É importante lembrar que transpilar !== compilar. Quando
compilamos transformamos uma linguagem de alto nível em
uma de nível mais baixo.
Como funciona?
Quando transpilamos a gente mantém o nível da linguagem.
Ou seja, javascript continua sendo javascript e não um
código de máquina.
Tipando o básico
No javascript a gente simplesmente declara uma variável e o seu tipo é inferido e
pode ser alterado em todo nosso código.
No typescript a inferência de tipos também acontece, a diferença é que nele,
podemos apontar qual o tipo e não conseguimos alterá-lo mais.
Tipando o básico
Podemos apontar um tipo
de forma explícita usando
alguns tipos já conhecidos
do javascript e alguns tipos
"estranhos": number,
string, boolean, null,
undefined, any, never e
void.
Any
Any é exatamente a tradução literal: qualquer. Em outras
palavras, algo declarado como any pode receber um number
e depois uma string sem nenhum problema.
Void
Também conseguimos tipar
o retorno de uma função
ou os parâmetros que ela
vai receber. Utilizamos o
void quando queremos
representar o vazio,
quando uma função não
tem retorno, por exemplo.
Never
O never representa valores
que nunca ocorrem, por
exemplo, o retorno de uma
função com while(true).
Algo interessante é que
never pode ser atribuído
para qualquer tipo, porém
algo do tipo never só aceita
valores never.
Tipando arrays
Tipar arrays é algo bem
simples, basicamente
podemos definir um array
type de duas formas.
Preciso tipar tudo?
Inferência de tipos
Na maioria dos casos o typescript vai descobrir qual é o tipo
sozinho. Quando ele não saber qual tipo colocar ele vai
tornar sua variável implicitamente any.
Interfaces , Types e enums
Nem sempre os tipos
básicos vão ser necessários
para atender nossa
aplicação. É por isso que
podemos criar nossas
estrutura fazendo
composições entre tipos
básicos e tipos
personalizados.
Utility Types
Typescript oferece diversos
utilitários para facilitar no
manuseio e na
transformação de tipos.
Omit, pick, Readonly
Omit, pick, Readonly
Omit, pick, Readonly
Loiane Groner
Loiane Groner
Obrigado!!
Perguntas?
https://www.instagram.com/_love.bits/
https://twitter.com/Gonkristiano
https://blog.matheuscastiglioni.com.br/como-funciona-a-transpilacao-de-codigo-do-babel/
https://medium.com/@oieduardorabelo/typescript-imutabilidade-em-tempo-de-
compila%C3%A7%C3%A3o-em-typescript-8067fd9751f5
https://eusoudev.com.br/javascript-typescript/
https://www.ramosdainformatica.com.br/programacao/javascript/typescript-3-5-os-novos-recursos-do-
typescript/
https://medium.com/@matheusmariano/o-m%C3%ADnimo-que-voc%C3%AA-precisa-saber-sobre-
typescript-58d1b418f78b

Mais conteúdo relacionado

Semelhante a Hypescript Typescript!! Uma breve introdução

JavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo Perguntas
JavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo PerguntasJavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo Perguntas
JavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo PerguntasErick L. F.
 
Palestra Faculdade Lourenço Filho
Palestra Faculdade Lourenço FilhoPalestra Faculdade Lourenço Filho
Palestra Faculdade Lourenço Filhorafarubert
 
programar com Scratch.pdf
programar com Scratch.pdfprogramar com Scratch.pdf
programar com Scratch.pdfmswebertech
 
Scratch-jeito_divertido_de_programar (1).pdf
Scratch-jeito_divertido_de_programar (1).pdfScratch-jeito_divertido_de_programar (1).pdf
Scratch-jeito_divertido_de_programar (1).pdfosiasdebarrosanuncia
 
Porque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhor
Porque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhorPorque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhor
Porque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhorDickson S. Guedes
 
DDD linguagem ubiqua + codigo expressivo
DDD  linguagem ubiqua + codigo expressivoDDD  linguagem ubiqua + codigo expressivo
DDD linguagem ubiqua + codigo expressivoGabriel Schade Cardoso
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsVinicius Reis
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerGiovanni Kenji Shiroma
 
Scraping for fun and glory
Scraping for fun and gloryScraping for fun and glory
Scraping for fun and gloryitalomaia
 
Java Primeiros Passos - Cap 7
Java Primeiros Passos - Cap 7Java Primeiros Passos - Cap 7
Java Primeiros Passos - Cap 7David Willian
 
A importância da programação funcional no dia a-dia
A importância da programação funcional no dia a-diaA importância da programação funcional no dia a-dia
A importância da programação funcional no dia a-diaGabriel Schade Cardoso
 
Aula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane FidelixAula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane FidelixCris Fidelix
 
Aula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane FidelixAula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane FidelixCris Fidelix
 
Introdução ao TypeScript + React
Introdução ao TypeScript + ReactIntrodução ao TypeScript + React
Introdução ao TypeScript + ReactGuilherme Oenning
 
Pensando fora da caixa
Pensando fora da caixaPensando fora da caixa
Pensando fora da caixaWilliam "Kina"
 

Semelhante a Hypescript Typescript!! Uma breve introdução (20)

JavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo Perguntas
JavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo PerguntasJavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo Perguntas
JavaScript - #Aula03 parte 03 - Bichinho Virtual - Respondendo Perguntas
 
Palestra Faculdade Lourenço Filho
Palestra Faculdade Lourenço FilhoPalestra Faculdade Lourenço Filho
Palestra Faculdade Lourenço Filho
 
programar com Scratch.pdf
programar com Scratch.pdfprogramar com Scratch.pdf
programar com Scratch.pdf
 
Scratch-jeito_divertido_de_programar (1).pdf
Scratch-jeito_divertido_de_programar (1).pdfScratch-jeito_divertido_de_programar (1).pdf
Scratch-jeito_divertido_de_programar (1).pdf
 
Porque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhor
Porque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhorPorque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhor
Porque aprender várias linguagens me tornou um DBA (e desenvolvedor) melhor
 
DDD linguagem ubiqua + codigo expressivo
DDD  linguagem ubiqua + codigo expressivoDDD  linguagem ubiqua + codigo expressivo
DDD linguagem ubiqua + codigo expressivo
 
Groovy stack
Groovy stackGroovy stack
Groovy stack
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & Docker
 
Scraping for fun and glory
Scraping for fun and gloryScraping for fun and glory
Scraping for fun and glory
 
Vivendo de hacking
Vivendo de hackingVivendo de hacking
Vivendo de hacking
 
Java e orientação a objetos
Java e orientação a objetosJava e orientação a objetos
Java e orientação a objetos
 
Java Primeiros Passos - Cap 7
Java Primeiros Passos - Cap 7Java Primeiros Passos - Cap 7
Java Primeiros Passos - Cap 7
 
A importância da programação funcional no dia a-dia
A importância da programação funcional no dia a-diaA importância da programação funcional no dia a-dia
A importância da programação funcional no dia a-dia
 
Aula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane FidelixAula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane Fidelix
 
Aula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane FidelixAula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane Fidelix
 
Introdução ao TypeScript + React
Introdução ao TypeScript + ReactIntrodução ao TypeScript + React
Introdução ao TypeScript + React
 
#Moving br workshop
#Moving br workshop#Moving br workshop
#Moving br workshop
 
PDF.pdf
PDF.pdfPDF.pdf
PDF.pdf
 
Pensando fora da caixa
Pensando fora da caixaPensando fora da caixa
Pensando fora da caixa
 

Hypescript Typescript!! Uma breve introdução