Introdução ao Typescript

Introdução ao Typescript

Olá leitor, seja muito bem vindo a mais uma jornada do Portal da Micilini 🥳

Nesta jornada, você vai mergulhar de cabeça na linguagem que está em alta no mercado de desenvolvimento de software, o TYPESCRIPT 🤩

Aqui nós iremos aprender a utilizar todos os recursos que essa linguagem nos oferece, e também nos preparar para trabalhar com ela usando algumas bibliotecas como ReactJS e NodeJS.

Mas antes de aprendermos a criar um Hello World com a linguagem, você precisa preencher alguns requisitos 🥸

Requisitos da Jornada Typescript

É necessário que você tenha um sólido conhecimento em HTML e CSS, tanto na criação de estrutura de páginas (HTML), quanto também na estilização das mesmas (CSS).

Além disso, é fundamentalmente importante que você saiba JAVASCRIPT 🤓

Infelizmente, não tem como aprender Typescript sem antes ter aprendido Javascript, pois como veremos a diante, o Typescript é uma evolução do Javascript.

Se bem que... até daria, mas é ultramente recomendável que você aprenda Javascript primeiro, ok? (Acredite, o seu processo de aprendizado vai discorrer de forma mais rápida).

"Beleza, eu não sei absolutamente nada de Javascript... tem algum curso ou treinamento para me recomendar?"

É claro que sim! O Portal da Micilini conta com uma Jornada de Javascript completíssima que visa te ensinar os conceitos mais importantes sobre a linguagem.

Tudo bem que a jornada não vai te ensinar tuuuuuudo sobre a linguagem... mas o suficiente para que você consiga atuar no mercado de trabalho, além de ter capacidades técnicas para aprender Typescript 😉

Preencheu os requisitos (HTML, CSS e Javascript)? Então partiu começar com o pé direito em Typescript!

Quem será seu professor?

Olá para você que está chegando agora, meu nome é William Lima e sou um dos criadores de conteúdo do Portal da Micilini.

E serei eu quem estarei ministrando toda essa jornada do início ao fim 🙃

Trabalho com desenvolvimento de sistemas desde 2011, e já passei por diversos projetos ao longo da minha vida.

Aproveita e me segue lá no Linkedin, posto novos conteúdos regularmente 😋

O que é o Typescript?

O Typescript é uma evolução do Javascript, com alguns recursos a mais!

Ele é uma linguagem de programação (superset de Javascript) de código aberto, que é desenvolvida e mantida pela Microsoft.

Isso significa que a sintaxe é muuuito similar (se não a mesma, em alguns casos) da que você viu no Javascript.

Além disso, o Typescript pode ser utilizado em conjunto com frameworks/bibliotecas, como é o caso do NodeJS, ReactJS, Angular, Vue, Express e entre outras!

Basicamente, o Typescript adiciona uma padronização a mais da que estamos acostumados com Javascript, onde precisamos declarar tipos de variáveis, tipos de classes, tipos de recebimento de dados, tipos... tipos... tipos...

E sim, o Typescript é uma linguagem tipada!

"Tipada" no sentido de você precisar deixar explicito qual é o tipo de dado que você quer armazenar, ou vai receber.

Quem criou o Typescript?

Criado pelo engenheiro Anders Hejlsberg (funcionário da Microsoft), teve sua primeira versão lançada em outubro de 2012 durante a conferência Build.

Desde então, tem sido desenvolvido e mantido ativamente pela comunidade de desenvolvedores, e também pela Microsoft.

Em seu lançamento, o Typescript foi muito bem recebido pela comunidade de desenvolvedores, uma vez que eles buscavam uma maneira de melhorar a escalabilidade, e a manutenibilidade de projetos JavaScript grandes e complexos.

Graças a continua adoção por partes dos desenvolvedores, e pelas estratégias de divulgação que a microsoft aplicou ao longo desses anos, ele é amplamente adotado e considerado uma ferramenta essencial por muitos desenvolvedores e empresas, que trabalham com JavaScript em projetos de grande escala.

Pode-se dizer que o Typescript está cada vez mais assumindo grandes fatias do mercado de TI, seja no front-end quanto também no back-end.

Qual o problema que o Typescript resolve?

Inicialmente, a linguagem Typescript chegou para resolver diversos "buracos" que existiam (e ainda existem) no Javascript, tais como:

Tipagem Estática: no caso do Javascript, você já deve ter percebido que ele é uma linguagem de tipagem fraca, ou seja, que os tipos de variáveis podem ser determinados em tempo de execução. O que fazem com que os erros gerados pelo Javascript possam ser difíceis de se detectar.

No caso do Javascript, podemos declarar uma variável que pode receber um valor númerico, e mais tarde ter o seu valor alterado para uma string, seguido de um boolean, float e assim por diante.

No Typescript, ele introduz a opção de tipagem estática, permitindo aos desenvolvedores definir tipos para variáveis, parâmetros de função, retornos de função, entre outros. Ou seja, se você definiu uma variável que recebe um valor númerico, ele só pode receber um outro valor número e nada mais!

Ao menos que você declare essa variável como any, mas isso aí veremos em lições futuras 🤭

Orientação a objetos elevados para um próximo nível: no Javascript também podemos brincar com orientação a objetos, o que nos permite criar classes, interfaces, e modificadores de acesso. 

No caso do Typescript, a orientação a objetos acontece de forma mais robusta com tipagem forte!

É mais fácil de se dar manutenção e de se escalar: graças a algumas ferramentas como: Tipagem Estática, Interfaces e Módulos do Typescript, somos capazes de estruturar o código de maneira mais modular e compreensível, facilitando a escalabilidade.

Compabilidade com o Javascript: sim, você verá que todo o código Javascript é válido no Typescript, o que significa que você será capaz de começar a usar TypeScript gradualmente em projetos existentes, adicionando benefícios de tipagem estática e outras funcionalidades, sem a necessidade de reescrever todo o código.

Basicamente, o Typescript te ajuda a melhorar a qualidade, segurança e manutenibilidade do seu código JavaScript, por meio das ferramentas citadas acima 😉

Typescript é ou não é uma linguagem de programação?

Durante anos, a comunidade vem entrando em atrito sobre o Typescript ser ou não ser uma linguagem de programação.

Se você considera "linguagem de programação" como o fato de usar uma sintaxe para escrever seus códigos... você pode sim considerar o Typescript como uma linguagem de programação.

Tudo isso seria verdade se... o TYPESCRIPT NÃO PRECISASSE SER COMPILADO EM JAVASCRIPT!

Sim, a maioria dos desenvolvedores não consideram o Typescript uma linguagem de programação justamente por isso!

Em contra partida, eles consideram o typescript um superset de Javascript!

O que vem a ser um superset?

Um "superset" no mundo da TI, significa dizer que uma linguagem A é um superset de uma linguagem B, se todo programa válido em B também for válido em A.

Não entendeu? É como se A estendesse de B, adicionando novas funcionalidades, sintaxes ou semânticas, ainda aceitando e compreendendo completamente todos os aspectos de B.

O parágrafo acima entra em acordo com o que aprendemos anteriormente, pois como vimos, qualquer código em Javascript também é válido em Typescript!

Aí você pode ser perguntar: Mas não seria mais fácil aprender somente Javascript, pois no final das contas tudo vai ser convertido para ele?

Sim, e olhando por esse lado até que seria mesmo...

Porém, o pulo do gato do Typescript não é se tornar uma linguagem de programação assim como o C, C++, Java... que costumam competir entre si -  até porque a microsoft já tem o C# para isso 🤣 -.

A ideia chave é tornar o desenvolvimento (criação de código) mais seguro para o desenvolvedor, evitando erros e melhorando a qualidade do código em sí.

Para que você possa entender isso, é como se o Javascript estivesse para uma bicicleta, e o Typescript estivesse para às rodinhas da bicicleta e todo equipamento de segurança.

Mas isso não significa que você não possa fazer manobras arríscadas com Typescript, ok?

Usei este exemplo para que você pudesse entender - e sentir - um pouco sobre o desenrolar das coisas com o Typescript rs

Sei que inicialmente você pode até dizer: "Nossa, Typescript é muito chato!".

E realmente ele é 😂

Um exemplo disso é pensar numa função em Typescript que espera receber uma string, enquanto na verdade seu código pode estar recebendo nulo para dentro dessa função, no Typescript isso geraria um erro de modo a não deixar o programa ser executado 😓

Ou pior, não deixar que uma string seja somada com um número inteiro ("10" + 2)... coisa que o Javascript não vê problema algum 🫣

Mas ele faz isso justamente pensando na qualidade e robustez do nosso código, e principalmente, na forma como o desenvolvedor vai escrever esses mesmos códigos.

É o que eu chamo de "Auxílio pela Limitação", e é como andar de biblicleta com rodinha, ou dirigir um carro com um instrutor do lado, onde qualquer "merda" que você faça, ele estará lá para pisar no freio (literalmente) ou não deixar você cair e se machucar 🤣

O Typescript é isso, ele funciona desse jeito, e você tem que dançar conforme a música 🥹

Tal fato que o deixa muito parecido com aquelas linguagens de tipagem forte, como C, C++, Java e entre outros...

Typescript não roda no navegador (e nem no servidor)!

Diferente do Javascrip,t em que 99% dos navegadores conseguem interpretar, o Typescript não é executado e muito menos interpretados por eles.

É por esse motivo que ele precisa ser convertido em Javascript, para que aí sim, o navegador possa fazer as devidas interpretações.

Agora, quando executamos o Typescript no lado do servidor (back-end), ele também precisa ser transpilado para JavaScript antes de ser executado.

Isso ocorre porque o ambiente do NodeJS, que é comumente usado para executar JavaScript no servidor, também não entende diretamente o TypeScript.

Portanto, independentemente se estamos desenvolvendo para o lado do cliente (front-end) ou para o lado do servidor (back-end), o TypeScript deve passar pelo processo de transpilação, para se tornar JavaScript, antes de ser interpretado e executado pelo ambiente correspondente (navegador ou NodeJS).

Mas, esse fato não diminui o valor desse superset, pois ele atua como uma especie de "seguro", capaz de cobrir todo o seu código Javascript, garantindo que tudo seja digitado corretamente e sem "erros surpresas".

Novamente, reforço a ideia de que o Typescript veio para te ajudar a criar códigos Javascript de forma mais "CERTA", vamos dizer assim...

Recapitulando a necessidade do Typescript em suas aplicações

Recapitulando tudo o que falamos em tópicos anteriores, o typescript se faz necessário pelos seguintes pontos:

Com isso em mente, vamos seguir para o processo de instalação! 😉

Instalando o Ambiente de Desenvolvimento

Se o Typescript não é executado no navegador assim como o Javascript, como é que eu vou rodar meus projetos de testes? Usando o NodeJS!

Mas calma, você não precisa aprender NodeJS para aprender Typescript, ok?

Durante a nossa jornada, o NodeJS vai atuar como um "compilador" capaz de nos deixar executar todos os códigos em Typescript que formos criar.

Sendo assim, recomendo que você siga esse tutorial de instalação do NodeJS na sua máquina local.

Instalou o NodeJS? Calma que os primeiros passos ainda não acabaram... você vai precisar também de um editor de códigos, que é o programa pela qual escreveremos nossos códigos.

Como recomendação, gosto bastante do Visual Studio Code, sendo uma opção gratuita para os desenvolvedores 😉

NodeJS pronto e editor instalado? Partiu instalar o Typescript!

Instalando o Typescript (Global)

Nesta jornada, nós iremos instalar o typescript de forma global em nosso sistema operacional (mais tarde aprenderemos a instalá-lo dentro de um projeto em ReactJS ou NodeJS).

Para isso, abra o terminal do seu sistema (como estou usando o windows, eu vou abrir o prompt de comando), após isso digite o seguinte comando:

npm install typescript -g

(Você também pode utilizar o terminal do Git se quiser, conhecido como Git Bash)

O nome do pacote é typescript e a flag -g indica que ele deve ser instalado de forma global em nosso sistema operacional.

Feito isso, que tal verificar se tudo ocorreu bem? Vamos executar mais um comando chamado tsc -v, que é responsável por verificar a versão do Typescript que está instalado na nossa máquina local:

tsc -v

Com isso, garantimos que o Typescript foi instalado com sucesso 🥳

Organizando as pastas do projeto

Durante a jornada, nós iremos criar diversas pequenas aplicações que vão representar cada aprendizado da linguagem, sendo assim, recomendo que você crie uma pasta dentro do seu computador para organizar os arquivos da aula 😊

No meu caso, criei uma nova pasta no desktop chamado de jornadaTypescript, onde a mesma pode ser encontrada no meu gitHub.

Executando seu primeiro projeto

Para executar o seu primeiro projeto em Typescript é bem simples, vamos começar criando uma nova pasta chamada de primeiro-projeto, e lá dentro vamos criar um arquivo chamado de index.ts.

Observação: Arquivos do tipo Javascript são criados com a extenção .js, já typescript usamos o .ts.

Para provar para você que dentro do Typescript nós podemos criar comandos utilizando a sintaxe Javascript, eu vou fazer o seguinte:

index.ts:

const nome = "Micilini";
var rank = 100;

function mostraDados(nome, rank){
 console.log(`Nome: ${nome} - Rank: ${rank}`);
}

mostraDados(nome, rank);

No comando acima estamos declarando duas variáveis e chamando elas por meio da função mostraDados.

O comando que você acabou de ver é puro e simples Javascript, concorda?

Beleza, agora para que você consiga compilar TS em JS, você vai precisar abrir o seu terminal (prompt de comando), navegar até a pasta do projeto e executar o seguinte comando:

tsc index.ts

Isso vai gerar um novo arquivo chamado de index.js na mesma página onde se encontra o seu arquivo em Typescript.

Note que um arquivo index.js sem os espaçamentos e com uma identação melhor, foi gerado de forma automática, ao mesmo tempo que o arquivo em Typescript começou a dar erros:

Esses erros foram ocasionados pelo fato de estarmos escrevendo códigos usando a tipagem fraca do JS dentro de um arquivo TS, isso faz com que o Visual Studio Code identifique isso e diga: "Olha... você pode melhorar esse código, visto que você está querendo usar Typescript".

Apesar disso tudo, você pode executar o index.js no seu navegador, para isso basta criar um novo arquivo chamado de index.html e importá-lo pra lá, da seguinte forma:

index.html:

<html lang="pt-br">
<head>
 <meta charset="UTF-8">
 <title>Primeiro Projeto</title>
</head>
<body>
 <h1>Consulte o Console!</h1>
 <script src="./index.js"></script>
</body>
</html>

Por fim, basta executar esse arquivo em um navegador, e dar uma olhada no resultado do console:

Agora... como eu faço para melhorar o código daquele arquivo em Typescript?

Bem, é um assunto que veremos na próxima aula 😋

Como compilar códigos do Typescript de forma automatica?

Até então nós aprendemos a compilar nosso projetos feitos em TS usando o comando tsc index.ts.

Onde a cada nova alteração, uma nova execução desse código deveria ser realizada 😓

Processo cansativo, não?

Mas você sabia que o comando tsc conta com uma flag -w, que ao ser executada, fica observando qualquer alteração que acontece dentro dos nosso arquivos? Não, então basta executar:

tsc -w

Observe que quando executado, ele desabilita nosso terminal e executa uma pequena aplicação capaz de notar qualquer diferença que acontece em nosso arquivos de modo a re-gerar de forma automática o index.js.

Incrível, não?

Para sair desse modo só executar CTRL + C, ou fechar o terminal (prompt de comando).

Arquivos da lição

Os arquivos desta lição podem ser encontrados no repositório do GitHub por meio deste link.

Conclusão

Nesta lição você aprendeu um pouco mais sobre o Typescript, e como ele pode te ajudar a criar aplicações melhores e mais robustas.

Além disso, aprendemos a instalar esse superset na sua máquina local, e executar o nosso primeiro projeto com ele 🤓

Na próxima lição, iremos cair de cabeça nos fundamentos do Typescript, aprendendo um pouco mais sobre Tipos e Dados.

Te aguardo lá 😉