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

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

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…

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

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…

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

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

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

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

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.

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

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!

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.

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

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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

No content