aula de introdução a ecamscript e typescript

INTRODUÇÃO
INTRODUÇÃO
Ecma6+ / typescript
Ecma6+ / typescript
Prof. Mr. Fabio Abrantes Diniz
fabio.abrantes.diniz@gmail.com

Introdução
Introdução
• São a mesma coisa.
 A gente conhece por javascript das antigas que
patentearam.
 Mas o nome oficial hoje é ECMAScript

Introdução
Introdução
• De 2009 a 2015
• Foram acrescentado muitas features.
• As novas features acrescentadas não invalidam as
anteriores.
• Quando essas features são implementadas os browser
ainda não dão suporte.
https://kangax.github.io/compat-table/es6/
https://caniuse.com/

Introdução
Introdução
• ECMAScript
 Criação de novos tipos de
dados
(Map, WeakMap, Set,
WeakSet);
 Declaração de variáveis com
let e const;

Introdução
Introdução
https://babeljs.io/

Configurando o Babel
1. npm init ou yarn init
 Dar enter sempre
 Gerando o arquivo package.json
2. Instalar a dependência Babel
1. Yarn add @babel/cli ou npm install @babel/cli
2. Yarn add @babel/preset-env ou npm install
@babel/preset-env
 Cria o arquivo node_modules
3. Yarn add @babell/core ou npm install @babel/core

3. Criar o arquivo de controle de vesão
 .gitignore (opcional) contendo o seguinte código
 node_modules/
4. Babel
 Criar o arquivo na raiz do projeto
 .babelrc contendo o seguinte código

5. Dentro de package.json adicionar um script
que executará o comando do babel para
gerar nosso bundle.js
6. Executar o comando yarn dev ou npm run
dev
 Vai transformar o arquivo main.js no bundle.js

Conceitos ECMA6+
Conceitos ECMA6+
• Classes
 provêm uma maneira mais simples e clara de criar
objetos e lidar com herança.
 Declarando

Conceitos ECMA6+
Conceitos ECMA6+
• Classes (Outras formas de Declarações)
 Expressão de Classe

Conceitos ECMA6+
Conceitos ECMA6+
• Corpo de Classes, definições de métodos,
construtores e operadores new e this

Conceitos ECMA6+
Conceitos ECMA6+
• Heranças de classes (extends)

Conceitos ECMA6+
Conceitos ECMA6+
• Const e let
 var
funciona em todos browsers cross-browser
Posso criar variáveis com mesmo nome
Posso declarar sem atribuir valor
 let
Não deixa criar variáveis com mesmo nome
Posso declarar sem atribuir valor
 const
Não posso declarar sem atribuir um valor
Não posso atribuir outro valor caso ele foi já
atribuído

Conceitos ECMA6+
Conceitos ECMA6+
• Const e let
 const
Não posso declarar sem atribuir um valor
Não posso atribuir outro valor caso ele foi já
atribuído
– Em objetos e array pode atribuir em suas
propriedades (mutação)

Conceitos ECMA6+
Conceitos ECMA6+
• Escopo

Conceitos ECMA6+
Conceitos ECMA6+
• Operações em array ()
for .. of
map()
Foreach()
Reduce()
Filter()
Find()
Slice()
Splice()
indexOf()
Includes()
Join()

Conceitos ECMA6+
Conceitos ECMA6+

Conceitos ECMA6+
Conceitos ECMA6+
• Arrow functions

Conceitos ECMA6+
Conceitos ECMA6+
• Valores padrões
 Os parâmetros predefinidos de uma função
 os parâmetros de funções tem undefined como
valor predefinido

Conceitos ECMA6+
Conceitos ECMA6+
• Desestruturação
 expressão que possibilita extrair dados de
arrays ou objetos em variáveis distintas.

Conceitos ECMA6+
Conceitos ECMA6+
• Operador rest
 permite representar um número indefinido de
argumentos como um array
npm install @babel/plugin-proposal-object-rest-spread
Configurar o arquivo .babelrc
– "plugins": ["@babel/plugin-proposal-object-rest-spread"]

Conceitos ECMA6+
Conceitos ECMA6+
• Operador spread
 permite que um objeto, uma expressão de array ou
uma string seja propagado

Conceitos ECMA6+
Conceitos ECMA6+
• Template literals
 são strings que permitem expressões
embutidas.
utilizar string multi-linhas e interpolação
de string com expressões.

Conceitos ECMA6+
Conceitos ECMA6+
• Sintaxe curta de Objeto
•Quando temos o nome da variável igual o
nome da propriedade do objeto.
•Não precisa atribuir a variável na propriedade.

Webpack Server ECMA6+
• Serviço que vai permite trabalhar com vários
arquivos
 Convertido em único arquivo bundle.js
Fonte: https://webpack.js.org/

• Fazendo o recurso de módulos
funcioanando no front-end
 Configurando Webpack
1. npm install webpack webpack-cli –D
2. npm install babel-loader@8.0.0-beta.0 -D

Webpack Server dev
Webpack Server dev
ECMA6+
ECMA6+
• Depois instalar a
dependência
 npm install webpack-dev-server –D
 Criar e Configurar os arquivos
package.json webpack.config.js
 Depois npm run dev

• Import
 usada para importar vínculos que são
exportados por um outro módulo.
 Sintaxe

• Export
•utilizado para funções, objetos ou valores
primitivos de um módulo sejam utilizados
• por outros programas
• declarações import.

• Sintaxe do export

• Exemplo import/export

require() no NodeJs
require() no NodeJs
• Usados em JavaScript para importar e exportar
módulos
• Pertence a CommonJS
 E não da API ECMA
• Mais informações
 https://nodejs.org/api/modules.html

require() x import
require() x import
• require()
 Desenvolvida pelo Nodejs
 Módulos carregado de maneira síncronas
 usa module.exports (sintaxe antiga)
• Import
 ECMA+
 Módulos carregados assincronamente
 usar module.exports e export
Importa partes do que foi exportados

require() x import
require() x import

Webpack Server Dev
Webpack Server Dev
• Organizar as pastas
Public
– Html, css, bundle.js
» Arquivos que o webpack não monitora
Src
– Código javascript
– Webpack vai monitorar as mudanças

Import/export ECMA6+
Import/export ECMA6+
• Fazendo funcionar no node sem o babel
 Duas maneiras
1. Alterar o package.json
– Adicionando "type": "module",
» https://nodejs.org/api/packages.html#packages_type
2. Instalar a biblioteca esm
– npm install esm
– Depois executar o arquivo que import
» node -r esm main.js

Async/await ECMA6+
Async/await ECMA6+
• Funções assíncronas x funções normais
 Funções normais
É executada sequencialmente
– Se tivermos duas funções A e B. A é a primeira a
executar
» B só iniciraá executar quando A terminar
 Funções Assínccronas
Se tivermos duas funções A e B. Se A executar
primeiro.
– B também poderá executar, sem esperar A finalizar

Async/await ECMA6+
Async/await ECMA6+
• Async function
 Define uma função assíncrona
Retorna uma Promise
 Sintaxe

Async/await ECMA6+
Async/await ECMA6+
• await function
 é utilizado para esperar por uma Promise.
 Sintaxe
Retorna um valor final da promise

Async/await ECMA6+
Async/await ECMA6+
• Instalar o plugin para o babel entender o
async/await
 npm install @babel/plugin-transform-async-to-generator -
D
 npm install @babel/polyfill -D
• Depois
 Configurar o .babelrs
 E por fim configurar p webpack.config.js

Async/await ECMA6+
Async/await ECMA6+
• Exemplo Async/await function

Async/await ECMA6+
Async/await ECMA6+
• Mais Exemplos Async/await function
 npm install --save cross-fetch
import fetch from 'cross-fetch’;

Async/await ECMA6+
Async/await ECMA6+
• Biblioteca Axios
 Um cliente HTTP, que funciona tanto no browser
quanto em node.js.
Api para trabalhar com requisições assíncronas
Todas as funções do axios retornam promisses
 Instalação
npm install axios

Async/await ECMA6+
Async/await ECMA6+
• Biblioteca Axios
 Características
• Faz requisições http
• get(), post(), put(),delete() e all()
• Criação de instâncias
• Create()
• Transforma respostas em JSON automaticamente
• Suporte a requisições assíncronas
• Mais informações
 https://www.npmjs.com/package/axios#creating-
an-instance

Async/await ECMA6+
Async/await ECMA6+
• Exemplo usando Biblioteca Axios

Typescript
Typescript
• Introdução

Typescript
Typescript
• Introdução
https://www.typescriptlang.org/

Typescript
Typescript
• Por que Typescript?
 Estende o JavaScript adicionando tipos.
 Economiza seu tempo ao detectar erros
 Fornece correções antes de executar o código.

Typescript
Typescript
• Por que Typescript?

Typescript
Typescript
• Mitos e verdade?

Typescript
Typescript
• Configurando o projeto
 Escolha uma pasta onde estará seu código
Workspace
– npm init –y ou yarn init –y
» Gerar o package.json
Instalar dependência typescript
– npm install typescript –D ou yarn add typescript –D
Depois gerar o arquivo tsconfig.json
– npx tsc --init

Typescript
Typescript
• Configurando o projeto
 Depois configurar dentro do tsconfig.json
Habilitar: "outDir": "./dist",
 Depois codar
Exemplo usando a biblioteca express.
Comandos
– yarn tsc ou npx tsc
» Encontra os arquivos .ts e convertem em .js
– node /arquivo.js
» Executar o código javascript do arquivo

Typescript
Typescript
• Tipagem Explícita
 Especificamos o qual será o tipo de cada variável.

Typescript
Typescript
• Any
 Ao declarar uma variável no TypeScript
O seu tipo por padrão será any.
– não é muito recomendada a sua utilização
» Aceita qualquer dado
» Perde a utilidade da essência de tipagem

Typescript
Typescript
• Inferência de tipos
 O TypeScript reconhece automaticamente o tipo
da variável ao passar algum valor para ela.

Typescript
Typescript
• Tipos primitivos

Typescript
Typescript
• Matrizes
 Existem duas maneiras de tipar arrays no
TypeScript, confira os exemplos:

Typescript
Typescript
• Funções (parei pw2)
 Uma função pode ter ou não um retorno,
quando ela não tem um retorno é do tipo void
quando a função tem um retorno, a tipagem é inferida
automaticamente na função.

Typescript
Typescript
• Union (parei aqui pw1 e pdm)
 Representado pelo pipe | nos permite adicionar
mais de um tipo na variável.

Typescript
Typescript
• Generics
 Permite reutilizar uma determinada implementação de código,
de forma tipada.
 Para representar um generic, nós declaramos dessa
forma <T>
(podendo ser utilizado qualquer outra letra, existem as
convenções que podemos seguir:)
– <S> Representando
→ State
– <T> Representando
→ Type
– <K> Representando
→ Key
– <V> Representando
→ Value
– <E> Representando
→ Element

Typescript
Typescript
• Generics
 Permite reutilizar uma determinada implementação de
código, de forma tipada.

Typescript
Typescript
• Type
 Para não ficar sempre repetindo os tipos para
todas as variáveis
podemos criar Types para cada uma delas.

Typescript
Typescript
• Type Assertions
 É utilizado quando o TypeScript não sabe qual é
a tipagem em um determinado objeto.
Criar um type informando quais são as propriedades
desse objeto

Typescript
Typescript
• Objetos
 como criar tipagens utilizando objetos no
TypeScrip

Typescript
Typescript
• Propriedades Opcionais
 Para informamos que uma propriedade é
opcional inserimos o sinal de ?

Typescript
Typescript
• Intersecção de Tipos
 Unir dois tipos e usar as suas propriedades
dentro de um objeto. Usando & ou |

Typescript
Typescript
• Interface
 Outra maneira de criar tipagens no TypeScript é
utilizando a interface

Typescript
Typescript
• Type e Interface
 Ambos serve para definir tipagens no
TypeScript.
 O type é mais recomendado por ser mais
simples, fácil de lidar com tipos primitivos,
por ser mais flexível.
 Já as interfaces são utilizadas normalmente em
criação de libs,
para aqueles que gostam da programação orientada a
objetos.

Typescript
Typescript
• Type e Interface

Typescript
Typescript
• tsconfig
 É um arquivo de configuração do TypeScript,
pode ser escrito tanto em formato de JavaScript
quanto no formato JSON.
https://www.typescriptlang.org/tsconfig

Typescript
Typescript
• Projeto
 Desafio prático em sala de aula
transforma um projeto que está totalmente em
Javascript para typescript
– Link do repositório
» https://github.com/fabioabrantes/
ListaParticipacao/tree/main
– Fazer os seguintes passos para usá-lo
1.git clone (clonando o projeto)
2.cd pastaProjeto (acessando o diretório)
3.npm install (instalando as dependências)
4.npm run dev (executando o projeto)

Typescript
Typescript
• Adicionando TypeScript
1. Instalando o TypeScript no projeto:
npm install --typescript --save-dev
2. Criar um arquivo tsconfig.json na raiz do projeto
– npx tsc --init
Ou usar o arquivo abaixo, caso não queira executar
esse comando e colocar na raiz do projeto
– https://drive.google.com/file/d/
19QHI2jK9N4UgWKNXKTrCsUs4iHjvKFUS/
view?usp=sharing

Typescript
Typescript
• Tipando Componente
 Colocar as extensões dos arquivos para .ts, tsx
Tipar os componentes no projeto
No arquivo index.html, atualizar o script para main.tsx
– <script type="module" src="/src/main.tsx"></script>
 Instalar as tipagens do react
npm i --save-dev @types/react

Typescript
Typescript
• Tipando Componente

Typescript
Typescript
• Tipando Estados
 Tipando a página Home
Aproveitar a tipagem do Card importando o na página
Home.
Em seguida passar as tipagens para o estado

Typescript
Typescript
• Tipando resposta de API
 Precisamos criar dois types

Typescript
Typescript
• Quando adicionar tipos
• Foi adicionado a tipagem do express
 yarn add @types/express

Typescript
Typescript
• Quando adicionar tipos
• Exemplo de como como trabalhar com a
mesma tipagem de dependências em
arquivos separados.

Typescript
Typescript
• Tipando objetos e vetores
• Exemplo de como tipar nossas próprias
constantes
 Fazendo com que o IntelliSense da IDE nos auxilie

Typescript
Typescript
• Tipando objetos e vetores
• Vamos importar esse código em outro arquivo
 O que acontece!

Typescript
Typescript
• Tipando vetores
• Vamos importar esse código em outro arquivo
 O que acontece!

Typescript
Typescript
• Guia typescript
 https://www.notion.so/Typescript-
5712aeab312d44fcba0aa88895caad36
 https://www.typescriptlang.org/

aula de introdução a ecamscript e typescript

Mais conteúdo relacionado

Semelhante a aula de introdução a ecamscript e typescript (20)

Último (7)

aula de introdução a ecamscript e typescript

Notas do Editor