Skip to content

Módulos

Os módulos são uma maneira essencial de organizar e estruturar o código em projetos TypeScript. Eles permitem dividir o código em arquivos e importar ou exportar funcionalidades entre eles, promovendo a reutilização e a manutenção eficaz do código.

Importação e Exportação de Módulos

O TypeScript utiliza a sintaxe de módulos do ES6 (ECMAScript 2015), que é a maneira padrão de trabalhar com módulos em JavaScript moderno. Existem duas operações principais com módulos: exportar e importar.

Exportação de Módulos:

Você pode exportar variáveis, funções, classes ou objetos de um módulo usando a palavra-chave export.

typescript
// arquivo mathUtils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14;

export class Calculator {
  multiply(a: number, b: number): number {
    return a * b;
  }
}

Neste exemplo, estamos exportando uma função (add), uma constante (PI) e uma classe (Calculator) do arquivo mathUtils.ts.

Importação de Módulos:

Para utilizar as exportações de um módulo em outro arquivo, usamos a palavra-chave import.

typescript
// arquivo app.ts
import { add, PI, Calculator } from "./mathUtils";

console.log(add(2, 3)); // Saída: 5
console.log(PI); // Saída: 3.14

const calculator = new Calculator();
console.log(calculator.multiply(4, 5)); // Saída: 20

Aqui, estamos importando as exportações do arquivo mathUtils.ts para o arquivo app.ts e utilizando-as.

Exportações Padrão:

Você também pode exportar um único valor padrão de um módulo usando export default.

typescript
// arquivo logger.ts
export default function log(message: string): void {
  console.log(message);
}

E importá-lo usando uma sintaxe diferente:

typescript
// arquivo app.ts
import log from "./logger";

log("Hello, world!"); // Saída: Hello, world!

Módulos ES6 vs Módulos TypeScript

O TypeScript suporta os módulos ES6, mas também oferece suporte a outras especificações de módulos, como CommonJS e AMD, que são comuns em diferentes ambientes JavaScript.

Módulos ES6:

  • Sintaxe Padrão: A sintaxe de módulos ES6 é a mais comum e é amplamente suportada em navegadores modernos e pelo Node.js. É a abordagem recomendada para a maioria dos projetos.
  • Exemplo:
typescript
// Exportação em ES6
export function greet(name: string): string {
  return `Hello, ${name}`;
}

// Importação em ES6
import { greet } from "./greetings";
console.log(greet("World")); // Saída: Hello, World

Módulos CommonJS:

  • Uso Comum: Frequentemente usados em ambientes Node.js, onde cada arquivo é um módulo e exporta funcionalidades com module.exports e require.
  • Exemplo:
javascript
// Exportação em CommonJS
module.exports = function greet(name) {
  return `Hello, ${name}`;
};

// Importação em CommonJS
const greet = require("./greetings");
console.log(greet("World")); // Saída: Hello, World

Módulos AMD:

  • Uso Comum: Usados em ambientes de carregamento assíncrono, como navegadores, com bibliotecas como RequireJS.
  • Exemplo:
javascript
// Exportação em AMD
define([], function () {
  return function greet(name) {
    return `Hello, ${name}`;
  };
});

// Importação em AMD
require(["greetings"], function (greet) {
  console.log(greet("World")); // Saída: Hello, World
});

Configuração de Módulos no tsconfig.json

O TypeScript permite configurar o sistema de módulos através do arquivo tsconfig.json, usando a opção module.

json
{
  "compilerOptions": {
    "module": "es6", // ou "commonjs", "amd", etc.
    "target": "es6",
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Neste exemplo, estamos configurando o TypeScript para usar módulos ES6.

Resumo

  • Importação e Exportação: Utilize export e import para compartilhar e utilizar funcionalidades entre diferentes arquivos.
  • Módulos ES6: A sintaxe padrão e recomendada para a maioria dos projetos modernos.
  • CommonJS e AMD: Alternativas usadas em ambientes específicos como Node.js e carregamento assíncrono de módulos.
  • Configuração: Use o tsconfig.json para configurar o sistema de módulos apropriado para seu projeto.

Com esses conhecimentos, você estará bem equipado para estruturar seu código TypeScript de maneira modular e eficiente, promovendo a reutilização e a manutenção do código.