Introdução ao TypeScript

gustavodfaguiar

Gustavo Aguiar

Posted on May 21, 2021

Introdução ao TypeScript

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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

Exemplo: hello-world.ts

let languague = 'Javascript'
languague = 9;
Enter fullscreen mode Exit fullscreen mode

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

tsc hello-world
Enter fullscreen mode Exit fullscreen mode

Vamos ter o seguinte "erro":

hello-world.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.
2 languague = 9
Found 1 error.
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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:

let age: number = 20;
let existsFlag: boolean = true;
let language: string = 'JavaScript';
Enter fullscreen mode Exit fullscreen mode

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

let age = 20; // number
let existsFlag = true; // boolean
let language = 'Javascript'; // string
Enter fullscreen mode Exit fullscreen mode

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:

let favoriteLanguage: string;
let langs = ['Golang', 'JavaScript', 'Python'];
let favoriteLanguage = langs[0]
Enter fullscreen mode Exit fullscreen mode

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:

interface Person {
    name: string
    age: number
}

function printName(person: Person) {
    console.log(person.name)
}
Enter fullscreen mode Exit fullscreen mode

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

Exemplo do IntelliSense no VSCODE:

Alt Text

Agora vamos testar a função printName

const gustavo = { name: 'Gustavo', age: 29 };
const maria = { name: 'Maria', age: 30, phone: '123-45678' };
printName(gustavo);
printName(maria);
Enter fullscreen mode Exit fullscreen mode

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:

function printLog<T>(value: T) :T {
    return value;
}
console.log(printLog<Number>(10)) // 10
console.log(printLog<String>('Gustavo')) // Gustavo
Enter fullscreen mode Exit fullscreen mode

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/

💖 💪 🙅 🚩
gustavodfaguiar
Gustavo Aguiar

Posted on May 21, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related