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.

<!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.

Curta nossa página no Facebook

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *