Criando e conectando módulos - TypeScript

O TypeScript suporta o uso de módulos. Módulos são um conceito introduzido pelo padrão ES2015. De certa forma, os módulos são semelhantes a namespaces: eles podem conter várias classes, interfaces, funções e objetos. Os módulos são separados em arquivos individuais, o que torna o código da aplicação mais claro e limpo, além de permitir o uso desses módulos em outras aplicações.

No TypeScript, assim como no padrão ECMAScript 2015, qualquer arquivo que contenha expressões import ou export no nível superior é considerado um módulo. Os módulos são executados em seu próprio escopo, não no contexto global. Isso significa que variáveis, funções, classes, interfaces, etc., definidos dentro de um módulo não estão disponíveis externamente até que sejam explicitamente exportados. E para que outro módulo possa usá-los, é necessário importá-los.

Se um arquivo não contém expressões import ou export no nível superior, ele é considerado um script comum, cujo conteúdo está disponível no escopo global. Tais arquivos podem ser combinados em um único arquivo usando o parâmetro de compilação --outFile, especificando o nome do arquivo de saída.

Para transformar um script simples em um módulo, basta adicionar ao arquivo:

export {};

Este módulo não exporta nada, mas ainda assim é considerado um módulo.

Tipos de Módulos

Todos os módulos têm um formato específico e pertencem a um determinado tipo. Podemos utilizar os seguintes tipos de módulos:

AMD (Asynchronous Module Definition)
CommonJS (usado por padrão se o parâmetro --target for "ES3" ou "ES5")
UMD (Universal Module Definition)
System
ES2015
ES2020
ESNext

Os módulos dos tipos ES2015 e ES2020 são praticamente idênticos, exceto que o ES2020 oferece suporte para importação dinâmica e a expressão import.meta.

Vamos examinar os módulos usando como exemplo os módulos do tipo ES2015/ES2020, pois este é um dos tipos mais populares (junto com CommonJS) e é suportado por padrão pelos navegadores modernos.

Definição de Módulo

Vamos definir um módulo simples. Para isso, criaremos o arquivo message.ts com o seguinte código:

export default function hello() {
    console.log("Hello Typescript");
}

Aqui, definimos uma função comum hello() que exibe uma mensagem no console. Como ela é definida com a palavra-chave export, este arquivo é considerado um módulo, e a função hello() pode ser importada em outros módulos.

Além disso, usamos a palavra-chave default, que define o tipo exportado por padrão.

Conectando o Módulo. Importação

Agora, vamos usar essa função em outro arquivo. Para isso, utilizaremos o arquivo main.ts:

import hello from "./message.js";
hello();

Para importar funcionalidades de outro módulo, usamos a palavra-chave import, seguida pelos nomes dos componentes a serem importados — neste caso, a função hello. Depois do operador from, especificamos o módulo de onde estamos importando; aqui, indicamos "./message.js". Supõe-se que ambos os módulos compilados - main.js e message.js - estarão na mesma pasta.

Compilando Módulo

Ao compilar a partir da linha de comando ou terminal, precisamos especificar o tipo de módulo passando o valor correspondente para o parâmetro --module:

tsc --module commonjs main.ts   # para CommonJS
tsc --module amd main.ts        # para AMD
tsc --module umd main.ts        # para UMD
tsc --module system main.ts     # para SystemJS
tsc --module esnext main.ts     # para ESNext

No nosso caso, ambos os módulos - main.ts e message.ts - são módulos ES. Portanto, precisamos escolher "ES2015", "ES2020" ou "ESNext" como tipo de módulo. Para este caso específico, não importa muito qual desses três tipos escolheremos, então optaremos pela última opção.

Primeiro, no prompt de comando ou console, navegamos até a pasta onde os arquivos main.ts e message.ts estão localizados usando o comando cd. No meu caso, eles estão na pasta c:\typescript.

Em seguida, para compilar os módulos, digitamos o comando:

tsc --module esnext main.ts

Após isso, os arquivos main.js e message.js aparecerão na pasta:

typescript
├── main.js
├── main.ts
├── message.js
└── message.ts

Carregando Módulos

Para carregar os módulos, vamos definir uma página web index.html na pasta que contém os arquivos compilados:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <h2>Módulos no TypeScript</h2>
    <script type="module" src="main.js"></script>
</body>
</html>

Para carregar o módulo principal da aplicação, main.js, definimos um elemento <script> com o atributo type="module".

O carregamento dos módulos é feito via AJAX, portanto, os módulos compilados devem estar em um servidor web. Isso significa que não podemos simplesmente abrir a página no navegador como fizemos em tópicos anteriores. Por isso, primeiro precisamos decidir qual servidor web usar. Pode ser qualquer servidor web; neste caso, usaremos a opção mais acessível - Node.js. Mas, novamente, pode ser qualquer outra tecnologia de servidor, como PHP, ASP.NET, Python, etc., ou um servidor web específico como Apache ou IIS.

Então, vamos criar um arquivo de servidor na pasta com os arquivos dos módulos. Vamos chamá-lo de server.js, e ele terá o seguinte código:

const http = require("http");
const fs = require("fs");

http.createServer(function(request, response) {

    // obtém o caminho após a barra
    let filePath = request.url.substr(1);
    if(filePath == "") filePath = "index.html";
    fs.readFile(filePath, function(error, data) {

        if(error) {

            response.statusCode = 404;
            response.end("Recurso não encontrado!");
        }
        else {
            if(filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");
            response.end(data);
        }
    });
}).listen(3000, function() {
    console.log("Servidor iniciado na porta 3000");
});

Este é um servidor simples que entrega arquivos estáticos ao usuário. A função http.createServer() é usada para criar o servidor, e a função fs.readFile() é usada para ler e enviar os arquivos. Se o nome do arquivo não for especificado, o arquivo index.html é enviado. O servidor será executado no endereço http://localhost:3000/.

Vale ressaltar que, ao enviar módulos JavaScript, precisamos definir o tipo MIME do conteúdo como "text/javascript":

if(filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");

Estrutura Final do Projeto

A estrutura final do projeto ficará assim:

typescript
├── index.html
├── main.js
├── main.ts
├── message.js
├── message.ts
└── server.js

Agora, vamos iniciar o servidor usando o comando:

node server.js

Após iniciar o servidor, veremos a mensagem "Servidor iniciado na porta 3000", o que significa que o servidor está funcionando. Agora, podemos acessar http://localhost:3000 no navegador. A página será exibida, e no console do navegador veremos o resultado do nosso código TypeScript.

Carregando módulos em TypeScript usando Node.js

Configuração do TypeScript

Em vez de especificar o tipo de módulo no console durante a compilação, podemos usar os parâmetros correspondentes no arquivo de configuração tsconfig.json. Por exemplo, o parâmetro "module" define o tipo de módulo:

{
    "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "strictNullChecks": true,
    "outFile": "main.js",
    "target": "es2015",
    "module": "esnext"
    }
}