É um superset do JavaScript criado pela Microsoft. o TS adiciona features como tipagem estática ao JavaScript e necessita ser transpilado para ser utilizado no browser ou até mesmo no nodejs.
JavaScript é uma linguagem dinâmica, com isso podemos(sem querer?) mudar o tipo das variáveis e obter retornos inesperados.
function sum(a, b) {
return a + b;
}
sum(10, 10); // 20
sum('2', '2'); // 22? concatenou a string :D
O TypeScript nos avisa em casos como esse e também em muitos outros.
Também podemos usar o TS como uma "documentação". Por exemplo, imagine uma propriedade em um objeto que deve receber um array, mas esse array só pode ser preenchido com uma determinada string ou valor. Para isso temos o type:
type Platform = 'Windows' | 'Mac OS' | 'Linux';
type Feature = 'Single Player' | 'Multiplayer' | 'Co-op';
interface GameDetails {
id: string;
title: string;
description: string;
platforms: Platform[];
features: Feature[];
}
Platforms e features em GameDetails são arrays que esperam os valores presente em seus respectivos types.
Para transpilar o código TS para JS, utilizamos o tsc, então é necessário instala-lo:
npm install -g typescript
Vários editores são compatíveis com o TypeScript. O mais importante é a integração com a linguagem, para que o editor possa identificar os erros, ler as APIs etc.
Vamos usar um exemplo de uma página que soma dois números:
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sum</title></head><body><input type="number" id="num1"><span>+</span><input type="number" id="num2"><button id="button">Somar</button><script src="./somar.js"></script></body></html>`
somar.js:
const input1 = document.getElementById('num1');
const input2 = document.getElementById('num2');
const button = document.getElementById('button');
function sum(a, b) {
return a + b;
}
button.addEventListener('click', function() {
console.log(sum(input1.value, input2.value));
});