Da trilha de TypeScript Este conceito ainda não saiu como card do dia. ir para o card de hoje

TypeScript Módulos Intermediário

Módulos e declarações

Em TypeScript, módulos são arquivos que podem exportar e importar declarações (variáveis, funções, classes, tipos). A partir do ES2015, cada arquivo é um módulo se tiver import ou export. Isso permite organizar o código em partes reutilizáveis e manter o escopo isolado.

Além de valores, TypeScript permite exportar e importar tipos (interfaces, type aliases, enums). Para deixar claro que uma importação é apenas de tipo (e que será removida na compilação), usamos import type { ... } from '...'. Isso evita dependências desnecessárias no runtime e melhora a performance.

Arquivos de declaração (.d.ts) descrevem a forma de código JavaScript já existente, sem gerar código. Eles são essenciais para usar bibliotecas de terceiros que não foram escritas em TypeScript. O compilador lê esses arquivos para checar tipos, mas eles não aparecem no JavaScript final.

Neste card, você vai aprender a organizar módulos com export/import, usar import type, criar declarações .d.ts e lidar com tipos de terceiros.

Pontos-chave

  • Use export para expor valores e tipos de um módulo; use import para consumi-los.
  • import type importa apenas tipos e é removido na compilação, evitando dependências de runtime.
  • Arquivos .d.ts descrevem tipos de código JavaScript existente, sem gerar saída.
  • Para bibliotecas de terceiros sem tipos, instale @types/nome ou crie um .d.ts local.
  • Prefira export type e import type para deixar explícito o que é tipo e o que é valor.
modulos.ts
// modulo_matematica.ts
// Exporta uma função e um tipo
export function somar(a: number, b: number): number {
  return a + b;
}

export type Par = [number, number];

// modulo_principal.ts
// Importa apenas o tipo usando import type
import type { Par } from './modulo_matematica';
// Importa a função normalmente
import { somar } from './modulo_matematica';

// Usa o tipo importado
const coordenada: Par = [2, 3];
console.log(somar(...coordenada)); // 5

// Exemplo de declaração .d.ts para uma biblioteca externa
// (normalmente em um arquivo separado, ex: tipos.d.ts)
// declare module 'biblioteca-externa' {
//   export function funcaoExterna(x: number): string;
// }

// Simulando o uso de uma biblioteca de terceiros com tipos
// (aqui usamos uma declaração local para fins didáticos)
declare module 'minha-lib' {
  export function dobro(n: number): number;
}

import { dobro } from 'minha-lib';
console.log(dobro(10)); // 20

Exercícios

  1. 1
    Fácil

    Exportando e importando tipos

    Crie dois módulos: geometria.ts e main.ts. No primeiro, exporte uma função areaQuadrado(lado: number): number e um tipo Lado = number. No segundo, importe o tipo usando import type e a função normalmente, e use ambos para calcular a área de um quadrado de lado 5.

    Resolver
  2. 2
    Médio

    Criando um arquivo de declaração .d.ts

    Você tem uma biblioteca JavaScript chamada calculadora.js que exporta uma função multiplicar(a, b). Crie um arquivo de declaração calculadora.d.ts que descreva essa função. Depois, crie um arquivo app.ts que importe e use multiplicar para calcular 6 * 7 e imprimir o resultado.

    Resolver
  3. 3
    Desafio

    Usando tipos de terceiros com @types

    Instale a biblioteca lodash e seus tipos via @types/lodash. Crie um arquivo lodash-exemplo.ts que importe a função chunk do lodash e a use para dividir um array [1, 2, 3, 4, 5, 6] em chunks de tamanho 2. Imprima o resultado. Certifique-se de que os tipos estão corretos e que o código compila sem erros.

    Resolver

Continue estudando

← Anterior na trilhakeyof e typeof Próximo na trilha →Código assíncrono tipado Trilha completaTodos os conceitos de TypeScript Qualquer linguagem🎲 Sortear outro conceito