Aparência
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
erequire
. - 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
eimport
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.