Tabela de Conteúdos
Introdução
O que é?
TypeScript é um superset do JavaScript, isso é similar 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.
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 manual, 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.
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.
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 local, ou seja, apenas no projeto em questão, ou a instalação global.
instalação local: npm i -D typescript
instalação global: npm i -g typescript
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>;
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.
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
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 link para uma documentação mais aprofundada.
Top comments (0)