Clique sobre os tópicos listados abaixo para navegar até o conteúdo desejado.

  1. Separarando arquivos .ts
  2. Importar um módulo
  3. Integração com HTML

Por boa prática, nossos programas escritos em linguagem de programação devem ser divididos em partes menores para melhor manutenção, separação de responsabilidade e reuso.

Tendo essa divisão discutida acima em mente, vamos estudar o básico sobre criação de módulos do usuário em TS.

Para a criação dos arquivos para os exemplos abaixo, será necessário uma IDE ou um compilador online com suporte a criação de arquivos em seu ambiente.

Os arquivos .ts criados armazenados em uma mesma pasta raiz. Caso sejam criados em outras pastas, essas devem ser levadas em consideração na importação do módulo.

Um módulo nada mais é do que um arquivo com extensão .ts em que declaramos funções, objetos ou outros, de forma a grupá-los por responsabilidade.

Exemplo 1
script.ts - Nosso script principal em que o módulo será importado. Main.ts
script2.ts - Nosso módulo

No exemplo acima, temos um módulo chamado script.ts e um segundo módulo script2.ts. Ambos são responsáveis por armazenar os seus recursos individuais de acordo com suas responsabilidades.

No exemplo abaixo, temos já os arquivos script2.ts codificados para exemplificar a criação do módulo(script2.ts).

Exemplo 2
//script2.ts
//visíve para importação
export let CONSTANTE:number = 1;

//não visível para importação
let variavel:number = 2;

//visível para importação
export function funcao(p:number):number{
 return p; 
}

//não visível para importação
function funcao2(p:number):number{
 return p; 
}

//visível para importação
export class classe{
   public atributo:number = -1;
}

Para que um recurso declarado em um módulo possa ser importado, utilizamos a palavra reservada export. Dessa forma, tormamos esses recursos públicos ou privados(sem o uso do export), de acordo com necessidade de suas visibilidades para o restante de nossas aplicações.

Sintaxe
export function nome_funcao(parametros):tipo_retorno { /*corpo */}

export class nome_classe { /*corpo*/}

export let nome_variavel:tipo_dado = valor;

export NOME_CONSTANTE:tipo_dado = valor;

Na sintaxe acima, apenas foram mostrados alguns recursos que podem ser importados não sendo esses os únicos, enumeradores, coleções, função anônimas entre outros recursos podem ser importados.

A inclusão dos arquivos .ts mencionados acima podem ser feitas na como no exemplo abaixo. O arquivo script.ts irá importa o módulo script2.ts utilizando os comandos import-from:

Sintaxe
import { recurso_importado1, recurso_importadoN } from 'nome_script1';

import { recurso_importado1, recurso_importadoN } from 'nome_script2';

import { recurso_importado1, recurso_importadoN } from 'nome_scriptN';
Exemplo 3
//script.ts
import {CONSTANTE, funcao,classe} from "./script2";

console.log(CONSTANTE);
console.log(funcao(10));

let obj:classe = new classe();
console.log(obj.atributo);
Saída
1
10
-1

A linguagem TS permite que todos os recursos de um módulo definindo um nome ou apelido como pode ser visto no exemplo abaixo:

Exemplo 4
import * as Modulo from "./script2";

console.log(Modulo.CONSTANTE);
console.log(Modulo.funcao(10));

let obj:Modulo.classe = new Modulo.classe();
console.log(obj.atributo);
Saída
1
10
-1

Caso seja, por algum motivo, necessário renomear uma importação, a palavra reservada as pode ser utilizada de acordo com a sintaxe abaixo mostrada:

Sintaxe
import { recurso_importado as novo_nome } from 'nome_script';
Exemplo 3
import {classe as MinhaClasse} from "./script2";

let obj:MinhaClasse = new MinhaClasse();
console.log(obj.atributo);
Saída
-1

  1. 27/08/2025 - revisão 2 - Ajustes: pontuais, sintaxes e objetivos
  2. 13/09/2024 - revisao 1 - Correção em extensões Ex.1/2/3, link próximo inferior, ajustes gramaticais
  3. 28/02/2024 - versão inicial