Entra o Typescript e sai o Javascript!?

Recentemente em conversa com um amigo ele falou “agora que chegou o Typescript o javascript vai morrer…”. Essa frase para mim não fez nenhum sentido, pois o typescript é na verdade um superset do JS.

Como é de conhecimento geral da nação, o javascript é uma linguagem multi paradigma e fracamente tipada, e com o TS (TypeScript) você torna o JS mais próximo as linguagens orientadas a objeto e fortemente tipada. Diferente do JS que é uma linguagem interpretada, no TS é necessário compilar. E você pode pensar assim… Um compilador? Mas ele vai gerar código de máquina? Não, ele vai compilar o TS para JS.

Uma coisa muito bacana disso tudo, é que o compilador do TS tem um arquivo de configuração, que é uma grande ajuda a todos nós. O tsconfig.json é um conjunto de informações e regras que nós passamos ao TSC para que ele siga esses comandos.

Vale a pena lembrar que todo código JS é considerado código TS válido. Então o TS não veio substituir o JS, mas sim somar ao ecossistema. O framework Angular usa o TS como padrão, o Node também aceita o TS.

Vamos ver um pouco de TS para a gente compreender a diferença. Vamos começar com a configuração do tsconfig.json.

Vamos usar nesse exemplo e propriedades: compilerOptions, compileOnSave e buildOnSave.

Captura de Tela 2018-03-30 às 8.42.04 AM

Vamos explicar cada linha desse json. O compilerOptions, são as opções que o compilador vai usar. O target é para qual linguagem o TS será compilado, no caso do nosso exemplo, vai ser compilado para es5, o module é o padrão de escrita que será usado, o outDir é a pasta onde os arquivos compilados serão enviados e o strict é o modelo de arquivo JS a ser gerado. As duas ultimas propriedades compilerOnSave e buildOnSave são bem simples, mas muito importante, pois é para avisar o TSC que sempre que salvar o arquivo .ts, ele já compilar e montar o arquivo .js para rodar.

Vamos criar uma classe bem simples.

Captura de Tela 2018-03-30 às 8.48.09 AM

Criamos duas variáveis, model e vel. Diferente do JS temos que passar o tipo de variável que estamos criando, no caso do model é uma string e vel é um number. Cada uma das funções também deve retornar um tipo. Quando a função não tem retorno ela é dada como void (vazio), mas no caso da velNow, ela tem um retorno, por isso ela é tipada como number.

Como será que ficou o código JS dessa classe…

Captura de Tela 2018-03-30 às 8.55.19 AM 1

Agora vamos criar outra classe para importar as características de Veicle para ela.

Captura de Tela 2018-03-30 às 8.56.20 AM

Vamos criar uma classe para rodar nosso app.

 

Captura de Tela 2018-03-30 às 9.05.15 AM

Coloquei vários console.log para poder ver o resultado em nosso console. Vamos todar esse código e ver como ele ficou.

Captura de Tela 2018-03-30 às 9.06.07 AM

Os 3 carros estavam parados, depois a BMW acelerou e no console podemos ver que a velocidade foi modificada. Nosso código funciona.

A estrutura do nosso projeto ficou assim…

Captura de Tela 2018-03-30 às 9.07.51 AM

Dentro de dist, fica nossos arquivos .js, as classes ficam com letras maiúsculas. Nesse caso temos uma aplicação extremamente simples e que não precisa de muitas pastas, mas o ideal é criar pastas de acordo com a necessidade do projeto.

Essa é uma intro ao TS, espero que tenham gostado.

Um grande abraço a todos!!!!

 

 

 

 

 

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s