Entre os estudos de JavaScript, encontrei em alguns lugares muita gente sugerindo o uso de CoffeeScript ou TypeScript para acelerar o processo desenvolvimento.

Se entendi bem, ambos são como uma “metalinguagem”, uma “maquiagem” que “melhora” a sintaxe convoluta do JavaScript e depois reescreve o seu código em JS.

Este entendimento está certo? Como funcionam o CoffeeScript e TypeScript? O que eles são de fato? Qual sua relação com o JavaScript e como eles podem ser usados no desenvolvimento web em lugar do JavaScript?

EcmaScript

Esta linguagem que todo mundo chama de JavaScript na verdade é a EcmaScript. A implementação mais conhecida dela é conhecida por JavaScript, por isto todo mundo usa este nome. É a primeira implementação, feita pela Netscape, que na verdade precede a EcmaScript, que é a padronização pela ECMA da linguagem que veio mais tarde. O padrão foi criado após outros fornecedores criarem suas próprias implementações. O nome não permaneceu o mesmo porque JavaScript era uma marca da Netscape.

JavaScript

Esta é a linguagem universal que está disponível nos principais navegadores disponíveis no mercado. É a única linguagem que pode rodar em todos esses navegadores, então qualquer outra linguagem que queira rodar em um navegador deverá obrigatoriamente gerar um código fonte em JavaScript para que a execução seja possível. JavaScript tornou-se o que seja chama linguagem alvo (target) para compiladores que desejam que o código final rode em um navegador. Isso pode mudar com a introdução do WebAssembly.

Mas JavaScript, como foi bem escrito na pergunta, tem alguns problemas. Como o próprio nome sugere, ela foi criada para ser uma linguagem de script e não para fazer grandes sistemas. Como a evolução da web isso passou ser uma necessidade.

Muitas alternativas surgiram mas nenhum fornecedor de browsers quis colocar outra linguagem nele (quem colocou não conseguiu sucesso, até porque essa nova linguagem, desejável na minha opinião, teria que ser universal também).

Compilação para JavaScript

Daí surgiram as linguagens que são apenas camadas em cima de do JavaScript. Cada uma mirando resolver um problema específico.

Um compilador basicamente pega um conjunto de textos compreensíveis por humanos treinados com algumas regras, o processa e gera um conjunto de informações que são mais compreensíveis para um ambiente computacional, muitas vezes um processador, mas não necessariamente.

Estas linguagens são compiladas através de um compilador específico gerando um código JavaScript que qualquer navegador consegue entender sem nenhum intervenção. De fato o navegador nem sabe que havia uma camada anterior.

Normalmente estas linguagens (não só as duas citadas) não precisam e não disponibilizam bibliotecas para realizar tarefas extras. O máximo que elas têm são alguns códigos de runtime, só alguma coisa que seja necessária para atingir os objetivos traçados pela linguagem em si. Elas aproveitam tudo o que o browser oferece. Elas não precisam de suporte especial para conseguirem ser executadas ou obter melhor performance. Tudo isso continua sendo responsabilidade do JavaScript.

Portanto não há grande segredo. O principal é ter um compilador, e isto é diferente de outras linguagens que exigem mais que uma simples compilação para serem úteis.

CoffeeScript

Uma linguagem que tem como objetivo principal tornar o código mais sucinto, e se inspira em Python. Além disso “conserta” alguns problemas do JavaScript, alguns o próprio JS já consertou em versões mais recentes. Melhorias:

• operadores de comparação consertado, novos operadores e alias de outros;
• declaração de variável e escopo;
• tudo é expressão;
• compreensão de laços;
• parâmetro default e quantidade variável;
• facilidades para manipulação de array;
• interpolação de string;
• várias construções imperativas;
• classes;
• entre outras.

Podemos dizer que CoffeeScript é uma linguagem bastante diferente de JavaScript.

Tinha uma comunidade crescente, melhorias de ferramentas mas tem uma adoção limitada.

TypeScript

Uma linguagem que propõe melhor organização do código JavaScript existente. Todo programa JavaScript é um programa TypeScript válido. A linguagem apenas adicionou alguns elementos novos, alguns até que podem ser usados já mas que estarão em versões futuras do EcmaScript. Melhorias:

• tipagem opcionalmente estática;
• classes (já há alguma coisa no JS), interfaces e mixins;
• módulos;
• enumeração;
• generics;
• parâmetros opcionais e com valores default;
• tuplas;
• union types;
• alias de tipos;
• entre outros.

Uma das grandes vantagens da linguagem é permitir uma melhor verificação do código e a construção de melhores ferramentas. De fato a Microsoft está investindo bastante nestas ferramentas. E não só ela. Apesar de ser uma tecnologia criada pela MS ela pode ser usada sem nenhum problema por quem não utiliza tecnologias Microsoft. Claro que uma das grandes vantagens da linguagem é ter apoio da IDE e nisto o Visual Studio E Visual Studio Code está bem à frente.

TypeScript tem grande compatibilidade com os principais frameworks do mercado inclusive com tipagem estática onde não existia.

Para ver a linguagem em ação e tentar perceber melhor como a conversão é feita, brinque aqui.

Um exemplo de como um código é antes e depois da compilação:

class Hello {
    quem: string;
    constructor (mensagem: string) {
        this.quem = mensagem;
    }
    Diga() {
        return "Olá, " + this.quem;
    }
}  

Compilado:

var Hello= (function () {
    function Hello(mensagem) {
        this.quem= mensagem;
    }
    Hello.prototype.Diga = function () {
        return "Olá, " + this.quem;
    };
    return Hello;
})();

Coloquei no GitHub para referência futura.

Desvantagens

• Estas linguagens adicionam um passo extra em cada alteração no código. Você precisa compilar da linguagem fonte para o JavaScript que é a linguagem alvo, sem isso não há como executar.
• O processo de debug é mais complicado. Embora já minimizaram os problemas, criando ferramentas cada vez mais adequadas e mapas de código para depuração.
• Podem ficar defasadas com as melhorias que o JavaScript venha ter (não tem ocorrido).
• Não resolvem um dos principais problemas do JavaScript que é a incompatibilidade entre navegadores. Ok, pode até não ser exatamente um problema da linguagem, mas afeta quem a usa.

Exatamente. CoffeeScript e TypeScript são ambas linguagens que são convertidas em JavaScript por um (assim chamado) “compilador”.

Enquanto o JavaScript é a linguagem de script que pode ser efetivamente interpretada e executada pelos navegadores web, o CoffeeScript e o TypeScript não são imediatamente executáveis. Não adianta, por exemplo, colocar CoffeeScript entre as tags <script> e </script> e esperar que o browser execute! 🙂

Como o código desenvolvido nessas linguagens precisa passar por um processo de “compilação” até se transformar em JS, geralmente se usam IDE’s mais robustas que automatizam esta etapa.

Já que você está aprendendo JS, fica aqui minha dica: segue no JS puro! Evite jQuery e outros frameworks agora… JavaScript é uma linguagem muito simples, mas ao mesmo tempo muito poderosa. Quando você estiver manjando mais, recomendo fortemente o estudo do Angular; provavelmente você nunca vai precisar de mais nada além de JS + Angular!