TypeScript: Introdução ao superset para devs JavaScript

Palestra apresentada durante o evento TDC Transformation, para a empresa Trybe demonstrando o uso de Tipos Genéricos, detalhando seus funcionamento e boas práticas para escrita de um código fortemente tipado.

Transcript

1. TypeScript TypeScript: Introdução ao superset para devs JavaScript
2. Quem sou eu? - Me chamo Baú, ou Lucas Viana se preferir - Button Painter Engineer há aproximadamente 4 anos - Amo funcional, meu hobby é escrever e meu prato favorito é: estrogonofe de frango mechamobau
3. O que veremos hoje? 1. TypeScript: definição e proposta - Definição de Tipos - Composição de Tipos - Manipulação de Tipos 2. Como criar um projeto TypeScript - Como funciona um projeto que utiliza o TypeScript - Exemplos utilizando TypeScript
4. 1. TypeScript: definição e proposta Quem é esse tal de TS?
5. TypeScript: definição e proposta - 1o de Outubro de 2012 (8 anos) - Anders Hejlsberg - Tipagem estática para JS
6. TypeScript: definição e proposta
7. TypeScript: definição e proposta - Type Checker - Transpilador - Documentação de Tipos
8. Downloads ~23M Downloads por semana no npm Contribuidores +600 Contribuidores totais da linguagem Adoção 2a linguagem que as pessoas mais querem usar de acordo com StackOverflow Survey 2021 TypeScript: definição e adoção
9. //Definição de Tipos Tipo assim, como defino tipos no TipoScript?
10. Definição de tipos Tipos literais
11. Definição de tipos TypeScript Haskell Tipos compostos
12. Definição de tipos
13. //Composição de Tipos Hora da fusão de tipos
14. Composição de tipos Union Intersection - Há duas formas de compor tipos em TS:
15. Composição de tipos Intersection types
16. Composição de tipos Union types
17. //Manipulação de Tipos Brincando com os Tipos criados
18. Manipulação de tipos Utility types Omit<Tipo, Chaves> Pick<Tipo, Chaves> NonNullable<Tipo> Retorna um novo tipo, sem as propriedades declaradas Retorna um novo tipo, apenas com as propriedades declaradas Retorna um tipo novo sem null ou undefined Record<Chaves,Tipo> Retorna um tipo de objeto com o mesmo tipo para a chave e para os valores E outros 15+ tipos utilitários...
19. Manipulação de tipos
20. 2. Como criar um projeto TypeScript Configuração e instalação
21. TypeScript: Configuração e instalação - Para instalar o TypeScript, existem muitas etapas de configuração. - Foque ao máximo no passo a passo - Não perca nenhum passo!
22. TypeScript: Configuração e instalação - Brincadeira 😅 É muito simples! - Para instalar o TypeScript basta instalá-lo como um pacote global
23. TypeScript: Configuração e instalação
24. TypeScript: Configuração e instalação - O tsc é o CLI que conecta o seu projeto ao compilador (e servidor) do TypeScript tsc [options] [file…] - Para iniciar um projeto TypeScript basta rodar: tsc --init
25. 3. Como criar tipos para projetos JavaScript O porquê do TypeScript ser mais que uma linguagem
26. Como criar tipos para projetos JavaScript - 8 de abril de 2016 - Salsa - Execução de tipos estáticos
27. Como criar tipos para projetos JavaScript
28. Como criar tipos para projetos JavaScript - Através do Salsa é possível definir tipos para um projeto JavaScript de duas formas: 1. JSDoc 2. Declarações de tipos (.d.ts)
29. //Como utilizar o JSDoc como sistema de tipos O que é? Pra que serve? Onde vive?
30. Como utilizar o JSDoc como sistema de tipos O que é JSDoc? É um projeto JavaScript criado com o propósito de documentar APIs de aplicações ou bibliotecas JavaScript. - @typedef - @type - @callback
31. Como utilizar o JSDoc como sistema de tipos
32. Como utilizar o JSDoc como sistema de tipos
33. Como utilizar o JSDoc como sistema de tipos
34. @typedef
35. Como utilizar o JSDoc como sistema de tipos @typedef - A tag @typedef é equivalente a uma declaração de type alias no TypeScript. - Esta tag é muito utilizada para declaração de estruturas de múltiplos campos no seu código através do @property
36. Como utilizar o JSDoc como sistema de tipos
37. Como utilizar o JSDoc como sistema de tipos
38. @type
39. Como utilizar o JSDoc como sistema de tipos @type - A tag @type é usada para definirmos o tipo de uma expressão. - Esta tag é pode ser utilizada para declaração também
40. Como utilizar o JSDoc como sistema de tipos
41. Como utilizar o JSDoc como sistema de tipos
42. @callback
43. Como utilizar o JSDoc como sistema de tipos @callback - A tag @callback é usada para definirmos o tipo de uma função junto às tags @param e @returns. - É possível também declarar funções curry
44. Como utilizar o JSDoc como sistema de tipos
45. Como utilizar o JSDoc como sistema de tipos
46. Como utilizar o JSDoc como sistema de tipos
47. Como utilizar o JSDoc como sistema de tipos
48. //Arquivos de declaração de tipos Tipos em JavaScript sem perder a facilidade
49. Arquivos de declaração de tipos - São arquivos responsáveis por criar declarações de tipos para APIs JavaScript - Através destes arquivos é possível compartilhar documentações
50. Arquivos de declaração de tipos
51. Arquivos de declaração de tipos
52. Arquivos de declaração de tipos
53. Arquivos de declaração de tipos