TypeScript: Desvendando a Magia da Tipagem

Você já ouviu falar em TypeScript, mas não sabe por onde começar? Cansado de bugs e código inseguro? Não se preocupe, domine a tipagem estática do TypeScript e descubra como transformar sua maneira de programar, escrevendo códigos mais robustos e confiáveis e dando um salto na sua carreira como pessoa desenvolvedora.

Palestra apresentada no The Developers Conference (TDC) na Trilha de Javascript e Node.JS no da 19/09/2024 às 14h20.

Transcript

1. Globalcode – Open4education Trilha – JavaScript e Node.JS Monica Craveiro de Menezes TypeScript: Desvendando a Magia da Tipagem
2. 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
3. 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…
4. Globalcode – Open4education COMO SAÍMOS DO JAVASCRIPT PARA O TYPESCRIPT?? ?
5. 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…
6. 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
7. Globalcode – Open4education COMPILADORES • Verificam variáveis, tipos e valores • Apontam possíveis erros • TypeScript Compiler (TSC)
8. 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
9. 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
10. 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.
11. Globalcode – Open4education COMO INICIAR UM PROJETO TYPESCRIPT? • Usar o comando tsc - -init • Vai criar o arquivo de configuração tsconfig.json
12. 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!
13. 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.
14. 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
15. Globalcode – Open4education Tipos Básicos • string • number • boolean • any • [ ] • { } • null • undefined • Tuplas
16. 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.
17. 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.
18. 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.
19. Globalcode – Open4education Unions • Quando precisamos atribuir e unir mais de um tipo a uma variável.
20. 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.
21. 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.
22. 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.
23. 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.
24. 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.
25. Globalcode – Open4education MONICA CRAVEIRO DE MENEZES @mocraveirodev OBRIGADAAAA!!!