Introdução ao TypeScript – DEV Community



Tabela de Conteúdos




Introdução



O que é?

TypeScript é um superset do JavaScript, isso é related a dizer que o TS é um “mod” do JS, adicionando a linguagem diversos outros recursos que originalmente não existiam.

Por ser um superset, podemos reutilizar todo o conhecimento de JS para trabalhar com TS, sendo necessário aprender uma coisinha ou outra.



Surgimento

O TS foi criado pela Microsoft com base no ES6, com foco em resolver as limitações do JS sem prejudicar sua capacidade de ser multiplataforma.

Voltar ao topo




Tipagem



O que é?

É um recurso que as linguagens de programação possuem, ele indica ao compilador/transpilador da linguagem o tipo de dado que determinada variável, função, componente e até módulo deve receber.



Tipos

Quando se trata de tipagem as linguagens podem se enquadrar em 4 categorias:



Tipagem Estática

Não permite ao desenvolvedor alterar o tipo da variável uma vez que ela é declarada e geralmente sua verificação é feita em tempo de compilação. O TS tem essa característica.



Tipagem Dinâmica

Ao contrário da Tipagem Estática, essa nos permite alterar o tipo da variável a qualquer momento (não quer dizer que vai funcionar).



Tipagem Forte

Não permite realizar conversões automaticamente, ou seja, só é possível realizar operações entre valores de diferentes tipos após a conversão handbook, feita pelo desenvolvedor (quando possível). O TS tem essa característica.



Inferência de Tipo

É um recurso adicional, no qual linguagens com tipagem estática permitem que o tipo seja atribuído por inferência, assim se passamos uma frase a variável, a linguagem irá INFERIR que seu tipo é String, o mesmo vale para outros tipos. O TS tem essa característica.



Tipagem do TypeScript

O TS é uma linguagem fortemente tipada, estática e possui inferência de tipo.

Voltar ao topo




Compilador X Transpilador



O que é?



Compilador

É um programa que traduz código desenvolvido em uma linguagem de mais alto nível, para código de baixo nível. Podemos citar como exemplo o GCC, compilador da linguagem C e o Javac, compilador da linguagem Java.



Transpilador

É um programa que traduz código desenvolvido em uma linguagem de mais alto nível, para código em outra linguagem, também de mais alto nível. O exemplo mais prático seria o Babel, que pode transformar código ES7 ou ES8 para ES6.

Voltar ao topo




TypeScript Compiler



O que é?

É o compilador do TS, tem como função traduzir o código TS para JS.

Porém há uma certa discordância em classificá-lo como compilador, afinal ele transforma um código de alto nível (TS), em outro código de alto nível (JS), contudo na documentação da linguagem ele é classificado como compilador.



Instalando

Para instalar o TypeScript utilizamos o npm, podendo optar pela instalação native, ou seja, apenas no projeto em questão, ou a instalação world.

instalação native: npm i -D typescript
Enter fullscreen mode

Exit fullscreen mode

instalação world: npm i -g typescript
Enter fullscreen mode

Exit fullscreen mode



Executando

O código TS não é reconhecido pelo navegador ou node, para podermos realmente utilizar o código é necessário primeiro transformá-lo em código JS, para isso existe o TSC (TypeScript Compiler).

Para realizar essa execução basta utilizar o comando tsc, junto do nome do arquivo, isso depois do TS já ter sido instalado.

npx tsc <nome do arquivo>;
Enter fullscreen mode

Exit fullscreen mode

Lembrando que o compilador só irá realizar a conversão se não houver erros de tipo, caso contrário os erros aparecerão no terminal e a conversão não será realizada.

Voltar ao topo




Introdução ao TSConfig



O que é?

É o arquivo de configuração da linguagem TypeScript, nele podemos alterar diversas opções.



Por que configurar?

O TS por padrão segue algumas configurações básicas, porém se quisermos que nosso código seja verdadeiramente funcional, devemos realizar configurações extras, tais como: definir os arquivos a serem monitorados pelo TSC; e onde os arquivos “traduzidos” de TS para JS devem ir.



Configurando

Temos duas opções para iniciar a configuração de nosso ambiente de desenvolvimento, podemos fazer na mão (não é o recomendável), ou podemos utilizar um modelo pronto, oferecido pela própria equipe do TS.

Para utilizar o modelo basta executar o comando:

tsc --init
Enter fullscreen mode

Exit fullscreen mode

Esse comando irá gerar o arquivo tsconfig.json em nosso diretório de projeto, dentro dele teremos todas as opções com explicações breves, além de um hyperlink para uma documentação mais aprofundada.

Voltar ao topo




Hyperlinks Úteis

Voltar ao topo

Add a Comment

Your email address will not be published. Required fields are marked *