Модули TS

Система модулей TypeScript: import/export, резолвинг, настройка компиляции.

Зачем нужно

  • Организация кода по файлам с чёткими зависимостями
  • Типизированные импорты с автодополнением
  • Контроль видимости через export

Где используется

  • Любой TypeScript-проект

Import / Export

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}
export const PI = 3.14159;

// app.ts
import { add, PI } from './math';
import type { Config } from './types'; // только тип (стирается при компиляции)

Виды экспорта

// named export
export function foo() {}
export interface Bar {}

// default export
export default class App {}

// re-export
export { foo } from './utils';
export * from './helpers';

// type-only export
export type { MyType } from './types';

Настройка в tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "isolatedModules": true,
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"],
      "@components/*": ["components/*"]
    }
  }
}

module vs moduleResolution

Опция Что делает
module Формат выходных модулей (ESNext, CommonJS)
moduleResolution Алгоритм поиска модулей (bundler, node16)

Связанные темы

Ресурсы