Introdução ao TypeScript
Tags: beginners, programming, typescript, braziliandevs
Published: 2022-05-09 19:57:09

## Tabela de Conteúdos

- [Introdução](#introdução)
- [Tipagem](#tipagem)
- [Compilador X Transpilador](#compilador-x-transpilador)
- [TypeScript Compiler](#typescript-compiler)
- [Introdução ao TSConfig](#introdução-ao-tsconfig)
- [Links Úteis](#links-úteis)

---

## 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.

<br />

<small>[Voltar ao topo](#tabela-de-conteúdos)</small>

---

## 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](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean)

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.

<br />

<small>[Voltar ao topo](#tabela-de-conteúdos)</small>

---

## 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.

<br />

<small>[Voltar ao topo](#tabela-de-conteúdos)</small>

---

## 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.

``` bash
instalação local: npm i -D typescript
```
``` bash
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.

``` bash
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.

<br />

<small>[Voltar ao topo](#tabela-de-conteúdos)</small>

---

## 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:

``` bash
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.

<br />

<small>[Voltar ao topo](#tabela-de-conteúdos)</small>

---

## Links Úteis

- [DevHints - TypeScript Cheat Sheet](https://devhints.io/typescript)
- [TypeScript Docs - Cheat Sheet](https://www.typescriptlang.org/cheatsheets)
- [TypeScript Docs - Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html)
- [TypeScript Docs - Enums](https://www.typescriptlang.org/docs/handbook/enums.html)
- [TypeScript Docs - tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
- [TypeScript Docs - Utility Types](https://www.typescriptlang.org/docs/handbook/utility-types.html)
- [Node.js Docs v16.15](https://nodejs.org/dist/latest-v16.x/docs/api/)
- [RocketSeat - MasterClass TypeScript](https://www.youtube.com/watch?v=0mYq5LrQN1s)

<br />

<small>[Voltar ao topo](#tabela-de-conteúdos)</small>