JavaScript é sem dúvidas uma das linguagens de programação mais utilizadas no mundo, tudo por causa dos seus recursos e da sua grande flexibilidade.

Podemos programar client-side, server-side, mobile, games, etc. Tudo isso usando apenas o JavaScript.

A linguagem é fácil, simples e de rápida aprendizagem, mas contém um problema que se agrava quando desenvolvemos aplicações complexas e robustas.

Diferente de outras linguagens como Java, C# e outras fortemente tipadas, JavaScript não possui tipos, classes e aquela velha e famosa orientação a objetos que tanto vimos no segundo, terceiro e quartos semestres da faculdade, mesmo com a implementação do ES6, tudo é transpilado para JavaScript puro.

ES6:

class Veiculo {
    constructor(ano, modelo, cor) {
        this.ano = ano;
        this.modelo = modelo;
        this.cor = cor;
    }
}

JavaScript puro:

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Veiculo = function Veiculo(ano, modelo, cor) {
  _classCallCheck(this, Veiculo);

  this.ano = ano;
  this.modelo = modelo;
  this.cor = cor;
};

Outro problema também são os programadores que migram de linguagem fortemente tipada para o JavaScript sentem uma dificuldade de adaptação.

Pensando nisso um engenheiro da Microsoft e sua equipe de desenvolvimento resolveram criar o TypeScript.

Este engenheiro não é ninguém menos que Anders Hejlsberg, que esteve envolvido na criação e no desenvolvimento do Turbo Pascal e do Delphi quando trabalhava para a Borland. E depois foi um dos desenvolvedores do C# e da plataforma .Net na Microsoft

Ok, mas o que é o TypeScript?

TypeScript é um superconjunto de JavaScript desenvolvido pela Microsoft que adiciona tipagem e alguns outros recursos a linguagem.

O TypeScript é projetado para o desenvolvimento de grandes aplicativos e transpilado para JavaScript. Como o TypeScript é um superconjunto de JavaScript, os programas JavaScript existentes também são programas TypeScript válidos.

O TypeScript pode ser usado para desenvolver aplicativos JavaScript que executam tanto do lado do cliente quanto do lado do servidor(Node.js).

O TypeScript suporta arquivos de definição que podem conter informações de tipo de bibliotecas JavaScript existentes, assim como os arquivos de cabeçalho C ++ podem descrever a estrutura dos arquivos de objetos existentes. Isso permite que outros programas usem os valores definidos nos arquivos como se fossem entidades TypeScript digitadas estaticamente.

Existem pacotes de terceiros para bibliotecas populares, como jQuery, MongoDB e D3.js. Pacotes TypeScript para os módulos básicos do Node.js também estão disponíveis, permitindo o desenvolvimento de programas Node.js dentro do TypeScript.

Instalando o TypeScript.

Para instalar o TypeScritp é fácil, basta ter o node instalado no seu computador e instalar com o npm globalmente.

npm install -g typescript

Após instalado vamos criar o primeiro código utilizando TypeScript.

Criando um código com TypeScript.

Como sempre devido a “Maldição do Hello World” vamos criar nosso primeiro código imprimindo no console o Hello World. Mas primeiro vamos criar uma estrutura de pastas que será utilizada para todos os nossos exemplos.

TypeScript |
           |-> src |
                   |-> HelloWorld |
                                  |-> HelloWorld.ts

Vamos criar uma pasta TypeScript e dentro dela uma pasta src, dentro desta pasta src outra pasta que será o nome do exemplo que criaremos e dentro dela finalmente o arquivo .ts

Esta estrutura é necessária, pois iremos configurar o Visual Studio Code para transpilar o código TypeScript para JavaScript automaticamente.

HelloWorld.ts

const saudacao: string = 'Hello World!';

console.log(saudacao);

Acima é um exemplo de uma constante saudação declarada como um tipo string e atribuída o valor de ‘Hello World!’, depois seu valor é exibido no console.

Para transformarmos este código em JavaScript precisamos utilizar o seguinte comando:

tsc HelloWorld.ts

E isso nos gerará um código assim:

var saudacao = 'Hello World!';

console.log(saudacao);

Porém cada vez que alterarmos o código precisaremos rodar o comando novamente, isso pode e provavelmente irá nos causar dor de cabeça. Mas para que isso não aconteça vamos configurar o Visual Studio Code fazendo que este processo seja automático.

Criando o tsconfig.json

Dentro da pasta TypeScript e fora da pasta src crie um arquivo chamado tsconfig.json e nele digite:

{
  //Opções de compilação
  "compilerOptions": {
    //Qual a versão do ecmascript será compilada
    "target": "es5",
    //Geração de módulo padrão
    "module": "commonjs",
    //Criará um source map
    "sourceMap": true,
    //Salvar e gerar automaticamente o arquivo javascript
    "watch": true
  },
  //Quais pastas serão transpiladas
  "include": [
    "src/**/*"
  ]
}

Este arquivo será responsável por compilar o TypeScript para JavaScript e também toda e qualquer alteração que for feita no arquivo TypeScript ele automaticamente recompilará.

Feito isso temos que configurar o Visual Studio Code para que ele rode o processo. Então vá em :

Visualizar -> Paleta de comando -> Executar tarefa de compilação -> TypScript\tsconfig.json

E pronto agora toda vez que você alterar o arquivo.ts o arquivo.js será atualizado e um arquivo.js.map será criado.

Quando e onde utilizar o TypeScript?

Podemos utilizar o TypeScript quando quisermos uma maior segurança nas nossas aplicações, quando precisarmos que elas sejam fortemente tipadas, com sólidos conceitos de orientação à objeto e quando tivermos programadores de outras linguagens como C# e Java se aventurando pelo JavaScript.

Várias bibliotecas e frameworks já utilizam TypeScript ou dão suporte a ele como :

• React
• React Native
• Angular
• Vue
• Node
• Knockout
• Dojo 2
• Glimmer
• WebChat
• ASP.NET core

Referências e links:

Site oficial do TypeScript

Wikipedia TypeScript

Wikipedia Anders Hejlsberg

Twitter.com @typescriptlang

GitHub Microsoft/TypeScript

Fonte: Bognar Junior