Introdução ao TypeScript

Logo TypeScript retirada do website oficial typescriptlang.org

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

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

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:

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:

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:

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:

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:

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);

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

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