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 e 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.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>SystemJS</title> <body> <h2 id="name"></h2> </body> <script src="node_modules/systemjs/dist/system.js"></script> <script src="node_modules/typescript/lib/typescript.js"></script> <script> System.config({ transpiler: 'typescript' }); System .import('main.ts') .then(null, console.error.bind(console)); </script> </head> <body> </body> </html>
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:
//Importando classe Person import {Person} from './person.ts'; //Instanciando classe person let person = new Person(); //Setando nome person.name = "Jayr Alencar"; //Pegando nome e atribuindo a elemento DOM document.getElementById("name").innerHTML = person.name;
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.
import {Componente} from 'caminho/arquivo.ts';
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
export class Person { private _name: string; get name(): string { return this._name; } set name(p : string) { this._name = p; } }
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.