Trabalhando com Módulos em TypeScript

Exportando componentes de um módulo

Suponha que temos no projeto o arquivo devices.ts:

export interface Device {
  name: string;
}

export class Phone implements Device {
  name: string;
  constructor(n: string) {
    this.name = n;
  }
}

export function call(phone: Phone): void {
  console.log("Make a call by", phone.name);
}

Para que classes, interfaces e funções sejam visíveis externamente, elas são definidas com a palavra-chave export.

Mas poderíamos exportar todas as entidades de outra forma:

interface Device {
  name: string;
}

class Phone implements Device {
  name: string;
  constructor(n: string) {
    this.name = n;
  }
}

function call(phone: Phone): void {
  console.log("Make a call by", phone.name);
}
export { Device, Phone, call };

Importando Módulos

Para utilizar um módulo na aplicação, é necessário importá-lo usando o operador import. Por exemplo, vamos importar a classe Phone e a função call do módulo devices.ts definido acima:

import { Phone, call } from "./devices";
let iphone: Phone = new Phone("iPhone X");
call(iphone);

Após a palavra import, define-se o conjunto de tipos a serem importados - classes, interfaces, funções, objetos. Depois da palavra from, especifica-se o caminho para o módulo. Neste caso, o módulo está localizado no arquivo devices.js, que está na mesma pasta, por isso o caminho começa com um ponto e, em seguida, especifica-se o nome do arquivo sem extensão. Se o módulo estivesse na pasta lib dentro do diretório atual, o nome da pasta também seria incluído no caminho: "./lib/devices".

Aliases

Ao exportar e importar módulos, é possível atribuir um alias a um componente do módulo usando o operador as.

Por exemplo, definindo um alias para um componente na importação:

import { Phone, call as makeCall } from "./devices.js";
let iphone: Phone = new Phone("iPhone X");
makeCall(iphone);

Assim, neste caso, a função call() recebeu o alias makeCall(), e posteriormente nos referimos à função call() através desse alias.

Também é possível definir um alias ao exportar o componente:

interface Device {
  name: string;
}

class Phone implements Device {
  name: string;
  constructor(n: string) {
    this.name = n;
  }
}

function call(phone: Phone): void {
  console.log("Make a call by", phone.name);
}
export { Device, Phone, call as makeCall };

Em seguida, o componente é importado através de seu alias:

import { Phone, makeCall } from "./devices.js";
let iphone: Phone = new Phone("iPhone X");
makeCall(iphone);

Importando o Módulo Inteiro

É possível importar todo o módulo de uma vez:/p>

import * as dev from "./devices.js";
let iphone: dev.Phone = new dev.Phone("iPhone X");
dev.makeCall(iphone);

Nesse caso, o módulo é importado através do alias dev. Usando esse alias, podemos acessar os tipos definidos nesse módulo.

Exportação Padrão

A exportação padrão permite definir um tipo que será importado do módulo por padrão. Por exemplo, vamos adicionar um novo módulo smartwatch.ts:

export default class SmartWatch {
  constructor(private model: string) {}

  printModel() {
    console.log(`Model: ${this.model}`);
  }
}

A palavra-chave default define a classe SmartWatch como o tipo padrão. Podemos importá-la da seguinte maneira:

import SmartWatch from "./smartwatch.js";
let watch: SmartWatch = new SmartWatch("Apple Watch");
watch.printModel();

Podemos também atribuir um nome diferente ao componente exportado por padrão:

import Watch from "./smartwatch.js";
let watch: Watch = new Watch("Apple Watch 2");
watch.printModel();