TypeScript - Aplicando as tipagens
Tags: javascript, typescript, tutorial, beginners
Published: 2022-01-10 18:29:02

![Typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5rarjitlrtgnt7a0xrt.png)
 
Um dos principais recursos que o TypeScript traz é a utilização da tipagem estática para o JavaScript (que trabalha com tipagem dinâmica). Desta forma o desenvolvedor tem a responsabilidade de declarar qual o tipo da variável que será utilizada e dentre os tipos disponíveis, nós temos:

| Tipos     | Sobre                                                                                                                                                                                                                                                                                                                                                                                 |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Number    | No TypeScript assim como no JavaScript, todos os números são valores de ponto flutuante e recebem o tipo number. Além dos literais hexadecimais e decimais, o TypeScript também suporta literais binários e octal introduzidos no ECMAScript 2015.                                                                                                                                    |
| String    | String é um tipo básico e fundamental no JavaScript tanto para construção aplicativos web e mobile quanto para a construção de programas no lado do servidor. Como em outras linguagens, usamos o tipo string para nos referirmos a tipos de dados textuais. Assim como o JavaScript, o TypeScript também usa aspas duplas (“) ou aspas simples (‘) para envolver os dados da string. |
| Boolean   | Sem dúvidas é o tipo mais básico de dados que tanto o JavaScript quando o TypeScript tem, ele recebe apenas o valor true/false.                                                                                                                                                                                                                                                       |
| undefined | o conjunto com o único elemento `undefined`                                                                                                                                                                                                                                                                                                                                           |
| null      | o conjunto com o único elemento `null`                                                                                                                                                                                                                                                                                                                                                |
| symbols   | o conjunto de todos os símbolos.                                                                                                                                                                                                                                                                                                                                                      |
| Any       | Any é um tipo de dados muito utilizado para quem está migrando do JavaScript para o TypeScript ou quem está recebendo os dados de uma outra biblioteca e não sabe seu valor.                                                                                                                                                                                                          |
| Array     | O array é um tipo muito utilizado em JavaScript. E em TypeSript podemos declará-la de duas maneiras.                                                                                                                                                                                                                                                                                  |
| Tupla     | Os tipos de tupla permitem que você expresse um array onde o tipo e um número fixo de elementos é conhecido, mas não precisa ser o mesmo.                                                                                                                                                                                                                                             |
| Array     | O array é um tipo muito utilizado em JavaScript. E em TypeSript podemos declará-la de duas maneiras.                                                                                                                                                                                                                                                                                  |
| Enum      | Enum é um tipo de dados que não existe no JavaScript mas foi adicionado ao TypScript com o intuito de fornecer nomes mais amigáveis a conjuntos de valores numéricos. Enums são muito comuns em linguagens como Java e C#.                                                                                                                                                            |
| Void      | O tipo void é muito usado junto com funções, serve para dizer que o valor é vazio, não é atribuído nada.                                                                                                                                                                                                                                                                              |


### Nossas Variáveis

Primeiramente, para declarar variáveis utilizando o TypeScript, podemos utilizar a seguinte sintaxe:

```javascript
let numero: number;
let texto: string;
let status: boolean;
```
Também podemos declarar e atribuir um valor:

```javascript
let idade: number =  23;
let nome: string = 'Jhony';
let statusPublicacao: boolean = true;
```

Neste caso a tipagem garante que as variáveis devem conter dados dos seus respectivos tipos. Utilizando o Visual Studio Code (por exemplo) podemos ver que, caso alguma variável receba algum valor diferente do seu tipo declarado anteriormente, o TypeScript apresentará um aviso:

![index.ts variáveis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92vdgfnierspyfthksfg.png)

![Erro tipagem string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w56h4ruksplsexxkk98.png)

### Nossas constantes

Agora, seguindo a mesma maneira que declaramos as variáveis no TypeScript, precisamos apontar o tipo das constantes, com a sintaxe:

![index.ts constantes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esmkpzlv95ntw8bjeh3j.png)

⚠ Vale lembrar que, no caso das constantes, devemos inicializar a constante com o valor definido, ou seja, não é possível alterar seu valor posteriormente.

![Erro de tipagem number](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3un9l0f3su4he83e9yqr.png)

### Falando um pouco sobre arrays

Quando vamos trabalhar com arrays no TypeScript é preciso se atentar para algumas particularidades, primeiramente, podemos trabalhar com os arrays que recebem dados de apenas um tipo, da seguinte forma:

```javascript
let carros: string[] = [];
carros.push('Ferrari');
carros.push('Lamborghini');
```
Ou podemos inicializar o array com os valores:

```javascript
let animais: string[] = ['Cachorro', 'Gato', 'Peixe'];
```
Agora perceba que em ambos os casos, se tentarmos adicionar algum valor de um tipo diferente do que foi declarado anteriormente, vamos obter um aviso:

![Array Erros](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g64bg3z6rfc3ptl0vikz.png)
 
Neste caso tentamos adicionar um valor ao nosso array “carros” utilizando o método `push()`, porém não podemos pois o array só aceita `strings` e não `numbers`.

### Array com mais de um tipo

O TypeScript traz este recurso, onde podemos trabalhar com arrays que recebem mais de um tipo, neste caso ao declarar o array é necessário passar quais tipos de dados que esse array estará apto a receber:

```javascript
let carros: (string | number)[] = ['Ferrari', 2015,'Lamborghini', 2020];
```

Também é possível definir exatamente qual o conteúdo que o array estará apto a receber, além do tipo:

```javascript
let faculdade: ('Formado' | number)[] = ['Formado', 2022];
```

Neste exemplo acima, o array cursos não irá aceitar nenhuma `string` exceto “Formado”.

![Formado então](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8w6s74gqlqorcqrsmfv.png)
 
### Entendendo melhor os tipos

Conforme mostrado na tabela que está localizada no inicio deste artigo temos vários tipos diferentes, portando vamos falar um pouco deles:

**String** - é um tipo básico e fundamental no JavaScript tanto para construção aplicativos web e mobile quanto para a construção de programas no lado do servidor. Como em outras linguagens, usamos o tipo string para nos referirmos a tipos de dados textuais. Assim como o JavaScript, o TypeScript também usa aspas duplas (“) ou aspas simples (‘) para envolver os dados da `string`. Podemos definir uma variável `string` da seguinte forma (claro que vou mostrar outro exemplo):

```javascript
let filme: string = 'John Wick';
filme = 'Duna';  // Mudei o Valor
```

**Number** - No TypeScript assim como no JavaScript, todos os números são valores de ponto flutuante e recebem o tipo `number`. Além dos literais hexadecimais e decimais, o TypeScript também suporta literais binários e octal introduzidos no ECMAScript 2015:

```javascript
let numero: number;
numero = 4;
numero = 5 + 8;

let outroNum: number = 5.8;
let hexadecimalNum: number = 0xf00d;
let binarioNum: number = 0b1010;
let octalNum: number = 0o744;
```

**Boolean** - Sem dúvidas é o tipo mais básico de dados que tanto o JavaScript quando o TypeScript tem, ele recebe apenas o valor `true` ou `false`:

```javascript
let vencido: boolean = true;
vencido = false; // Mudei o Valor
```

**Array** - é um tipo muito utilizado em JavaScript. E em TypeSript podemos declará-la de duas maneiras:

1ª) é utilizando o tipo do elemento seguido por [] (colchetes):

```javascript
let pratoDia: string[] = ['Arroz', 'Feijão', 'Couve', 'Bife', 'Batata', 'Farora'];
```

2ª) é utilizando o tipo Array genérico:

```javascript
let pratoDia: Array<string> = ['Arroz', 'Feijão', 'Couve', 'Bife', 'Batata', 'Farora'];
```

**Tuple(Tupla)** - permitem que você expresse um array onde o tipo e um número fixo de elementos é conhecido, mas não precisa ser o mesmo:

```javascript
let tuple: [string, number, string, number];
tuple = ['hello', 1, 'world', 2];

console.log(tuple[0]);
console.log(tuple[1]);
```

No exemplo acima temos um número definido de elementos na array, 4 e ele são duas strings e dois números. Se definirmos a tupla alterando as ordens que os tipos foram de declarados mais uma vez o Visual Studio indicará um erro.

**Enum** - é um tipo de dados que não existe no JavaScript mas foi adicionado ao TypScript com o intuito de fornecer nomes mais amigáveis a conjuntos de valores numéricos. Enums são muito comuns em linguagens como Java e C#:

```javascript
enum cor {Vermelho, Verde, Azul, Amarelo};
enum outraCor {Vermelho = 1, Verde = 2, Azul = 4, Amarelo};
```

Se imprimirmos o `enum cor`, veremos que os valores de Vermelho será 0, Verde será 1, Azul 2 e Amarelo será 3. Assim como se imprimirmos o `enum outraCor`, Vermelho será 1, Verde 2, Azul 4 e Amarelo que não foi atribuído valor será 5.

**Any** - é um tipo de dados muito utilizado para quem está migrando do JavaScript para o TypeScript (por preguiça, desculpe mas é verdade) ou quem está recebendo os dados de uma outra biblioteca e não sabe seu valor. E ele literalmente quer dizer qualquer um. Então declarando uma variável como o tipo `any` podemos atribuir qualquer valor para ela:

```javascript
let qualquerValor: any;
qualquerValor = 'Água';
qualquerValor = 4; // Mudei o Valor
qualquerValor = true; // Mudei o Valor
```

**Void** - é muito usado junto com funções, serve para dizer que o valor é vazio, não é atribuído nada.

```javascript
function print(msg: string ): void {
  console.log(`Função sem retorno: ${msg}`);
}

print('Escreve algo na tela');
```

⚠ **ATENÇÃO** - Declarar variáveis do tipo `void` não é útil porque você só pode atribuir `undefined` ou `null` a elas.

### Criando tipos personalizados

Existe a possibilidade de criarmos tipos para trabalhar com a nossa aplicação. Seguindo o exemplo dos arrays, podemos criar um array com tipo para usá-lo quantas vezes quisermos, facilitando o desenvolvimento:

```javascript
type Formados = ('Formado' | number)[];

let formado: Formados = ['Formado', 200];
let formado2: Formados = ['Formado', 700, 'Formado', 800];

```

Podemos criar tipos para trabalhar com objetos também, da seguinte forma:

```javascript
type Animal = {
    nome: string;
    idade: number;
}

let cachorro: Animal = {
    nome: 'Rex',
    idade: 3
}

```

Podemos criar também utilizando a `interface` (que é o padrão mais atual):

```javascript
interface Animal = {
    nome: string;
    idade: number;
}

let cachorro: Animal = {
    nome: 'Rex',
    idade: 3
}

```

Neste caso criamos o tipo Animal, que possui as propriedades nome (string) e idade (number) e declaramos um objeto “cachorro” para este tipo. Caso alguma propriedade não esteja de acordo com o tipo, o TypeScript irá apresentar um aviso:

![Tipos com mais valores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz324f9c98dl2070cj0g.png)
 

Foi declarado um objeto “gato” do tipo “Animal”. Porém na propriedade “idade” passamos a `string` “dois” no lugar de um `number` (2), e então, o TypeScript apresenta um aviso que a propriedade idade declarada no tipo Animal espera um `number`. Desta forma é possível criar tipos conforme a necessidade da aplicação que está sendo desenvolvida, tanto para a utilização de arrays como em objetos.

A tipagem estática nos ajuda a desenvolver um código mais confiável e robusto, diminui possíveis erros futuros e ainda pode tornar nossa IDE mais inteligente com recursos de autocomplete apresentando assim maior eficiência. Claro que tudo deve ser colocado no papel, afinal, para equipes (ou pessoas) acostumadas a trabalhar com JavaScript e em projetos que não são tão complexos, devemos considerar se realmente há a necessidade de alguma migração e levar em conta toda a curva de aprendizagem que a equipe terá para aplicar o TypeScript.


Fontes onde pesquisei esse conteúdo:

- https://www.typescriptlang.org/docs/handbook/2/objects.html