Olá pessoal! Boas-vindas ao curso de TypeScript parte 1: Evoluindo seu JavaScript da Alura. Eu sou Flávio Almeida e tenho uma aplicação de negociações em bolsa de valores. É uma aplicação web que permite que cadastremos uma data, uma quantidade, um valor de uma negociação e que possamos exibir no futuro em uma lista e que o usuário possa verificar o que foi cadastrado.
Olhando essa aplicação a primeira coisa que passa na nossa cabeça é que é uma aplicação web, ela foi escrita em HTML, CSS e Java Script. Bom, é quase verdade, vem comigo. Se olhamos o código fonte da nossa aplicação, vemos que claramente não foi escrito essa aplicação em Java Script, essa aplicação foi escrita na linguagem TypeScript, uma linguagem criada pela Microsoft que é um Superset do ECMAScript.
Um Superset significa que tudo, total conhecimento que você tenha de Java Script é utilizado pela linguagem TypeScript, porém a linguagem TypeScript adiciona tipagem estática e outros recursos da linguagem para tornar o nosso código menos sujeito a defeitos, menos sujeito a bugs e tornar a experiência do desenvolvedor uma experiência mais primorosa.
Neste treinamento que vamos ver são os fundamentos da linguagem em TypeScript, vamos começar do básico e vai avançando, vamos comparar um código escrito em JavaScript comparado com o código escrito em TypeScript para entender as vantagens que O TypeScript nos traz em uma aplicação real que se evoluída através de módulos.
Temos este primeiro de fundamento, temos o segundo módulo, vai ter o terceiro módulo e vamos evoluindo gradativamente, criando novos problemas, trabalhando com novas complexidades para que você domine ainda mais, sinta-se seguro, melhor dizendo, na linguagem de TypeScript e verificar se você pode trazê-lo ou não para dentro dos seus projetos pessoais.
Uma coisa importante destacar é que frameworks do mercado, como angular, utilizam o TypeScript como padrão, como linguagem padrão do desenvolvimento. Inclusive, você pode integrar o TypeScript com o React, até mesmo o Vue Js.
O TypeScript está no coletivo imaginário dos desenvolvedores e este curso visa desmistificar essa linguagem mostrando os benefícios de maneira gradativa. Vamos para o próximo vídeo onde vou falar sobre os requisitos de infraestrutura para que possamos concluir este curso sem problema nenhum. Vejo vocês no próximo vídeo.
Pessoal, vamos falar um pouco sobre infraestrutura. Qual é a infraestrutura mínima que você precisa ter para conseguir realizar esse curso sem problema nenhum? A primeira coisa, Visual Studio Code. Se você usa o Windows tem versão para Windows, se você usa Linux tem versão para Linux e se usa Mac tem versão para Mac.
Por que vou usar o Visual Studio Code? Uma coisa importante para você lembrar é que o TypeScript foi criado pela Microsoft, Visual Studio Code foi criado pela Microsoft. Você já espera logo de cara uma integração perfeita entre Visual Studio Code e o TypeScript, a linguagem TypeScript e o compilador do TypeScript que vamos ver mais à frente do treinamento. É esse que eu sugiro, é esse que você provavelmente vai ganhar o suporte no Fórum.
Segundo, você precisa ter o Node.js instalado na sua máquina. Na minha máquina eu uso o Node.js versão 10210, eu só atualizo a versão do Node quando é necessário, se tem alguma feature que me interessa. O Node tem a versão 12 e a versão 14. A homologada para este curso é a versão 10, mas não há problema nenhum para você com a versão 12 e se você for para versão 14 é só testar e ver se está tudo ok.
Isso aqui é bem importante porque sem o Node.js o compilador do TypeScript que vamos precisar utilizar não funciona, o servidor web que vou disponibilizar no projeto inicial deste curso não vai funcionar, essa aqui é condição sine qua non para que possamos continuar o treinamento, a instalação no Node.
E outra coisa é o Chrome. Eu vou utilizar o Chrome, sinta-se à vontade para usar outro navegador, mas se você utilizar o Chrome você terá uma paridade visual comigo. Se você usa o Visual Studio Code, se você usa o Chrome, se você está usando a mesma versão no Node que a minha vamos ter uma paridade em tudo, as chances de acontecer algum problema com a infraestrutura são muito reduzidas.
É isso que precisamos, não precisamos de mais nada. Precisamos de um navegador Chrome, Node.js e o Visual Studio Code. No próximo vídeo vamos fazer o download do projeto inicial do curso e vou mostrar para vocês como esse projeto inicial é organizado e porquê temos um projeto inicial.
Vamos começar os trabalhos. Eu tenho o projeto baixado descompactado na pasta "typescript-curso1", eu vou abrir o Visual Studio Code que é o editor de texto que eu recomendo a vocês utilizarem porque tem uma integração perfeita com o TypeScript.
Eu vou clicar em "Open", se você usa o Windows vai ter a opção "Open Folder", clicando aqui eu vou na pasta do curso e clico "Open". Antes de eu falar sobre a pasta, sobre a estrutura dos arquivos, a primeira coisa que você vai fazer é o seguinte: você vai no seu Visual Studio Code, vai abrir o "Terminal", esse terminal é aberto dentro da pasta do projeto da raiz e precisamos baixar os módulos da nossa aplicação.
"Flávio, eu não escrevi código nenhum. Que aplicação é essa?" É que esse projeto traz com ele um servidor http para que possamos compartilhar nossos projetos feitos em JavaScript, em TypeScript com o navegador. É utilizado o sistema de modos vigentes dos navegadores que é do sistema de modos ECMAScript 6.
Não tem nada de TypeScript aqui só vamos passar aqui pela questão de infraestrutura. Você vai está dentro da pasta e vai escrever o comando: npm install tendo a certeza que você tem o Node.js da parte de infraestrutura da versão necessitada, necessária.
Eu baixei o projeto e os módulos. A primeira coisa que você vai olhar é o seguinte: existe uma pasta dentro do nosso projeto que é "dist", de distribution, de distribuição. Se você olhar dentro dessa pasta "dist" vemos um arquivo html com uma única página que vamos trabalhar durante todo o projeto de negociação.
Uma coisa importante para entendermos é que é esta pasta "dist" que vai ser compartilhada com o nosso navegador. Tudo que estiver dentro dessa pasta "dist" será acessível através do nosso navegador por meio de um servidor web.
Como eu faço para compartilhar essa pasta "dist" como o meu navegador? Eu vou chegar dentro aqui do meu "package.json", vocês verão que há um script chamado server. Vou escrever aqui no meu terminal npm run server. Quando eu executo esse comando o navegador padrão do meu sistema operacional já é aberto automaticamente e os arquivos da pasta "dist" estão sendo compartilhados.
Podemos até olhar pelo terminal que o Index, o Bootstrap, o Favicon estão todos sendo compartilhados com o meu navegador, todos na porta 3000. Uma grande sacada desta estrutura é que qualquer alteração que você fizer nos arquivos do projeto vai se refletir automaticamente no navegador.
Por exemplo, se eu diminuo aqui a minha tela, tudo isso foi pensado para ter a comodidade de que você só se preocupe em escrever o código TypeScript e não se preocupe com a infraestrutura nenhuma.
Eu vou dar um exemplo. Vou abrir o meu Index, onde está aqui Negociações eu vou colocar um XYZNegociações e vou salvar. Quando eu salvo automaticamente, vemos que o browser tem refresh, ou seja, podemos trabalhar, se você tem dois monitores, tranquilamente com dois monitores e qualquer alteração que você fizer automaticamente o navegador vai refletir essa alteração ou se você trabalha com um monitor apenas você pode dividir a sua tela desta maneira.
O importante aqui é: que isso é uma página html escrita com Bootstrap bem simples, tem uma data, uma quantidade, um valor, um botão incluir e toda vez que quisermos trabalhar, acessar essa página da nossa aplicação, vou para o terminal, abro o terminal, fecho meu navegador que eu parei, vou executar o npm run serverque vai automaticamente abrir aqui o meu navegador servindo o Index.html da minha aplicação.
O importante é entender que a pasta "dist" é o conteúdo que está dentro desta pasta, acessível no servidor. Agora que já entendemos como esse projeto inicial está estruturado vamos partir para a materialização do domínio de negociação, do modelo de negociação que é o assunto do próximo vídeo.
O curso TypeScript parte 1: evoluindo seu JavaScript possui 199 minutos de vídeos, em um total de 66 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.