Slide 1

Slide 1 text

Globalcode – Open4education Trilha – JavaScript e Node.JS Monica Craveiro de Menezes TypeScript: Desvendando a Magia da Tipagem

Slide 2

Slide 2 text

Globalcode – Open4education Carioca da gema, ex-patinadora artística, gamer, #TechMaromba, já fiz muitos cálculos por aí mas hoje em dia fico “só nos compiuter”, amante de energético e aspirante a Influencer Tech. Quem sou eu? @mocraveirodev Monica Craveiro de Menezes

Slide 3

Slide 3 text

Globalcode – Open4education O que é TypeScript? “Superset” do Javascript ● Criado em 2010 ● Desenvolvido e mantido pela Microsoft ● Linguagem compilada e convertida para Javascript ● Possui Tipagem Estática ● Serve para Front-end e Back-end ● Pode ser utilizado com Frameworks/Libs Mas antes disso…

Slide 4

Slide 4 text

Globalcode – Open4education COMO SAÍMOS DO JAVASCRIPT PARA O TYPESCRIPT?? ?

Slide 5

Slide 5 text

Globalcode – Open4education JavaScript ● Criado em 1995 ● Criado em 10 dias ● Brendan Eich da NetScape ● Tem como base o ECMAscript desde 2015 ● Atualizações anuais pelo TC39 ● Compatibilidade com Versões anteriores ● Tipagem dinâmica ● JSDoc A linguagem evoluiu muito desde sua criação, mas…

Slide 6

Slide 6 text

Globalcode – Open4education TIPAGEM DINÂMICA VS TIPAGEM ESTÁTICA • Tipo não é explicitamente declarado • Tipo associado ao valor da variável • Tipo pode ser alterado • Tipo é explicitamente declarado • Tipo não pode ser alterado • O valor da variável deve respeitar o tipo definido • Possui compilador

Slide 7

Slide 7 text

Globalcode – Open4education COMPILADORES • Verificam variáveis, tipos e valores • Apontam possíveis erros • TypeScript Compiler (TSC)

Slide 8

Slide 8 text

Globalcode – Open4education POR QUE USAR TYPESCRIPT • Evita situações como essa: • Permite usar sintaxe moderna pois será convertida para uma versão compatível em JavaScript

Slide 9

Slide 9 text

Globalcode – Open4education VANTAGENS VS DESVANTAGENS • Recursos avançados do JavaScript • Previne erros de tipagem • Mais fácil identificar Bugs • Código mais legível • Linguagem popular • É mais verboso • Demanda mais tempo • Curva de aprendizado • Precisa ser compilado

Slide 10

Slide 10 text

Globalcode – Open4education COMO INSTALAR O TYPESCRIPT ? • Precisa ter o Node.JS instalado • Utilize o npm • O nome do pacote é typescript • Instalar de forma global com a flag -g • Após instalação, o comando tsc fica disponível e podemos utilizar para executar/compilar o TS em qualquer lugar na nossa máquina.

Slide 11

Slide 11 text

Globalcode – Open4education COMO INICIAR UM PROJETO TYPESCRIPT? • Usar o comando tsc - -init • Vai criar o arquivo de configuração tsconfig.json

Slide 12

Slide 12 text

Globalcode – Open4education PRINCIPAIS CONFIGURAÇÕES DO TSCONFIG.JSON • Target: Define em qual versão do JS o TS será compilado. Ex.: ES3, ES2015, ES2016, ESNext • Module: Define o Tipo de import/export que será usado. Ex.: commonjs, ESNext • outDir: Pasta onde ficarão os arquivos compilados. Ex.: “./dist” • rootDir: Localização dos arquivos TS. Ex.: “./src” • removeComments: Remove os comentários do código. Ex.: true ou false • allowJs: Permite ter arquivos JS. Ex.: true ou false • checkJs: Verifica erros também em arquivos JS. Ex.: true ou false Você não precisa saber todos inicialmente, basta saber os principais!

Slide 13

Slide 13 text

Globalcode – Open4education tsc Criando o primeiro código em TypeScript • Utilizar a extensão *.ts para identificar um arquivo TypeScript. • Arquivos TypeScript aceitam código JavaScript. • Para compilar o arquivo TypeScript para JavaScript, basta utilizar o comando tsc no terminal.

Slide 14

Slide 14 text

Globalcode – Open4education Tipagem por Declaração ou Inferência • Declaração: Quando o tipo da variável é declarado explicitamente. • Inferência: O tipo da variável é definido de acordo com valor atribuído a ela. • Caso teste declarar um valor diferente do tipo designado para variável, o TypeScript apresentará uma mensagem de erro em tempo de desenvolvimento. Obs.: Caso tente compilar o arquivo com erro, a mesma mensagem aparecerá no terminal. Declaração Inferência

Slide 15

Slide 15 text

Globalcode – Open4education Tipos Básicos • string • number • boolean • any • [ ] • { } • null • undefined • Tuplas

Slide 16

Slide 16 text

Globalcode – Open4education Intersections Usada quando precisamos que a variável possua mais de um tipo. Enum É um conjunto de valores constantes pré-definido. Type Assertions Informa ao compilador sobre o tipo da variável. Não redefine o tipo, apenas informa ao compilador que, naquele momento, o valor será modificado.

Slide 17

Slide 17 text

Globalcode – Open4education Funções • Podemos definir qual será o tipo dos seus parâmetros e do seu retorno. Caso não sejam definidos, o tipo será inferido. • Qualquer tipo conhecido pode ser atribuído aos parâmetros e retorno. • Poderá haver intersecção de tipos. • O tipo void é atribuído à funções que não tem retorno.

Slide 18

Slide 18 text

Globalcode – Open4education Type • Cria um tipo pré-definido e reutilizável para ser atribuído da mesma forma que fazemos com os tipos básicos. • Caso tenha alguma propriedade que seja opcional, podemos usar o ? para defini-la. • Também podemos usar o ? caso o parâmetro de uma função for opcional. • Ao usar o ! estamos garantindo que a variável existe e não é nula.

Slide 19

Slide 19 text

Globalcode – Open4education Unions • Quando precisamos atribuir e unir mais de um tipo a uma variável.

Slide 20

Slide 20 text

Globalcode – Open4education Interfaces • Define uma estrutura ou forma de um objeto e especifica as propriedades e métodos que um objeto tem ou deveria ter. • Podemos usar o readonly para definir uma propriedade como “somente leitura”, ou seja, não poderá ser modificada. • Podemos usar interfaces em Funções para definir os tipos dos argumentos e retorno de uma função.

Slide 21

Slide 21 text

Globalcode – Open4education Classes • Podemos definir os tipos das variáveis que estarão no this. • Podemos tipar o retorno dos métodos. • Podemos usar interfaces • Podemos usar os modificadores readonly, protected e private.

Slide 22

Slide 22 text

Globalcode – Open4education Generics • Com Generics podemos passar tipo como “parâmetros”, deixando a tipagem de variáveis e funções mais dinâmica. • Devemos usar generics para declarar que uma função retorna uma Promise.

Slide 23

Slide 23 text

Globalcode – Open4education Generics em Classes • Podemos passar Generic par deixar a tipagem de classes mais dinâmica. • Podemos abreviar a declaração dos tipos das variáveis do construtor.

Slide 24

Slide 24 text

Globalcode – Open4education “Mostre-me a linguagem de programação perfeita e lhe mostrarei uma linguagem sem usuários.” - Anders Hejlsberg, TSConf 2019 O TypeScript veio para aprimorar o JavaScript, adicionando tipagem e novas funcionalidade.

Slide 25

Slide 25 text

Globalcode – Open4education MONICA CRAVEIRO DE MENEZES @mocraveirodev OBRIGADAAAA!!!

Slide 26

Slide 26 text

No content