TypeScript

Criada originalmente pela Microsoft, hoje é um projeto open source, o nome da linguagem dá uma dica sobre sua principal finalidade: enfatizar o conceito de tipo.

Em JavaScript o conceito de tipo existe mas ele é implícito para o desenvolvedor, isto é, ele não precisa escrever quais são os tipos envolvidos na sua função ou objeto. Em TypeScript, por sua vez, as definições de tipo fazem parte do código.

A sintaxe de TypeScript é muito parecida com JavaScript e o desenvolvedor tem a sensação de que está programando em uma versão de JavaScript com tipagem estática. Em verdade, a linguagem TypeScript é um superconjunto da linguagem JavaScript. Isso quer dizer que tem tudo que JavaScript tem e adiciona outros conceitos como, por exemplo, o de interface (como o conceito existente em Java).

Dizer que TypeScript é um superconjunto de JavaScript implica em dizer que todo código escrito em JavaScript é também um código válido em TypeScript. Isso traz um grande benefício: o desenvolvedor pode decidir quais partes da sua aplicação ele deseja converter para TypeScript. Nem sempre é viável (tempo, orçamento, etc) reescrever de uma única vez todo o código na nova linguagem.

O compilador TypeScript compila o código e o resultado é um código equivalente em JavaScript. Mesmo que o compilador encontre erros o código JavaScript será gerado pois o papel do compilador é avisar sobre os erros.

Exemplo

Considere o código JavaScript a seguir. Ele define a função media que calcula a média artimética simples de dois números.

Arquivo: programaEmJS.js:

function media(n1, n2) {
   return (n1 + n2) / 2;
}

let num1 = 8;
let num2 = 10;
let resultado = media(num1, num2);
console.log(`A média de ${num1} e ${num2} é ${resultado}`);

Primeira Versão em TypeScript

Uma primeira versão deste programa em TypeScript poderia ser:

Arquivo: programa1EmTS.ts:

function media(n1, n2) {
   return (n1 + n2) / 2;
}

let num1 = 8;
let num2 = 10;
let resultado = media(num1, num2);
console.log(`A média de ${num1} e ${num2} é ${resultado}`);

A extensão padrão do nome do arquivo é .ts. Observe que esta versão é idêntica à versão JavaScript.

Compilando com o comando abaixo será gerado o arquivo programa1EmTS.js cujo conteúdo é idêntico ao arquivo programaEmJS.js.

tsc -t "ES6" programa1EmTS.ts

A opção -t "ES6" faz com que o código JavaScript gerado seja compatível com a especificação ES6 (EcmaScript 2015).

Segunda Versão em TypeScript

Na primeira versão não há nenhum benefício em usar o compilador tsc pois o arquivo é 100% JavaScript. Na segunda versão, mostrada a seguir, utiliza-se anotações TypeScript para indicar que os parâmetros da função media são números e que o resultado também será um número.

Arquivo programa2EmTS.ts:

function media(n1: number, n2: number): number {
  return (n1 + n2) / 2;
}

let num1 = 8;
let num2 = 10;
let resultado = media(num1, num2);
console.log(`A média de ${num1} e ${num2} é ${resultado}`);

Compilando o arquivo programa2EmTS.ts da mesma forma que foi feito na primeira versão resultará no arquivo programa2EmTS.js cujo conteúdo é idêntico aos arquivos programaEmJS.js e programa1EmTS.js.

Terceira Versão em TypeScript

Nesta terceira versão é introduzido um bug: a variável num1 receberá o valor true em vez de 8.

Arquivo programa3EmTS.ts:

function media(n1: number, n2: number): number {
  return (n1 + n2) / 2;
}

let num1 = true;  // aqui tem um bug
let num2 = 10;
let resultado = media(num1, num2);
console.log(`A média de ${num1} e ${num2} é ${resultado}`);

Em JavaScript isso não é considerado um bug porque true é implicitamente convertido para o número 1 e a execução do programa irá mostrar que a média é 5.5 pois (1 + 10) / 2 é 5.5.

O compilador tsc irá gerar o arquivo programa3EmTS.js mas também mostrará a mensagem abaixo alertando para o problema.

programa3EmTS.ts(7,23): error TS2345: Argument of type 'true' is not assignable to parameter of type 'number'.

Muitas outras falhas são detectadas pelo compilador tsc. Por exemplo se a função for invocada com o número errado de argumentos uma mensagem será gerada avisando sobre o problema.

Dica: O projeto TypeScript possui plugins para vários IDEs que compilam o código na medida em que vão sendo escritos. Assim mensagens com a mostrada acima aparecem durante a codificação, agilizando o desenvolvimento.