TypeScript – executando no browser com SystemJS

Este é o terceiro post da série sobre TypeScript, a linguagem que vem mudando o jeito de programar JavaScript. Para que você possa acompanhar melhor este texto, sugiro que leia o primeiro da série: TypeScript, ame ou nem ligue, que traz coisas básicas sobre o TS, ensinando como instalar, executar, tipos de variáveis, etc.

O segundo post trata sobre o uso do Paradigma Orientado a Objetos com TypeScript, criação de classes, interfaces, etc.

Continuando…

No primeiro post desta série mostramos como compilar programas TypeScript, sendo que, após compilado é gerado um arquivo .js o qual você deve, ou deveria, usar no seu html ou no seu programa nodejs.

Isso é um pouco chato, veja só: tenho que escrever, compilar e depois ainda ter o cuidado de colocar em meu html os links corretos para os arquivos JavaScript. Não acha?

Você achando chato ou não, é bom que saiba que existe uma maneira relativamente simples de executar seus códigos TS no browser sem a necessidade de compilar antes. Na verdade são várias maneiras, se você pesquisar no google pelo termo typescript in browser, vai encontrar no mínimo dois plugins no GitHub capazes de fazer isso. Entretanto a mais eficiente e mais usada, usada até pelo Angular2 é o module loader SystemJS.

SystemJS

É, em bom português, um carregador universal de módulos JavaScript, que é capaz de interpretar módulos que seguem os padrões  ECMAScript 6, AMD, CommonJS, NodeJS e funciona também com os compiladores Traceur e Babel.

Para instalar o SystemJS usaremos NPM:

$ npm install systemjs

Instale também o TypeScript:

$ npm install typescript

Nosso exemplo

Faremos uma pequena aplicação usando SystemJS TypeScript, para isso criaremos 3 arquivos simples no mesmo diretório onde você instalou os pacotes. Vejamos os arquivos:

index.html

É o arquivo principal da aplicação, onde definimos o compilador e o arquivo de script principal para o programa.

Note que usamos os arquivos que estão em node_modules e que foram instalados anteriormente.

Tenha atenção ao código JavaScript desse arquivo, onde são configurados os parâmetros do SystemJS.

main.ts

Note que no arquivo anterior (index.html) o arquivo main.ts é importado direto no SystemJS, o que é uma vantagem, pois com isso não temos que adicionar um tag  <script> para cada arquivo.

O script em questão, como o nome sugere, é o principal script da aplicação, veja:

Import

Algo novo que usamos neste post e não usamos nos outros da série até aqui. Ele serve, obviamente, para importar arquivos TS que tem classes exportadas.

O arquivo que é importado deve ter o marcador export como vemos no arquivo a seguir.

person.ts

O arquivo person.ts contém a classe Person, que é importada no arquivo main.js

Esse arquivo contém também um atributo name e os acessors (get/set) definidos.

Executando

Para executar abra o arquivo index.html no navegador.

Concluindo

Clone do Git Hub. https://github.com/ClubeDosGeeksCoding/typescript-systemjs

Este é o terceiro e último post da nossa série sobre TypeScript. Os outros dois foram:

TypeScript, ame ou nem ligue

TypeScript – Orientado a Objetos

Próximos passos

Em breve estarei postando mais uma série, mas sobre Angular2,  que terá a série sobre TypeScript como base introdutória, acompanhe.

Curta nossa página no Facebook

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

Deixe uma resposta

Seu e-mail não será publicado.