Introdução ao TypeScript
Tags: javascript, typescript, tutorial, beginners
Published: 2021-05-21 13:21:57

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0q3zzn5zfoyiu4tgod1f.png)

### O que é o TypeScript?

TypeScript é um superconjunto (superset) que tem como um dos objetivos fazer o JavaScript ser tipado, desta forma facilitando o desenvolvimento, refatorações de código e correções de bugs.

### Como utilizar TypeScript?

Para utilizar o TypeScript é necessário instalá-lo usando npm:

```
npm install -g typescript
```

Depois de instalar, é necessário criar um arquivo com a extensão `.ts`

Exemplo: `hello-world.ts`

```javascript
let languague = 'Javascript'
languague = 9;
```

O código acima é ES6. Agora vamos precisar compilá-lo usando o compilador `tsc`:

```
tsc hello-world
```

Vamos ter o seguinte "erro":

```bash
hello-world.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.
2 languague = 9
Found 1 error.
```

Mesmo com esse alerta gerado, na pasta no qual criamos o arquivo, veremos que foi gerado um arquivo
`hello-world.js` com o conteúdo

```
var languague = 'JavaScript';
languague = 9;
```

O código gerado é ES6 mas mesmo com o alerta de erro, ele não impede que o copilador gere código JavaScript. Através disso já podemos obter um código JavaScript com menos chances de ter erros ou bugs.

### Inferência de tipo

É muito comum ver código como este quando trabalhamos com TypeScript

Exemplo de uso:

```javascript
let age: number = 20;
let existsFlag: boolean = true;
let language: string = 'JavaScript';
```

É possível atribuir um tipo a uma variável. No entanto o código anterior "pode ser verboso". O TypeScript tem **inferência** de tipos, o que significa que ele verificará e aplicará um tipo a uma variável automaticamente, com base no valor atribuído a ela.

Exemplo de uso:

```javascript
let age = 20; // number
let existsFlag = true; // boolean
let language = 'Javascript'; // string
```

Mas em casos que apenas declaramos uma variável e não a inicializarmos com o valor, é recomendável atribuir-lhe um tipo.

Exemplo de uso:

```javascript
let favoriteLanguage: string;
let langs = ['Golang', 'JavaScript', 'Python'];
let favoriteLanguage = langs[0]
```

Se não especificarmos um tipo para uma variável, ela será automaticamente tipada com `any` o que significa que poderá receber qualquer valor, como ocorre no JavaScript.

### Interfaces

Interface é um contrato que descreve os atributos e os métodos que um objeto deve ter.

Fazendo uma analogia com o ECMAScript:

ECMAScript seria a interface para a linguagem JavaScript, ela diz ao JavaScript quais funcionalidades ela deve ter, mas cada navegador pode ter uma implementação diferente.

Exemplo do uso de interface:

```javascript
interface Person {
	name: string
	age: number
}

function printName(person: Person) {
	console.log(person.name)
}
```

Isso Permite que editores como o `VSCODE` tenham preenchimento automático com o `IntelliSense`

Exemplo do `IntelliSense` no `VSCODE`:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4c7fa1kr1kcpflfy1c5.png)

Agora vamos testar a função `printName`

```javascript
const gustavo = { name: 'Gustavo', age: 29 };
const maria = { name: 'Maria', age: 30, phone: '123-45678' };
printName(gustavo);
printName(maria);
```

O código não terá nenhum erro de compilação. A variável `gustavo` tem `name` e `age` conforme o esperado. A variável `maria` tem `name` e `age`, mas também tem `phone`.

O erro não ocorre porque o TypeScript trabalha com um conceito chamado **Duck typing (tipagem pato)**. Se algo se parece com um pato, nada como um pato, faz quack como um pato, então deve ser um pato! nesse caso, se tem `name` e tem `age` então deve ser um `Person`.

### Genéricos (Generics)

Generic é utilizado em casos que você precisa ter uma função que possa passar um valor de qualquer tipo.

Exemplo de uso do Generic:

```javascript
function printLog<T>(value: T) :T {
    return value;
}
console.log(printLog<Number>(10)) // 10
console.log(printLog<String>('Gustavo')) // Gustavo
```

### Conclusão

Este post tem a ideia de mostrar uma visão introdutória sobre o TypeScript, com o seu uso você pode evitar runtime errors, bugs em produção e etc...
 
Caso deseje explorar mais sobre o assunto pode acessar a documentação do TypeScript
https://www.typescriptlang.org/docs/