TypeScript, o início, de forma prática | MasterClass #07

E aí e fala deve beleza mais uma masterclass aqui para o canal e antes de a gente começar com código bom você já sabe o que que a gente vai falar nesse vídeo que é sobre typescript e esse da gente botar a mão na massa Claro que vai ser um vídeo totalmente prático eu tô com esse cenário pouquinho diferente porque eu tenho que te repassar algumas Coisinhas antes da gente iniciar porque se esse aqui é o seu primeiro contato com typescript talvez você tem aquela opinião que cara porque que estão botando tá discutindo JavaScript e

java script para ser uma coisa fácil Vamos transformar o o JavaScript no novo Java ou não sei alguma coisa assim e calma que a gente tem muito que conversar ainda porque eu tava script não é a mesma coisa do que do que as tipagens que a gente tem outras linguagens que Tenha tipagens um pouco mais fortes que quer dizer tipagem forte de pajem fraca E por aí vai a primeiramente o que que é o typescript depois a gente conversa sobre isso tá script é uma linguagem a partir do momento que o typescript pode ser executado

por um compilador de O que é sem precisar por um passar por um processo de população seja transformar ele em JavaScript de transpiração né transformar esse código JavaScript é a partir desse momento eu considero Typescript como linguagem e desde que o de no surgiu né que é o node a outra versão do node hyundawn criador do node criou o de no né que tu pegar a noite e inverter node de no E por aí vai basicamente o de no é uma versão uma nova criação do mesmo do mesmo criador do node não dá para dizer

que substitui o node 100% ainda é um projeto que eu diria que ainda está um pouco embrionário algo que tá começando a crescer agora mas se você quiser dá uma Olhadinha negativa é um projeto que consegue é ler o código tá escrito de forma direta tanto Alex wi-fi como JavaScript Então a partir desse momento eu considero o tapete linguagem partir do momento que ele pode ser interpretado por uma VM de forma direta a mais antes disso tá escrito mais basicamente era um tu 711 supersec um conjunto de funcionalidades é acionada sal nosso JavaScript tradicional que

dariam mais poder a Linguagem e também trarei algumas funcionalidades que os desenvolvedores tanto esperavam que o Java script aumentasse mas que eu já fiz que demoravam para implementar então tabstrip bem lá no comecinho ele ganhou muita fama principalmente por essa parte de conseguir implementar algumas fichas que JavaScript demoravam muito para implementar mas depois disso mesmo o depois de 2015/2016 eu já me inscrevi teve aquele bumbum na questão de Funcionalidades que ele basicamente começou a suportar async-await e trabalhar de Nossa com are functions consiste classe C por aí E por aí vai a gente teve um

monte de ações de água quente porque ainda ter typescript né porque o Como o próprio nome já diz a gente consegue ter um script tipado na tarde escrito daí vem então a gente consegue ter o nosso javscript porém com a adição das tipagens dentro do nosso código e as adições dessas tipagens elas Ajudam ou prejudicam na criação do nosso e não dá para dizer sem por cento das vezes que elas ajudam e nem dá para dizer que elas prejudicam porque isso vai de acordo muito com o seu time se ele tem tempo para estudar o

time script E também o a escala que esse projeto vai tomar Então hoje por exemplo eu defendo muito a utilização do typescript em códigos que são primeiramente open-source então código que é o prestou esse cara sem por cento dos casos vale a Pena Sater scripts porque tu vai evitar um monte de problema de código sendo injetado dentro da tua da tua biblioteca que as vezes não tem não está no formato correto e por aí vai a outra coisa projetos que vão escalar de forma gigante então projetos que precisam escala cara tá escrito é fenomenal nesses

casos porque chega um momento que o teu projeto ele tá tão grande que você não consegue mais encontrar onde está cada coisa né Por mais que você utiliza Uma estrutura comum de de por mais que esteja utilizando a melhor estrutura do mundo chega o momento que não não dá para encontrar tudo dentro do teu código principalmente o jogador novato que vai entrar na equipe e ele tem que saber onde cada código tá cara função recebe Qual parâmetro nesses casos está escrito que ajuda demais por que que eu tô falando esses casos específicos Será que tá

discutir não é legal a gente aplicar em todos os projetos sim se eu tô aqui Tem esse conhecimento esse até a equipe já tensa a produtividade com typescript sim vale a pena ficar em todos os projetos o que que eu acho e dando uma opinião bem real aqui agora se a tua equipe não tem conhecimento básico em typescript tu pegar um projeto que tu vai jogar lá dentro com tapescript vai piorar Braz ticamente a produtividade deles isso a gente tentou fazer aqui na Rocket quando o time não tinha conhecimento contato que a gente falou Vamos

devolver a nova versão dos que elétrica Nossa plataforma usando está escrito que a gente coloca acabou é penando em uns problemas que eu tava script acabou dando para a gente ir lá principalmente integrado com o iett que cara a gente ficou assim ó 2 3 dias tentando resolver um problema e ninguém tinha muito conhecimento e acabou que nossa piorou muito a nossa produtividade a Diego Mas isso pode acontecer com a ferramenta sim pode acontecer com Qualquer ferramenta mas o caso tá escrito Ele dá muita essa visão que é só uma coisinha mais que a gente

vai sonhar mas não é a gente tem que pensar que basicamente quase que a gente tá a trocando de linguagem né a gente continua muito assim táxi do JavaScript mas a gente vai tomar muita coisa de tipagem ali dentro Diego Então você tá querendo me dizer que eu acabei de aprender JavaScript vou ter que aprender uma linguagem nova typescript não tu não Vai ter que aprender uma linguagem nova que eu falei é totalmente reaproveitado entre JavaScript e typescript até em projetos typescript Às vezes tem algum arquivo lá que não tá conseguindo adicionar tipagem consegue botar

o arquivo java script no meio do projeto escrito não que seja recomendado mas dá para fazer muita coisa então o typescript eu acho que algo mais de evolução quando você tá querendo a partir para o próximo nível para um Desses casos que eu tinha falado um projeto que ele vai instalar drasticamente ou um projeto open-source Eu por exemplo aprendi aprendi a gripe desenvolvendo projetos open-source ou contribuindo em projetos que são já existentes então eu falei basicamente então o que que eu tapo tipo de é para que ele funciona deixa eu ver minha colinha aqui falei

também se vale a pena utilizar em todo o projeto e agora a gente vai para a parte Prática então se você deixa eu dar uma resumida de tudo isso que eu falei typescript basicamente adicionar tipagem dentro do nosso JavaScript tradicional tipagem se você não sabe o que é é quando você a Tem uma função e ela recebe um parâmetro você específica Qual que é o tipo disparamos ele é um campo de texto se ele é um campo numérico sem objeto esse objeto se ele for um objeto qual que é o formato desse objeto a essa

função aqui ela recebe um usuário Tá bom Mas esse usuário Que propriedades que ele tem ele tem nome e-mail e de por aí vai então tá escrito ele meio que força isso no nosso código mas tem umas coisinhas bem legais que a gente vai falar ainda dentro desse vídeo por exemplo o esquema de inferência de tipos o site script que meio que evita a gente desnecessariamente colocar tipos de variáveis que não precisam ser tipados porque o próprio editor já consegue entender o tipo dessas variáveis a gente Vai falar sobre isso aí isso um negócio muito

legal também que é por que que eu vou usar typescript Qual que é o resultado final o resultado final ele vende ele vai muito ao encontro com a produtividade dos programadores dentro do teu projeto techfit ele não tem um resultado comprovado na questão por exemplo da performance da aplicação no final das contas a ou depois que aplicação já leva a produção até tico-tico no mundo nada porque nesse Caso ele vai ser convertido para Java scripts né rodando no pé quente no front aí também porque o browser não entendi tá difícil ainda aí Se você tiver

utilizando node no pé quente você também vai ter converter para java script A então o ganho que a gente tem utilizando typescript é no processo de desenvolvimento com a nossa ideia é que a gente está utilizando por exemplo visual Studio code o vim tem integração também sublime-text por aí vai a gente Consegue integrar nossa ideia é interface envolvimento junto com o typescript para facilitar o processo do desenvolvedor para encontrar funções saber quais pagamento ela recebe e qual o retorno dessas funções e por aí vai então isso é meio que uma mão na Bom dia provedor

saber exatamente como trabalhar dentro do teu projeto então às vezes vou ver dor ali que mal começou na sua empresa pega o projeto muito grande ele vai povo chamar essa função aqui Clara Mas eu vou enviar história mas para ela mas eu não sei se é esse tipo de parando que ela recebe então isso parece uma coisa tola né Assim como por exemplo o testes automatizados quando o projeto é pequeno parece tolo a gente comentar isso então eu comparo muito satisfeito com essa parte de testes automatizados quando a gente começa os movimentos a gente fala

não faz sentido eu falava muito isso E aí conforme foi passando o tempo foi passando o tempo conforme fui Usando meus projetos eu cara eu falei nossa eu preciso usar tá escrito em todos os meus próximos projetos porque eu não consigo mais viver sem né Eu acho que estava escrito que ele seria a minha ferramenta top um que utilizo no meu dia a dia e Eu praticamente não crio não criava muito conteúdo sobre né Eu tô querendo alguns vídeos aí sobre a descriptive tá entrevistava está entrando typescript também agora no bootcamp então tem a muita

coisa que ele Tá mudando porque é é uma linguagem A Ascensão eu acho que a curva de aprendizado para quem já trabalha com JavaScript é pequeno ainda a gente pode comprar que é pequena é comparado com o curva de aprendizado de outras linguagens que tem a tipagem mais forte e a gente tira muito proveito disso quando a gente ganha uma produtividade com tá escrito e a tua reação que não tava escrito de vocês esse é o primeiro contato com tá porque ultimamente ela Não vai ser uma reação tão boa tá você é bem sincera eu

vou tentar transformar esse esse tutorial essa aula prática no mais amigável possível para você vou te mostrar as ferramentas que vão tornar o tá discutir extremamente simples mas mesmo assim não vai ser Talvez tu ainda fica opinião nesse vídeo de cara Eu ainda acho que eu já vi escape com tipagem dinâmica funciona melhor porque se não Valeria mais a pena usar o Java mas eu espero que com o tempo essa tua Opinião mude como a minha mudou e como vários outros deves que eu sei que conhece o Trip passaram por esse caminho não gosto muito

bem parece que faz sentido alguns em algumas aplicações e meu Deus não consigo mais viver bom então bora lá Bora para aula prática eu falei isso aqui no vídeo totalmente prática a gente vai começar envolvendo projeto com node integrando typescript e depois até pegar esse projeto novo de integrar com projeto Muriqui também Usando typescript pra gente aprender os Altares curtindo todas as pontas desde o backend com o front-end Então bora bora para o projeto prático aqui agora então eu já tô até com a documentação dos apps script pronta a para gente revisitar alguns conceitos conforme

a gente for passando aqui por dentro do código a eu vou fazer o seguinte vou começar criando aqui uma pastinha chamada Master Class typescript entrando dentro dela nós vamos criar aqui o backend Vamos começar Com uma quente da aplicação a aqui a gente vai iniciar um projeto da mesma forma que a gente inicia um projeto Java scrit Então vão inicializar o gerenciador de pacotes eu tô usando earnings for npm npm init tanto faz ó e aqui eu vou começar adicionando como dependência de desenvolvimento ou typescript só que legal por mais que a gente tem o

tá escrito de forma global que é para documentação no teto script às vezes recomenda que quando a gente For no deck Starter deixa eu ver se tem lugar no Stories aqui olha ele mostra a gente está outro tipo de forma global é legal também mas eu gosto de instalar o tep para cada projeto porque assim a gente consegue fixar Qual que é a versão do SESC que aquele projeto tá utilizando porque cada versão tá escrito pode ter às vezes funcionamento um pouquinho diferente sem alguma em alguma funcionalidade específica a agora aqui dentro que a Gente

já tem tudo isso instalado eu vou abrindo o visual Studio code esse projeto e a gente vai conversar que nem um servidor com Express tradicional como a gente faria com o JavaScript eu vou criar a acionar ou Express aqui dentro e agora vou começar a criar uma paciência RC e dentro dela Windows. PS não é igual a gente não vai usar JS porque nós JavaScript e sim typescript tranquilo agora aqui dentro a gente pode importar o Express E aí uma das coisas mais Legais do typescript que a gente consegue utilizar todas as features mais recentes

da linguagem dos jovens crentes em geral a aqui dentro e depois porque a gente vai transformar a gente vai converter esse código para o código JavaScript que é entendível pelo browser que é entendível pelo novo e por aí vai então por exemplo eu posso utilizar importe que é uma das fitas que o molde Ainda não implementou por JavaScript tradicional pelo menos não até a sua Versão 13 né então na versão estável que tá hoje que a 12 no meu caso no momento que eu tô gravando esse vídeo a gente ainda não tem suporte ao importa

então aqui a gente simplesmente pode usar num importe importar lado Express então se você lembra do que a gente falou lá no comecinho desse vídeo dos motivos que o que ficou famoso e tudo mais uma das coisas é porque ele permite a gente utilizar os recursos mais a esperados da linguagem e que eu já disse que demorava Muito para implementar então isso aqui meio que fez é bastante né O que manthey Verde no mercado com certeza foi o poder da tipagem e agora eu vou criar aqui o nosso ep como a gente sempre faz e

é ponto lista 3333 mas espera aí eu não sei se tu percebeu aqui enquanto que eu digitava que eu escrevi ap. E aqui eu dei contra o espaço para carregar a tipagem e não veio nada cadê né não se a gente fizer com JavaScript vai estar aqui a tipagem vamos lá e eu vou Explicar os motivos disso tudo para que não fique uma informação aí um telefone sem fio primeira coisa quando a gente utiliza o typescript as bibliotecas precisam também expor as suas tipagens são essas tipagens das bibliotecas que permitem que a gente faça por

exemplo up.edu contra o espaço e obtém a lista de métodos ou variáveis respostas dentro de si ep Beleza então o Express ele precisa expor a sua tipagem a tipagem é Basicamente o Express falar para assar o utilizam ele como dependência todas as funções que ele tem os parâmetros que elas recebem o retorno dessas funções por exemplo a função Listen naquele é porque a gente não tá encontrando E aí essas bibliotecas ou Como por exemplo o próprio Express Elas têm duas grandes alternativas para fazer isso a primeira alternativa é colocando essas tipagens junto juntas da própria

biblioteca do Express Então se o Express tiver tivesse As suas tipagens é junto com o restante da biblioteca do Express a gente já conseguiria ver aqui todo os competições né todo o intellisense da prova do próprio vs code mas existe uma outra alternativa que pode ser utilizado por essas bibliotecas que é ter dois pacotes o pacote com a funcionalidade e um pacote só com as tipagens que é o que o Express seguiu de existe um certo eu botar tudo numa coisa só botar é separado não a comunidade não chegou Definir qual que é o modelo

mais a ideal Mas o que eu vejo na maioria das bibliotecas é separando em dois pacote o pacote com código e o pacote só com a tipagem só com a parte do time Street E aí como que a gente consegue identificar esses casos tá vendo que quando a gente foi fez a importação do Express ficou esses essa reticência cinza que baixo do do da aspas e quando a gente passa o mouse por cima tá escrito que o do not fine declarations On Fire for mod Express isso aqui basicamente tá querendo dizer eu não encontrei a

tipagem né o arquivo de declaração de tipos para o módulo Express E aí ele já dá até para gente uma instrução de como instalar essa declaração de tipos tá aqui ó trai npm install yarn and@types/Express caso você queira fazer a instalação Então a gente vai dar um early red@types/Express como dependência de desenvolvimento porque a gente não vai Precisar isso aqui em produção porque produção nem tem código tá escrito que é só já de escape e agora a gente viu que saiu Ale o erro né E se a gente volta aqui no ap. Eu dou um

contra o espaço tá lá todas as nossas definições de tipos de m por quê que isso funciona por Padre e tu já vem escrito aqui dentro do visual Studio code porque se eu usar já vez que ele tiver aqui simplesmente dá nem instalar esse táxi Express e só dá um up ponto e dá um contra o espaço ele Vai ter todos esses métodos para mim porque aí o visual Studio code faz o trabalho pesado para ti quando a gente usa o Java script com visual Studio code e ele percebe que uma biblioteca não tem a

definição de tipos junto com ela ele vai lá por baixo dos panos e tenta fazer instalação desse arroba tax Express e expor esses tipos para gente de forma automática então visual Studio code é fantástico início e por isso que na minha opinião foi por isso que ele Tornou aí não se tornou o editor mais utilizado de forma global para os movimentos JavaScript tá escrito por aí vai por essa facilidade por essa inteligência que ele tem por baixo dos panos Beleza a gente vai continuar aqui agora com os movimentos Nossa aplicação aqui agora eu posso começar

a declarando as nossas rotas da maneira que eu já fazia então é ponto get aqui a gente usa o rack o és a gente dá um oi torne has pontos and hello world E a gente salva isso aqui agora e eu posso rodar o meu servidor né então eu venho aqui node src ing.es Claro que não né o nosso Arquivo ele é typescript New node por padrão ele não consegue entender typescript então todas essas funcionalidades como por exemplo importe ou a definição de tipos que a gente foram acionar Nossa na nossa aplicação o node por

si só ele não vai conseguir entender a gente precisa converter esse código de typescript por Um código JavaScript então para isso a gente pode utilizar uma ferramenta que foi acionada no nosso projeto no momento que a gente instalou aquela dependência do typescript aqui ó Então se a gente abrir aqui em Gold Once enviar dentro do repositório Bean a gente vai ver que tem esse carinha chamado PSC então é basicamente ao tá escrito e conversa gente vai converter o nosso código então eu yarn PSC e a pasta que está o nosso arquivo src index.pl se que

que ele vai Fazer ele vai converter esse nosso arquivo ing.es para um arquivo o ponto JS Beleza então a gente pode ver aqui ó que ele já tem o arquivo ainda que. JS totalmente convertido para Java scrip aquele deu esse erro no terminal basicamente se a gente for Lê porque o Express por padrão ele faz um default Export então quando a gente tem a biblioteca que faz EcoSport the full ele fala aqui que a gente tem que ter essa Flag chamada e esse módulo interruptor Ou seja uma configuração que a gente tem que fazer nosso

typescript por padrão o typescript ele não transforma esse Export default como sendo a aqui ó tá vendo aquele tenta importar esse depois ele não consegue interpretar isso por padrão então a gente teria que no nosso código fazer mais ou menos algo assim ó para conseguir utilizar o teste clips E aí eu vou daria yarn tsc src index.pl se E aí sim aqui no nosso JS a gente pode ver aquele tirou né importou da da Maneira correta E aí para eu rodar isso aqui eu só dou node.js agora não bom né porque é o arquivo JavaScript

E aí eu posso em frente usar que a nossa aplicação da maneira que a gente utilizariam JavaScript tradicional e agora então vamos falar sobre essas configurações ou tá escrito que eu falei anteriormente para conseguir por exemplo interpretar as é interpretar esse The full E por aí vai tem várias outras configurações que A gente consegue fazer basicamente aqui dentro eu vou dar yarn PSC traço traço rinite beleza ele vai criar aqui para gente um arquivo de configuração chamada TS config ponto de Jason com algumas configurações apresentadas por exemplo US móvel interop que permite a gente fazer

a importação do The full lá na então agora se eu tirar aqui ó isso aqui a gente pode ver alguém conseguir Ele tava dando erro porque porque o visual Studio code e ele automaticamente ele lê STS consegui ponto de Jason e aquele já começou a dar os erros para gente ó ele falou que o Express aqui nesse caso ele não tem como você chamar viu né porque eu não estou dessa forma mais importando de volta dia que você dessa forma e ele já tira todos os erros e aí sim rodando aqui o PSC ainda que.

TS eu vou ver aqui agora ele vai rodar sem nenhum tipo de erro na verdade aquele rodou ainda com o erro Porque pessoalmente ele não tá pegando as configurações então eu vou Ter que rodar aí a ntsc um passando o arquivo de configuração para rodar agora usando as configurações na verdade que a gente acabou de criar eu só roda e arn tsc E aí ele já automaticamente vai ler o arquivo ter essa config ponto de Jason e vai girar os arquivos que são necessários aqui a gente pode ver que ele rodou e gerou ainda que.

JS para gente aqui tem algumas diferenças basicamente isso aqui foi porque a gente colocou aquele esse módulo interop então Ele faz essa criação de se importa é full age não precisa ficar preocupado com nada que tá escrito dentro desse Arquivo ele vai executar da mesma forma e aqui no teste consigo dieizon a gente tem muitas e muitas e muitas configurações Quais são as configurações mais importantes para gente agora a primeira delas é o Valdir que é basicamente aonde que vão ficar onde vai ficar o código transpilado Nossa aplicação porque não é legal deixar ele Junto

com a pasta s bom então geralmente eu gosto de botar numa folder não é uma pracinha chamada desse neobuild ou alguma coisa assim então eu vou salvar isso aqui deleto o arquivo JS e vou rodar agora e arn TSE novamente e a gente vai ver que ele vai criar uma pastinha chamada deste agora que aonde A pasta é a pasta que vai conter o nosso código compilado Beleza agora aqui tem várias e várias outras aqui configurações a gente não vai lidar com Nenhuma delas agora deixa eu ver se tem alguma importante aqui não tem nenhuma

importante tão importante agora né Ah beleza agora a gente aprendeu sobre o processo aqui de compilar o nosso código mas concorda comigo que isso fica extremamente chato a gente ficar toda vez que tiver uma nova alteração no arquivo tem que ficar gerando abriu para então ficar visualizando o navegador o resultado daquilo e por aí vai então isso é um processo bem chato então a Gente vai criar um fluxo de desenvolvimento agora para conseguir fazer esse processo de uma maneira mais rápida mais performática e que a gente consiga ter o feedback em tempo real então existem

maneiras inúmeras na inúmeras maneiras e da gente ter esse resultado que eu tô querendo te mostrar que é manter apenas arquivos tá cscript e consegui meio que compilar eles em tempo real enquanto a gente tá salvando o arquivo para ele inicializar o Servidor EA gente já tem esse feedback dentro navegador lá dentro do node padrão com S6 tudo mais a gente usa o nome é o nono toda vez que ele verifica alguma alteração ele vai lá Restart o servidor E aí até se você utiliza o node com as funcionalidades mais recentes da linguagem você ainda

deve utilizar ou um Babel por exemplo para converter essas é o async-await as coisas assim o importe para uma versão um pouquinho mais antiga que o que o longe entende ou até uma Outra biblioteca Como por exemplo o sucrase que eu acho uma biblioteca fantástica para fazer um ambiente e desenvolvimento extremamente rápido né então o seu Crazy é uma alternativa muito legal eu hoje eu não vou estar utilizando os Crazy porque o seu Crazy ele é uma alternativa muito bacana quando a gente vai utilizar typescript nos nossos projetos porém o surpresa ele Ah entendi uma

das funcionalidades do typescript que está crescendo bastante Isso não automaticamente exclui os Crazy se você não tiver utilizando essa funcionalidade que eu vou falar agora não tem problema nenhum você pode continuar utilizando os Crazy essa funcionalidade do typescript que é muito legal e que a gente não vai conseguir utilizar junto com o próprio Crazy tá aqui dentro a gente pode ver que ele fala aqui ó a support the syntax que são os decorators Beleza então os decorators dentro do typescript são um basicamente Uma funcionalidade que permite a gente alterar o funcionamento de uma classe ou

até de uma função ou até de uma variável é utilizando uma sintáxi muito bacana então aqui a gente pode ver se ele tem de corretores aqui deixa eu ver se eu consigo procurar decorators a beleza de The Creator aqui os leitores então a gente pode ver que é um de Cleiton quando ele tem esse arroba na frente então quando a gente tem por exemplo uma e em cima dela a gente tem arroba e Alguma outra coisa a gente basicamente está alterando a funcionalidade daquela função com um de correto a gente dá decorando aquela função e

pode ser um decorador de classe e posição de cobertor de função ou pode ser até um The Creator de uma de uma variável Deixa eu ver se eu acho um exemplo aqui aqui não aqui também não aqui também não aqui também não E por aí vai mas basicamente a funcionalidade de corretores a gente Vai usar muito por exemplo com o RM esfeitos do tá escrito por exemplo taipu-rn que é um RM muito Fantástico criado especificamente principalmente prático tchau até a Roda com JavaScript mais contato com ele fica muito legal a gente pode ver aqui ó

como ele usa as entidades Olha só tudo com de corretores então ele especifica que essa coluna aí de é uma coluna Premiere né uma primer colo né uma coluna primária no banco de dados e ela é automaticamente gerada né Então ela um alto incremental 123 bom então a gente bota esse arroba em cima Isso aqui é uma coluna do banco alunos vai poder vai então assim várias bibliotecas que integram muito bem contato escolha que utilizam esse padrão de usar decorators é uma sim táxi que eu não gostava tanto antes mas eu tô me acostumando cada

vez mais a utilizar porque ela acelera muito o processo de utilização de algumas bibliotecas Mas voltando eu já dei o contexto toda a Gente saiu do contexto qualquer Líder que a gente vai utilizar no lugar do Sul Crazy toda vez que a gente for utilizar decorators a gente vai utilizar no ts-node-dev Diego é tão rápido quanto os quase não mas ele chega lá é bem próximo esse ts-node-dev a gente pode instalar ele utilizando o próprio yarn então e ai L que é sinal deve como a dependência de desenvolvimento e aí a gente vai rodar os

nossos escritos utilizando o ts-node-dev ao invés de utilizar o Próprio node então aqui no nosso pecas.de Jason nós podemos ter um script e de desenvolvimento beleza Geralmente eu chamo assim o dev-server Né o servidor de desenvolvimento e a gente vai rodar com ts-node-dev beleza aqui a gente vai passar essas frases aqui ó respon e transpiron beleza por quê que a gente vai passar Essas flores aqui outros payone é basicamente porque eu não quero verificar se o código tá escrito aqui Dentro tá certo eu quero só transpilar eu quero só converter para Java scrip porque verificar

que o código Tá certo isso a gente já vai fazer com o próprio visual Studio code então ele já avisa para gente ó se a gente é alguma coisa e já avisa para gente que o código não tá certo sem mesmo TS Link ou qualquer coisa que dentro agora para compilar para converter esse código JavaScript envolvimento isso aqui verificasse código Tá certo acaba sendo muito Gostoso Então a gente vai só transpilar e aqui eu passo qualquer arquivo então src e ainda que ponto tá escrito E aí o rodo yarn deve ser ver aí ele já

rodou o nosso arquivo aqui eu posso acessá-lo com arroz 3333 que vai estar funcionando uma outra coisa voltando aqui alterando esse Alô Word para qualquer outra coisa a gente volta aqui e ele já vai estar alterado Então a partir do momento que eu estou utilizando o ts-node-dev eu não preciso também Utilizar o nó bom que a gente utilizava anteriormente eu posso utilizar só ele a gente pode ver que é bem rápido mesmo eu faço as alterações aqui ó e ele já cumpriu de uma maneira bem rápido então o ts-node-dev Wilson Crazy hoje são as minhas

na principais alternativas quando eu tô desenvolvendo conosco Beleza a gente falou aqui sobre o teste no deve nosso servidor já tá rodando e agora sim a gente vai entrar cada vez mais a fundo no typescript e sim então a gente falou De muitas coisas até agora mas a gente não falou sobre o typescript aplicado ao código ainda é muito né então a gente tem que entrar nisso para continuar dando aqui para dar continuidade à nossa aula então lá o tá script basicamente o valor desde o início desse vídeo ele adiciona a tipagem no JavaScript Diego

isso quer dizer que toda variável colocar aqui dentro do já vez que ela vai ter que ter um tipo específico sim ela precisa ter um tipo agora eu preciso Informar esse tipo toda vez não não És toda vez que tu vai ter que informar esse tipo porque a gente tem um conceito aqui dentro tá escrito que funciona muito bem que se chama inferência de tipos isso quer dizer que o typescript na grande maioria das vezes ele vai conseguir determinar de forma automática o tipo de variáveis e o tipo de retorno de funções por exemplo Imagine

que a gente tenha uma função essa função aqui ela se chama get user name beleza e ela Retorna O username que é Diego 3G Qual que é o retorno dessa função Qual que é o tipo do retorno dessa função se a gente olhar aqui como desenvolvedor a gente sabe que o tipo dessa função aqui o retorno dela é mais swing né eu tô retornando um texto e o táxi que ele também consegue definir isso de forma inteligente de forma automática então se ele a variável chamada your name que é igual a Guetta your name e

a gente passar o mouse aqui por cima de Insolente eu posso ver que ele automaticamente e falou que o usar name é uma string né porque ele sabe aqui que o retorno da minha função é uma string então ele faz isso de forma automática por isso a inferência de tipos se eu passe o mouse aqui por cima do Get your name eu posso ver uma função EA tsunami que retorna uma string então se eu fosse fazer isso de uma forma mais hard code netpage mais forte eu teria que voltar aqui o dois pontos isso em

ele até não Acusa erro né ele deixa eu colocar isso eu tô botando um código meio desnecessário aqui nesse primeiro momento né mas então eu tô retornando mais ruim daqui de dentro e aí eu não conseguia por exemplo retornar três né que eu tá vendo que ele deu erro né porque três não é mais swing aí sim eu boto três Aí sim ele vai retornar isso aqui só contar scripts em integração com o slint ainda Beleza então vamos lá agora a gente já aprendeu um pouquinho Sobre tipagem e sobre inferência de tipos Isso quer dizer

também que se eu declarasse uma vai o Diego 3G eu não precisaria declarar que ela é uma string eu declaro apenas a variável em cima agora tem casos que a inferência de tipos ela não vai conseguir acontecer de forma automática né onde que a gente pode ver a inferência de tipos aplicadas a aplicada aqui nesse arquivo ing.es o próprio Express Então tá vendo essas variáveis rake and has como é que o Typescript sabe que essa variável rec-has tem esses métodos aqui dentro né se a gente aparece rack. Ele já vai dar todos esses métodos aqui

para gente isso porque Naty página na definição de tipagem do táxi colete ele inclui informações falando que toda vez que a gente tiver um método Guetta assim a função que a gente passa como segundo parâmetro para esse método aqui tem um rack e um risco com o com o rack sendo um we question you has sendo um response Beleza como é que eu faço para ver essa definição de tipos de a hora que eu falei que a Biblioteca ela expõe uma definição de tipos o do Express a gente até instalou essa definição de tipos dando

o yarn é@types/Express Lembra aonde que fica né aqui no vs code se a gente apertar control comandos dentro do MEC e clicar em um dos métodos do Express por exemplo esse método get e o der um clique aqui em cima eu vou ver aquele abre esse Arquivo aqui chamado Type definition deixa eu dar um dois cliques aqui em cima ele vai abrir isso aqui em outro em outra em outra vim aqui e aqui dentro desse aqui vou tenho toda a definição de tipos do Express claro que só que é muito confuso isso aqui é o

algo gerado de forma automática mas aqui dentro eu consigo ver todos os métodos do Express por exemplo eu sei que aqui na parte de roteamento do Express Eu tenho um método get que é esse método que eu estou Utilizando aqui o método get E aí qual que é o tipo de cimento do Gueto ele é um if other Hand we geralmente significa que é uma interface no typescript Então esse if e ele espere copia tudo o que que tem aqui do ver quais render e aqui a gente já vai encontrar URI Quest render ele recebe

o rack o has you next Beleza então Aqui tem muita informação e só que é muito difícil entender e a gente não não vai precisar entender tudo isso aqui mas isso aqui ajuda bastante Na hora que a gente for entender os erros né gente passou às vezes alguma coisa aqui com por exemplo se a gente passar se ao invés de uma esfinge aqui um número ele já ia retornar erro pra gente porque não tem como esse número aqui se convertido em uma url lá em cima né então isso aqui já vai ajudar a gente bastante

Então essa inferência de tipos ela existe também para as bibliotecas Mas como eu falei tem casos aqui dentro do tax free pq a inferência de tipos não Vai conseguir acontecer de forma automática então por exemplo Imagine que eu esteja separando as minhas rotas em outro arquivo então house.es e aqui eu vou importar o holter de dentro do próprio Express E aí uma coisa que a gente faz muito dentro da uma das aplicações é separar em controllers né então aqui eu vou criar o meu brother vou vou exportar ele aqui de dentro por enquanto a gente

só tem essa rota Gates Então deixa eu colocar ele aqui dentro Rose. Beto beleza e aí eu vou importar essas rotas aqui dentro então importa o out from roads EA que a gente faz é ponto News rosto acho que isso aqui já todo mundo que mexer com Express já tá acostumada a fazer não nosso servidor Continua secondary sem problema nenhum E aí o que é que a gente faz a geralmente nas nossas aplicações que seguem um fluxo mvc é criar controllers né Para a gente a receber a requisição e depois consegui retornar uma resposta Então

Imagina que eu tenho um controle de usuário né E usercontroller que eu vou estar todos os meus usuários aqui eu queria como JS ao vício né aqui dentro eu vou criar um controle Esse controle pode ser uma classe pode ser um objeto e por aí vai vão criar ali um formato de objeto aqui bem simples mesmo então Export levou a aqui eu vou ter uma lista de usuário a lista de usuários totalmente fictícia Claro a usuário nome Diego e e-mail Diego@Rock City ponta do pé até aí tudo bem a gente vem aqui dentro agora e

a gente vai ter um método a index que é para fazer a listagem desses usuários E aí a gente vai ter o rack press beleza e aí eu vou retornar o resto. Jason todos os usuários Eita que a gente já pode perceber que deu um monte de problema então o rack e Wesley estão sublinhados aqui em vermelho e basicamente eles falam Power rack in Place has and Type o quê que isso quer dizer ele não Conseguiu determinar automaticamente Qual que é o tipo desse parâmetro rack e o tipo desse parâmetro has porque em nenhum momento

desse arquivo aqui eu faço a importação do Express né ou eu utilizo o método do Express aqui dentro por exemplo não estou mais utilizando agora que ele é ponto Beto F. Post aquilo lá era o que faz a diferença de tipos era aquilo lá que determinava qual que era o tipo desse rack E deste resto então quando eu vou utilizar Essas variáveis de fora de um arquivo de um outro arquivo né quando eu vou utilizar essas variáveis aqui fora o que que eu vou ter que fazer eu vou ter que importar de dentro do Express

a definição de tipos do Oeste e do response né então agora eu vou falar que o rack aqui é o mal cresce e cresce é uma responsa e agora a partir desse momento que eu escrevo o rake. Eu já tenho todo o acesso aos métodos e variáveis contidas dentro aqui da minha West Diego como é que tu descobriu que tu tinha que importar o Quest aqui de dentro do Express Olha só se a gente voltar lá no index passar lá na rota aqui agora né passar o mouse em cima desse rack aqui olha só qualquer

Deixa eu botar aqui com o controle junto Olha só Qual que é o nome é que é o da tipagem dele request então é provavelmente Esse é o nome aqui que a gente vai ter que importar dentro do controle o que que eu não com é dessa Forma que eu tô te mostrando aqui aí a gente vai ter que recorrer para documentação da que se presta a procurar por exemplo na internet tal não tem muito como fazer né a gente vai ter que aprendendo com o tempo isso aqui a maioria das coisas eu meio que

já decorei assim eu vou consultar principalmente projetos mais antigos para ver como que é Ah então beleza agora neste controle aqui eu posso vir aqui nas minhas rotas criar uma rota Chamada user se né que vai estar todos os lares E aí eu vou importar o meu Controller e os Controller from Controller/usar controles botar aqui em cima e aí eu vou usar o método Visa controlar. Index show de bola podemos salvar isso aqui agora voltamos aqui no Google Chrome acessamos a rota/users e aí eu vou ter todos os meus usuários aqui dentro a beleza a

gente encontrou mais um caso aqui então mais uma utilidade Concept Script aqui é esse caso aqui nesse caso aqui se a gente fosse utilizar no JavaScript o no JavaScript a gente teria dificuldade para conseguir te para essas variáveis a utilizar o dia Xbox né que é aquela documentação assim ó que vai na frente né e aqui a gente gostaria que ela é do tipo ver qual é essa E por aí vai então não fica muito legal daí nesse caso eu prefiro utilizar o tá escrito aqui para dar a definição de tipos de cada uma dessas

variáveis aqui beleza Vamos continuar com a nossa aplicação que a gente tá aprendendo muita coisa bacana Bora lá agora então a gente vai entrar um pouquinho mais a fundo no typescript entender alguns casos que a gente também vai ter que declarar a tipagem de alguma variável mas essa variável não é algo simples exportados por uma outra biblioteca a gente vai ter que nós mesmos declararmos Qual que é o formato dessa variável utilizando os tipos nativos do próprio JavaScript da Própria de página que do typescript então agora vamos supor que nós temos aqui uma pastinha chamada

Services com alguns arquivos que são serviços Nossa aplicação por exemplo arquivos que vão Enviar e-mail integrações com outras bibliotecas Então pensa que a gente tem um serviço a chamado e-mail service in e esse e-mail service aqui Eu geralmente dentro tá escrito que a gente utiliza muito classe né então a classe uma forma muito legal da gente representar essas Unidades de serviço até os controllers entidades E por aí vai então muitas vezes em projetos typescript a que utiliza a programação orientada a objeto vai encontrar muito a utilização de classes né A então a gente vai aqui

o utilizar uma classe chamada e-mail service Beleza a gente vai exportar por padrão essa Classe A ó e aqui vamos utilizar a pode ser não sei se a gente está alguma coisa vou Fazer um fake meio aqui na a gente não vai realmente enviar o e-mail então aqui a gente tem uma função nós vamos criar uma função chamada send mail beleza e aí aqui essa função sendo meu ela vai enviar o e-mail então aqui eu vou dar simplesmente um com seu login e-mail enviado E aí a gente quer que essa função sendemail aqui ela receba

os dados do destinatário então eu vou botar tu e os dados da mensagem né que é os dados para o assunto da mensagem ao Assunto do e-mail o corpo do e-mail E por aí vai e aqui a gente já pode ver que ele sinalizou que tanto o quanto o Messenger Eles não estão com seus tipos definidos Então a gente vai ter que definir então urso aqui eu quero que ele seja um objeto que tenha nome e e-mail para quem que eu vou enviar então quando a gente vai declarar é um parâmetro como sendo do tipo

objeto na maioria das vezes dentro tá escrito que a gente usa um carinho é chamado interface EA que Poderia serotype também Mas deixo aqui um pouquinho mais para frente então aqui na interface aqui a gente pode utilizar as duas formas né Tem muitas vezes técnicas que utiliza o padrão de toda a interface começar com o i maiúsculo então por exemplo aqui o chamaria de ir Amei How to make a pra quem vai receber a mensagem e uma Interface para nossa Messenger e-mail Messenger não é tão se faz o nome aqui exatamente só começar Com oe

porque é uma interface isso aqui é obrigatório não isso aqui é o uso nos meus projetos na maioria não eu não é realmente eu não prefixo com essa letra aí mas é legal pra gente entender quando é uma interface quando não é Beleza então aqui eu quero falar que o meu tio ele vai ter um nome esse nome é mais ruim né isso aqui é um objeto um nome estranho e ele vai ter um e-mail que também é uma string beleza e agora É só imprimir eu coloco: e-mail to beleza a Ai meu Deus um

fundo yaki-house Portuguesa e aqui na nossa mensagem a mensagem ela vai ter uma subject que é o assunto da mensagem e ela vai ter um conteúdo eu vou chamar de Bori tranquilo e ela pode ter também anexos Então vou chamar aqui de ataque mesmo este ataque muito não é obrigatório pode ser que tenha pode ser que não tenha Então nesse caso você coloca um ponto de interrogação antes Aqui dos dois pontos E aí esse attachment aqui ele vai ser vários arquivos eu não tenho o formato desses arquivos ainda então vou a vou pensar que eles

são estranhos né então vou botar aqui a uma isso em só que são vários ataques então é uma Rei então tem duas formas de representar um Array aqui no typescript a primeira delas é colocando assim a rei e aí passando com essa sinal de menor e maior um parâmetro que é qual é o tipo do valor armazenado endereço r e o outro formato que eu acho Bem mais estiloso que é simplesmente colocando S colchetes aqui no final esse corte aqui gente não vai usar consegui usar para todos os casos mas a maioria deles vai funcionar

bem e agora eu passo em frente aqui e ai legal Matters beleza e agora eu posso usar essas informações aqui dentro então e-mail enviado para ó e aqui vamos fazer um tempo aí a esfinge Vamos colocar aqui tu ponto e agora a gente pode ver que no momento que escrevo tu escreveu o ponto e bom com Três passos ele já pega entendendo que o meu destinatário tem e-mail e nome né porque o definir o tipo dele aqui isso aqui é sensacional então enviado para nome aí Aqui a gente vai colocar Qual que é a câmera

então Messi ponto mesma coisa ele já retorna aqui ó os campos que a gente tem então sub beleza a vamos salvar isso aqui agora e agora lá dentro do nosso ISO controlar Imagine que toda vez que a gente for cadastrar um usuário dentro da nossa aplicação ele vai Receber um e-mail então aqui de dentro do controle eu vou disparar o meu service de e-mail vamos supor que seja esse o funcionamento então aqui eu vou importar de dentro de Services/e-mail service eu vou declarar esse e-mail service aqui dentro com é meio service é igual a nyu

é melhor se e aqui eu vou dar uma lei o service. Sendo meu e agora é simplesmente chamar essa função dessa forma aqui a gente pode ver que ele vai retornar erro isso é o typescript nos Avisando que essa função aqui ela tem parâmetros que são obrigatórios que não estão sendo preenchidos outra coisa que eu não falei é que a gente também consegue fazer a parâmetros não obrigatória a gente vai ver um pouquinho mais para frente como funciona isso e como fica legal então aqui sendo meio eu dou um contra o espaço e eu aquele

não vai falar exatamente mas como que eu posso fazer eu passo o mouse em cima do sendo meio aqui e ele já fala que ela Está esperando dois argumentos mas você não passou nenhum né então aqui já fala qual que é o tipo dos argumentos né então se eu clico contra o e clica aqui em cima também eu posso ver qual que é o tipo dos meus argumentos aqui em cima então o primeiro é um objeto e recebe nome é melhor ele já deu aqui automaticamente para mim então nome Diego Fernandes e qualquer outro e-mail

[email protected] ó e aqui não compra espaço aqui na Verdade não vai retornar bota um objeto contra o espaço e eu já posso ver que eu tenho que enviar sempre bem-vindo ao sistema e eu preciso enviar também o Bari e a partir do momento que eu boto o baile aqui dentro eu posso ver aquele já pare de retornar o erro não precisa nem colocar os ataques mas porque os ataques né são é algo totalmente opcional Beleza a gente dá um seja aqui agora a e agora que ele tá dando um errinho na porque falta uma, Aqui

em cima show de bola aqui eu não preciso nem retornar uma mensagem deixa eu retornar só algo para responder Jason a responsabilização responses and aqui só para retornar uma mensagem um sucesso né então a gente salva aqui agora a e na minha rota eu vou criar uma rota Guedes mesmo e os barra cliente só qualquer coisa aqui só para eu ver que isso aqui tá tudo funcionando beleza tá aí ele Ah tá bom E eu botei com mesmo prática agora sim eu entro aqui beleza ele só deu uma Responde sim dia não retornou nada mas

tá tudo certo então a gente aprendeu também sobre agora sobre como a gente vai parametrizar né como é que a gente vai te passar os parâmetros de uma função é até paramos que são objetos outra coisa muito interessante que eu faço 90 porcento das minhas funções é que aqui se tu for ver dentro do meu Controle eu não consigo de uma forma fácil identificar o que que é isso aqui e o que que é isso aqui claro que eu acabei de criar essa funcionalidade né eu lembro que isso aqui são as mensagens do destinatário isso

aqui são as mensagens lá para compor a minha mensagem só que isso aqui por exemplo se eu pego isso uns dois anos depois de ter criado essa funcionalidade nem precisa esse tempo todos os três meses eu posso confundir isso aqui com o remetente da Mensagem ao invés do destinatário então eu sempre gosto de nome aos parâmetros que eu envio para as minhas funções como que eu faço isso basicamente ao invés de receber vários parâmetros aqui eu recebo um único parâmetro um objeto então eu vou desestruturar ele aqui é esse o assim táxi objeto aqui dentro

Beleza o resto vai continuar tudo igual a é deixa eu ver aqui pintura a certa que eu não posso definir daí dessa Forma aqui né eu vou ter que definir de uma forma um pouquinho diferente a que é basicamente eu vou chamar isso aqui deixa eu tirar isso aqui daqui de dentro já isso aqui de dentro e eu vou chamar isso aqui por exemplo de Messenger de ti ou não eu já falo o que que é esse deixa eu eu queria uma nova interface Messenger de que eu aí eu falo que o sul é do

tipo Ai meu isso e o Messenger é do tipo Ai meu a meio mechas beleza isso aqui é geralmente a forma que eu declaro De ti ou na verdade é só uma sigla para inteira transfer Object isso aqui é um conceito utilizado muito dentro da estrutura da metodologia de de né que basicamente é um objeto para transferência de dados então quando a gente for criar uma interface né para definir como que os dados trafegam entre dois arquivos diferentes dentro a ligação geralmente a gente chama isso de beijo tchau lá dentro do DDD mas isso aqui

é o assunto Para um outro vídeo A beleza a gente poderia dar o nome que a gente quisesse aqui dentro e aqui com uma interface vamos voltar eu ia aqui na frente para seguir o padrão beleza vamos salvar aqui agora e agora a gente aprendeu um pouquinho mais sobre typescript aqui dentro e como que ele ajuda também agora claro dentro do nosso isso é controlar a gente tem que nome aos parâmetros então deixa botar um objeto aqui dentro a e agora aqui vai ser útil e aqui vai Ser por Messenger aparece a gente já resolveu

aqui dentro aí agora os nossos parâmetros estão nomeados né então a gente sabe exatamente o que que é cada coisa a gente sabe que o sendo meio recebe o suco é para quem quer enviar e os dados da minha Messenger né fica bem mais fácil visualizar dessa forma eu prefiro só que não tem muita vontade escute mas tem a ver com o manter a estrutura aí o código legível Então vamos lá continuar com as Funcionalidades do está escrito que a gente pode utilizar aqui dentro Nossa aplicação nojo antes da gente partir para o front-end aqui

dentro do node o meu intuito é mais mostrar uma visão Geral do typescript aplicado aqui com Express e tal mas não entrar muito a fundo nas especificidades do node né então eu não vou configurar a parte de banco de dados a gente já tem um vídeo até é que são miguel não se chama typescript com nojo de Yes do jeito Certo aqui no canal que eu explico como integral tá escrito ficou longo uso é para trabalhar com o mongo DB e eu quero fazer um vídeo mais pra frente trabalhando com o Type of n que

é uma reme voltado para esse querem a possuísse mas que Érica hora que eu ir para aí vai a mas por enquanto a gente não vai entrar muito nessas coisas tão específicas Donald em si e mais do táxi clipe outra coisa que eu não vou entrar em também todos os tipos aqui do tá Escrito que a gente poderia falar sobre Type sobre e não sobre nós tem várias coisas que ele pode utilizar Inclusive tem um posto aqui no fórum que eu separei que eu escrevi faz um ano mas ele ainda é muito Vale que ele

se chama tá escrito que vantagens mitos dicas e conceitos fundamentais Então aqui tem muita coisa um pouco mais conceito áudio como a gente pode fazer tipos a sem utilizar typescript alguns mitos do Java script né sobre produtividade tudo mais E aqui embaixo em conceitos iniciais a gente vai entender um pouquinho sobre tipagem é simples sobre interface sobre types né como que elas diferem do das interface elas são bem parecidos Então a gente tem que cuidar com isso os exames né então tem muita coisa que você consegue tirar aqui de dentro até algumas dicas para trabalhar

com visual E aí E por aí vai por isso que eu não vou entrar muito a fundo nessas partes mais conceituais então se você quiser Dar uma lidinha aqui ótimo para fixar esses conceitos então aqui no noite que a gente vai fazer só para finalizar antes da gente partir para o front-end aí a gente consegue também tipo a classes aqui dentro mas não é bem tipo a classe A gente consegue a quem trabalha com orientação objeto sabe que a gente consegue utilizar a interface a gente utiliza lá dentro e para conseguir fazer com que uma

classe siga algum modelo né então a gente pode criar uma interface Aqui por exemplo a emails e-mail service e falar que ela Obrigatoriamente precisa de um método sendo meio e esse método send mail ele recebe aqui um há uma Quest que é do tipo a message to you né e ele vai retornar aqui voz por exemplo só dessa forma que e agora aqui nesse clássico e-mail service eu simplesmente dou implements i.a. mail service beleza e aqui ele deu um errinho Cross m e também se trovejar o mesmo isso eu falei para a partir de Um

tapume Sabes o que te dói a e me xô ver certinho o que que aqui o Messenger de João a eu botei aqui i677 está dando erro que coisa então a gente consegue basicamente Então se essa classe que não tivesse métodos e-mail ela daria eu tá falando que falta implementar o método você no meio e aí eu teria bem mais informações aqui sobre o método e tudo mais né então a aqui Claro que falta de locais para me sinto mais com a gente já tinha feito isso aqui foi só para estender um pouquinho mais os

nossos conhecimentos aqui do typescript dos mais claro que isso aqui daria para ele muito mais A afunda Eu tô inventando tudo isso aqui dentro do canal e tal Porque logo eu quero começar a trazer mais vídeos sobre pattern sobre a sobre o DDD sobre Solid e implementar esses patrões implementado e de a tudo isso sem typescript enum JavaScript centavo jogos que avisassem tá escrito de maneira geral é bem possível tá porque a implementar a maioria dos Patos nos como por exemplo os padrões apresentados no sólio de que reino eu faço bsod de é basicamente um

conjunto de pato e principalmente esses do final aqui que é o Nescau substitution principle interface gration a gente tem também a dependence in fortran principal todos Esses padrões aqueles são bem e meio que impossíveis da gente implementar sem utilizar a tipagem tá fica bem complicado então vamos lá agora que a gente já aprendeu um pouquinho mais sobre trabalhar com classes aqui dentro do touchscreen pediu que a gente vai fazer ela nas nossas rotas trocar essa rota aqui para posta só para a gente ter uma rota com nome diferente lá dentro do depois tô usando o

iett e a rota deixa aí os mesmo eu vou salvar isso aqui Agora nós vamos começar os movimentos do front-end Nossa aplicação utilizando o iett está escrito Beleza então bom deixa eu voltar aqui e eu vou começar a criar um projeto eu posso utilizar o yarn create-react-app eu vou chamar de fronte entre e eu posso passar uma template chamada typescript beleza isso aqui ele vai automaticamente utilizar a um formato para criar nosso projeto Henriette né utilizando o great Hearts Ep que é a maneira mais tradicional de criar um projeto Muriqui hoje em dia porém ele

vai utilizar template site script formalizada pelo próprio pessoal do cliente Rep Então a gente vai rodar isso aqui e aguardo ali fazer instalação enquanto isso aqui no nosso pé quente como a gente vai ter um front-end Agora eu preciso Obrigatoriamente configurar o Corsa né que é para gente conseguir permitir quais o URL vão acessar o nosso pé quente Então eu vou instalar o corte Aqui no backend e a vem aqui no meu index importo o Corsa e agora vou dar aqui em frente não é ponto News Corsa antes das rotas Então deixa eu passar ele

aqui para cima ele deu um errinho aqui em cima Troy ele não encontrou a tipagem do Corsa então yarn at@types/Kors como dependência de desenvolvimento gente Aguarda um pouquinho E aí tá lá já saiu o erro aqui a gente poderia fazer configurações né Qual que É a URL que pode acessar então http local rosto interessante mas aqui vou permite simplesmente que todos os RL possam acessar o meu beck em sempre irmãozinho A então a gente volta aqui no rapper ele tá fazendo algumas instalações de uns erros muito loucos aqui [Música] bom deixa ele continuar aqui a

gente vê se depois de algum erro a gente ir a corrente Mas eu acho que não foi erro Não foi só algum erro na instalação do próprio cliente a chefe que ele já corrigiu logo depois a Então agora eu vou deixar o meu beck aí rodando aqui com o teste no DF e a gente vai abrir outra o projeto outro visual Studio outro Lembrando que todos estão que diz que a gente criou aqui agora a gente pode simplesmente rodar yarn até se você e ele vai converter todos os arquivos para gente lá dentro da pasta

diz então tá aqui ó Services control Estudo com J está vendo fica bem legal porque ele é só a gente for dar agora noutro disto o index E aí a gente vai conseguir a Claro tá Wesley Wilson a gente só roda isso E aí o nosso servidor já tá rodando com o JavaScript né então fica bem legal essa forma de trabalhar a existem outras formas a gente compilar o nosso código né de converter o código tá escrito em JavaScript essa que não é a única forma usando o PSC existem formas até mais performática cedo demais

mas Não não é um momento a gente falar agora o PSC resolve 99 porcento dos casos tá vamos lá eu queria fazer mesma meu front Então agora que o front a gente está sendo criado já foi criado na verdade eu vou acessar ele aqui e a gente pode abrir direto no visual Studio code que tá porque não tem muito o que eu fazia ali ele já vem com a estrutura pronta né WhatsApp e agora a gente pode ver aquele já veio acontece Consegui né com algumas informações então ele tem aqui por exemplo a informação onde

é sexo foi aqui então ele já permite Ô tá escrito por padrão já vem com suporte a jsx né que é assim táxi do HTML dentro de algo escrito mais todo mundo já tá acostumado com isso ele vem com algumas importações de livros por exemplo a Dom né para eu poder trabalhar com algumas tipagens específicas da árvore de elementos do HTML nébadon a Dori Rainbow não é muito Caro tem muita coisa legal aqui dentro não dá para gente ficar entrando em tudo em tudo aqui dentro Ah e agora a gente vem aqui em assim é

esse Eu posso ver que os arquivos eles têm extensões tanto TS quanto psx-psp arquivos que não tem código JS x dentro deles né código HTML a e plx quando eu quando é um componente e vai utilizar essas tags né então aqui só para facilitar o Davi tá tudo que quer SSS testes logo service-worker setup testes esse Wicked and seu remover Ele vai criar de novo então nem adianta remover tá ele só tem umas as coisinhas loucas ali dentro nem adianta remover Então vou remover tudo isso aqui que tem aqui redor também posso tirar a e

o endereço aqui eu vou retirar parte do Service worker a nossa festa também não estou utilizando a beleza agora a gente vai começar aprender como implementar o time scripts aqui dentro do Yeti e sintam por ó a minha ideia aqui também não é entrar a fundo em tudo como o Touch que pode se integrar com o iett porque novamente a gente já tem um vídeo no canal que eu mostro sobre a aplicação do tá escrito de dentro do ambiente então a minha ideia aqui a gente conseguir dar um overview de como a gente pode utilizar

essa ferramenta para deixar o nosso código aí nossa aplicação mais produtiva Beleza então o que que eu vou fazer aqui no meu é primeiramente eu vou instalar o axios Então deixa eu rodar já dá um olhar no estar aqui no Meu front-end e aqui em outra linha eu posso já instalando o axysnake a biblioteca que a gente vai estar utilizando para fazer chamadas ap então deixou importar que o Whats você não me engana Eu eu não preciso instalar tipagens do AXE separadas porque eu acho que ele já incluí A então eu vou criar uma pastinha

chamada Services e eu vou criar aqui um hippie. TS ele não ele é só teste né na testes Vou importar oaks aqui dentro deixa eu ver se ele já vem Com a tipagem ó o caso do Axis ele já vem com a tipagem Então não precisa instalar types/Axis né Lembra que eu falei que existem dois formatos que as bibliotecas hoje em dia seguem aqui eu vou criar uma constante e igual axios. Cliente EA que eu passo para ele uma vez URL http o local host 3333 que é uma regra da nossa pele lá no pé

quente vou exportar esse aparelho aqui de dentro e agora lá no meu ap eu vou importar ela Aqui dentro para eu fazer uma chamada apei Então vou importar aí Pie from e-services/Life tranquilo aqui agora essa aqui eu vou utilizar ela dentro do BIOS effect que basicamente para carregar alguns dados assim que me O componente é montado em tela então eu vou dar aqui um eu vou criar em Piauí. Get users tranquilo e aqui eu vou ter é assim que retornar uma resposta o nosso respons beleza e aí eu vou Armazenar esses usuários dentro de um

Estado então e os efeitos aqui é você simplesmente começar com o iOS 7 e o urso é igual aí o Stitch e aqui a gente vai simplesmente começar com Array vazio porque usuários vai começar a correr sozinho e o primeiro momento e agora aqui dentro eu vou simplesmente da 17 e o urso response. Deyra isso aqui a gente já tá bem acostumado a E aí eu mostraria os dados do meu usuário aqui dentro então Para cada um dos meus usuários eu vou fazer um metro eu vou percorrer todos os meus usuaris e para cada um

desses usuários eu vou começar mostrando o nome dele né Eu acho que hoje lá da minha aí eu retorno o nome e e-mail então começará o seu nome então dentro aqui de um p um parágrafo eu vou mostrar o user ponto Ita ó ele não me retornou ele não sabe automaticamente que o meu usuário tem um name claro isso aqui é uma informação que tá o back-end Então como É que o ax vai conseguir determinar Qual que é o formato dessa resposta aqui que me retornada para mim então vamos lá a gente consegue também te

passo a informação aqui dentro do IEC para quando a gente for utilizar ela aqui ó já sei mais fácil né aqui a gente pode ver aqui usar ponto nem me ele vai falar que não existe né porque não tem essa informação Então vamos lá a a gente vai conversar criando uma interface chamada ai usar eu vou falar que ele tem um nome Que é obrigatório por isso que eu não coloquei o pão interrogação e ele tem um e-mail aqui também é obrigatório E aí agora eu posso começar a definir a tipagem aqui a dentro da

nossa chamada ap Então tá vendo aqui quando eu realizo o método get eu vou clicar com o controle e vou clicar em cima desse gato aqui tá vendo que o gato aquele tem um sinal de menor e dentro ele tem como se fosse um parâmetro né Pensa que isso aqui fosse o parentes né isso aqui seria O parâmetro parâmetro e quando a gente tem o sinal de menor ao invés do parênteses isso aqui significa um parâmetro de tipo né a tipagem Desse nosso parâmetro aqui eu posso ver ou seja aquele recebe um parâmetro do tipo

t e esse P ele é usado um pouquinho mais à frente para determinar Qual que é a resposta que o Axis me retorna Então vamos clicar que o dentro do Axis response que ele recebe esse parâmetro ter tá vendo axios response eu posso ver Que quando o Axis me devolve uma resposta lá dentro Eu tenho o deira que é exatamente isso que eu tô pegando aqui o responso. Deira e esse deira ele segue exatamente o formato que eu passar como parâmetro para o nosso get aqui dentro então o que a gente olha ele recebe um

parâmetro de tipagem e o parâmetro que eu passar é o formato do meu espaço deira então aqui ó eu posso passar simplesmente sinal de menor e maior e eu falo que a minha resposta aqui dá Para aí ela vai ser um ai usar Mas será que a minha prima vai retornar apenas um usuário não me retorna um Array então eu coloco o Array aqui por volta beleza aquele deu um errinho né basicamente porque Type I user is not assignable To Type never porque Type never porque o nosso users aqui dentro tá vendo que ele tá

com esse Type né ver aqui do Heat isso aqui é um tipo definido pelo Heat de forma automática quando o meu estado aqui dentro do Yeti ele ele simplesmente Algo que eu não consigo entender mas se eu não tivesse isso aqui ó se não tivesse nada disso aqui eu conseguiria definir de forma fácil eu olhando lendo o código O quais os campos os meus usuários aqui tem não conseguiria né então aqui o Stitch ele também recebe um parâmetro tô falando qual qual que é o formato do seu estado ele vai ser um a user a

continuar Então coloca o rei aqui volta e agora a gente pode ver que no momento Que eu dou user ponto aqui ó ele já me retorna nome e e-mail então eu já sei que eu tenho essas informações da mesma forma aqui no response ponteira se eu vou por exemplo ver qual que é o formato dele é o passa o nome aqui por cima o mouse por cima posso ver que ele mostra em cima I user tô tentando apontar aqui mas tu não vai ver né ele era o formato ai usar né com a Reizinho então

isso aqui quer dizer que eu posso pegar esse o expulso.de era Por exemplo é pegar o primeiro a posição dele e mostrar um name o e-mail né ele já consegue determinar de forma automática então eu tava escrito que integra muito bem a beleza a gente aprendeu um dos melhores casos de uso do tá escrito aqui dentro do me at a&r aqui não tem muito segredo agora com as vendas do Hulk a utilização typescript facilitou Nossa 1000% por eu era bem mais complicado porque a gente tinha que utilizar de alguns patterns dentro iett Que eram totalmente

anti-pattern assim na minha opinião que é por exemplo o pattern The Rock né que a gente usava muito que é o raio Order componente hoje em dia praticamente não utiliza mais o padrão de render copos aqui também quase a gente que a gente não utiliza mais que era outro para mim que complicava muito a vida de trabalhar com typescript nome é que hoje em dia é só beleza porque a gente trabalha com hooks então a fez ficou muito mais simples a outra coisa No viet muito legal aqui é a definição de tipos para as propriedades

de componentes né a gente já viu tipos do Estado tipos aqui para para a questão do axios mas a gente ainda não falou sobre tipagem de componente propriedades ensina a tipagem das propriedades do componente então vamos fazer o seguinte vamos na criar um componente aqui dentro que após uma chamada componentes aí eu vou ganhar um componente chamado de usar. PSX é um componente Então tem que Tirar sangue com PSX a Import we are from Due ex aqui a gente de os componentes a em formato de constante é o modelo que eu tô utilizando hoje em

dia porque facilita bastante a gente já vai ver porque então com buzzer e aqui eu vou retornar um conteúdo jsx never turn E aí para cada usuário e vou botar uma div que vai mostrar um som nome E aí aqui eu vou botar o nome então esse nome ele vai vir através daquele uma Propriedade né vou ter o usuário e aí vou pegar aí usar ponto nem me E aí vou quebrar a linha aqui Oi e eu vou colocar e-mail a usar ponto é meu beleza e aqui eu posso quebrar mais uma vez quebrar umas

duas vezes a linha aqui para separar um pouquinho e aqui a gente pode ver novamente ok usar seu dom com três passos eu não tenho name e-mail né então uma das formas Claro seria eu simplesmente vir aqui a importância Interface né Colocar essa interface aqui dentro e falar que usar tem o formato I usar na a gente pode ver aqui não não daria muito bem assim a gente teria criar Na verdade uma interface em props beleza a e essa interface própolis aqui ela teria uma uma única propriedade de Maria Ilza né Mais ou menos o

que a gente fez lá no node ela tem um formato aí usar E aí eu passo o próprio assim né agora eu posso ver que o Nei me e o e-mail Aqui já são Reconhecidos né eu dou uma contra o espaço ele já é reconhecido a porém é isso aqui basicamente excluiu uma propriedade que a gente tem no iett que é a propriedade tilda na então a gente sabe que quando no iett a gente pode fazer o seguinte não poderia achar mais componente user passando um Tio Du então aqui eu poderia passar um outro componente

né E aqui se eu tentar acessar uma propriedade chamada tilda eu vou ver que ele não vai Reconhecer porque esse próprios aqui não tem a propriedade shoulder tarde então eu venho aqui criou o Tio Du em aqui dentro não não a gente não vai fazer nada disso que a gente vai fazer eu vou remover esse tiozinho daqui vou remover essas próprias daqui também E aí eu vou utilizar uma uma a tipagem exportada pelo Heat aqui logo depois do definir constante ou a constante e usar: reactjs. FC que vende functional Component beleza ação Miranda que eu

posso até escrever uma fonte de um componente Ah mas eu vou escrever sorte você e aqui esse FC ele recebe um parâmetro se eu passo o mouse aqui por cima ele recebe um parâmetro que é o PP né Oi gente vende proxy então eu passo aqui como parâmetro as próprias do nosso componente e automaticamente Agora ele já entendeu aqui que usar é do formato a usar na que eu tô passando aqui e eu posso dar um controle espaço aqui ó ele Tem útil também para eu utilizar então ele vai herdar as propriedades que são específicas

do IEC e vai incluir essas propriedades aqui dentro aqui a gente poderia entrar mais a fundo em várias outras coisas do próprio e ex Mas já deu para ter uma visão bem legal então agora aqui dentro do meu ap eu posso importar e o meu e usar de dentro de componentes/usar tranquilo e aí eu utilizo ele aqui dentro né Então escreva aqui ele usa meu pai e usar ele recebe Uma propriedade e usar tá vendo eu dei contra o espaço aí já fala para qualquer propriedade que recebe o uso e aí eu vou passar aqui

dentro e o nosso falando 15 mil vezes a e aqui eu vou passar aqui também né porque todo componente tem que ter então eu vou chamar de né vou usar o e-mail do usuário como que porque algo geralmente que é o único né a isso aqui é muito legal agora porque tipo se a gente em algum momento alterar se essa informação que a não usuário agora o E-mail ele é opcional veja só que começou dá erro aqui nessa propriedade por quê Porque dentro do meu componente de usar o e-mail não é opcional então se eu

tô transformando o e-mail aqui em algo opcional eu vou ter que corrigir alguma coisa aqui dentro desse usar as vezes eu tô mostrando e-mail aqui ó e ele não tem uma verificação de Pô sei se é meio que não for não existir mostrar uma outra coisa né então por exemplo tem algum momento eu transforme isso aqui em Opcional a hora desse meu componente user que como é que se usa deveria se comportar então também vou ter que transformar esse nem opcional aqui dentro e aqui eu teria que mostrar alguma coisa assim ou se ele não

tivesse estado a não possui é meio alguma coisa assim e aí todo o nosso código aqui Voltaria a funcionar normalmente então aqui a gente viu deixa eu dar um oi e a gente viu aplicação do typescript dentro do Yeti claro que a gente não Aprendeu muitos conceitos específicos do typescript a aplicando a querendo vir aqui mas a gente viu como é simples aplicar essa ferramenta também aqui nesse contexto o legal aqui de utilizar o cliente Heat up e o próprio Nietzsche também já tem a template de táxi clipe é que toda aquela parte que a

gente configura o servidor de desenvolvimento o processo de Bill de tudo é que lá já tá pronta Então se a gente roda aqui e arnildo né que é o bild aqui do Red Stripe ele também já vai fazer a abiúde e converter todo esse código para Java scrip porque assim o browser vai conseguir entender então legal acho que a gente conseguiu dar um overview bem legal de como você pode iniciar com o desenvolvimento utilizando typescript tanto no Word quanto no Vietnã não quis focar muito no typescript aplicado para essas duas bibliotecas porque eu queria fazer

um vídeo um pouco mais agnóstico de frango porque o qualquer biblioteca e Mostrar mais como as vantagens os apps scripts e como que a ideia é o eu gosto de cores integra com essa linguagem eu acho que deu para cumprir seu objetivo eu queria saber de você se deu uma clareada É principalmente a galera que nunca utilizou tá de script ou às vezes ficava com pé atrás se deu para dar uma clareada sobre a utilização dessa ferramenta dentro aí da do ambiente Donald de uma maneira geral Esse ficou um pouco mais Um pouco mais cativante

a utilização dessa ferramenta Me responde aí porque ele é eu sei que o meus objetivos com vídeos com esse vídeo aqui vão estar cumpridos se ficou algum conceito não tão claro para você ou se você gostaria que eu apresentasse algum conceito do site scripting um pouco mais a fundo até aplicada o iett Obrigado um novo de aplicado ao GetNet alguma coisa Às vezes que tu tentou entender e não conseguiu deixa aí nos comentários também porque Eu vou correr atrás de produzir um vídeo específico sobre isso porque typescript é uma das Ferramentas que eu aposto muito

para 2020 e pode ter certeza que a gente vai ter cada vez mais vagas pedindo essa ferramenta por isso é uma ferramenta que a Rock City vai trazer muita aqui pro YouTube para o bootcamp para todos os outros canais que a gente em algum tipo de conteúdo Beleza eu vou ficando por aqui se você se você gostou desse vídeo não esquece deixar um like Porque isso ajuda muito a gente conseguir seguir conteúdo para mais gente e quanto mais gente assiste esse conteúdo mais a gente consegue fomentar a educação dentro do Brasil a nesses temas um

pouquinho um não tão básicos assim podemos dizer né Então fechou a vou ficando por aqui Um grande abraço e valeu