Transcopilação com Typescript

Com certeza o código que escrevemos não será reconhecido pelo navegador. Assim, precisamos traduzir o código escrito para algo que a maioria dos navegadores do mercado compreenda, no caso, ES5. A boa notícia é que o TypeScript que instalamos, além de ser uma linguagem, também funciona como um transcompilador. Ele converte nosso código fonte da linguagem X para a linguagem Y. Mas como proceder?

Primeiro, vamos abrir o terminal e entrar no diretório alurapic/client. E, dentro dele, executar o comando:

npm start

Veja que o terminal ficará travado e a seguinte mensagem será exibida:

Compilation complete. Watching for file changes.

Acabamos de rodar o servidor de transcompilação do TypeScript. Ele monitorará todas as mudanças dos nossos arquivos .ts gerando o arquivo .js correpondente em ES5! Quando ele é iniciado ele compila todos os nossos arquivos, para garantir que nenhum arquivo ficou de fora. Veja que o arquivo alurapic/client/app/app.component.js foi criado.

O conteúdo deste arquivo é:

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var AppComponent = (function () {
    function AppComponent() {
    }
    AppComponent = __decorate([
        core_1.Component({
            selector: 'app',
            templateUrl: './app/app.component.html'
        }),
        __metadata('design:paramtypes', [])
    ], AppComponent);
    return AppComponent;
}());
exports.AppComponent = AppComponent;
//# sourceMappingURL=app.component.js.map

Fique contente por saber que esse código é compatível com navegadores com suporte ao ES5. Além disso, ele prepara o código gerado para funcionar com o loader Systemjs. Quando usamos o sistema de módulos do ES6 precisamos usar um loader, pois a especificação não determinou como os módulos devem ser carregados. Utilizamos o Systemjs e para que ele funcione, o código transcompilado deve ser compatível com ele. Falaremos mais sobre o loader adiante.

Outro arquivo gerado pelo processo de transcompilação foi o app.component.js.map. A função desse arquivo é ajudar na depuração. Quando um erro ocorrer no arquivo .js, se o arquivo map existir, ele apontará a linha no arquivo original em ts e não no js. Aliás, isso tira por completo o receio que muitos possuem de utilizar um transcompilador. Até porque se tivéssemos que depurar o arquivo .js e fazer um "de/para" mental para seu respectivo arquivo .ts essa solução deixaria de ser interessante.

A partir de agora, toda vez que você for programar seu projeto, precisará estar com o serviço de compilação rodando. Caso contrário suas mudanças não refletirão no arquivo .js. Lembrando que serão os arquivos .js gerados os utilizados pelo browser, não os arquivos .ts.

Para que você se sinta mais seguro, segue uma breve explicação do que o comando npm start fez ao ser executado: o comando executará o script com nome start definido no arquivo package.json. Esse script é um atalho para outro script também definido em package.json, o tsc:w. É nesse script que o compilador tsc do TypeScript é chamado. O parâmetro -w faz com que o TypeScript monitore todos os nossos arquivos .ts, compilados automaticamente a cada modificação.

Criamos nosso primeiro componente, inclusive foi compilado para ES5 com auxílio do TypeScript, o que ainda não é suficiente. Precisamos criar o módulo principal da aplicação, aquele que será o primeiro a ser carregado na inicialização.