Работа с пространствами имен в TypeScript: решаем ошибки

Быстрый ответ

Используйте export для организации экспорта в TypeScript. Например, можно сгруппировать вспомогательные функции в отдельный модуль и импортировать их с помощью пространства имен.

mathUtils.ts:

export const PI = 3.14;
export function add(x: number, y: number): number { 
  return x + y;
}

Консумирующий файл:

import * as MathUtils from './mathUtils';

console.log(MathUtils.add(15, 30)); // выведет: 45
console.log(MathUtils.PI);          // выведет: 3.14

Конструкция import * as NamespaceName позволяет импортировать и использовать функции и константы под общим именем пространства, например, MathUtils, обеспечивая удобство и улучшая читабельность кода.

Руководство по эффективной организации модулей в TypeScript

Структурирование модулей помогает оптимизировать работу с экспортами. Перейдем к обзору основных принципов:

Экспорт всего одного элемента? Используйте 'export default'

Если модуль экспортирует лишь один элемент, будь то класс или функция, export default упрощает его импорт.

singleExport.ts:

export default class MyClass { /*...*/ }

Консумирующий файл:

import MyClass from './singleExport';

Подробнее об этом расскажет наш спикер на видео

Чёткая структура файлов

Продуманное использование файловой системы обеспечивает логичность структуры. Сгруппируйте похожие модули в директориях и используйте баррельные файлы (index.ts) для эффективной организации импортов.

utils/index.ts:

export * from './mathUtils';  
export * from './stringUtils';

Консумирующий файл:

import { add, toUpperCase } from './utils';

Псевдонимы для улучшения работы с модулями

С помощью псевдонимов можно избежать конфликта имен и обеспечить порядок в коде.

arrayUtils.ts:

export function concat(a: any[], b: any[]): any[] { /*...*/ }

Консумирующий файл:

import { concat as arrayConcat } from './arrayUtils';

Техники укрощения больших проектов

В больших приложениях есть несколько ухваток, при помощи которых код остаётся управляемым:

Использование пространств имен для переэкспорта

Для объёмных библиотек удобно создавать модуль-контейнер, который переэкспортирует элементы для легкого доступа к ним.

numericUtils.ts:

export const EPSILON = 0.0001;

utilsWrapper.ts:

export * as Numeric from './numericUtils';
export * as String from './stringUtils';

Псевдонимы для модулей с применением 'paths'

Используйте paths в tsconfig.json для оптимизации и упорядочивания путей импорта.

Выписка из tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@utils/*": ["src/utils/*"]
    }
  }
}

Консумирующий файл:

import { Numeric, String } from '@utils/utilsWrapper';

Обеспечение строгости и порядка

Избегайте лишнего экспорта, чтобы не создавать беспорядок в модулях. Каждый модуль должен экспортировать только то, что является уникальным и необходимым.

Визуализация

Представьте проект на TypeScript в виде набора инструментов, где каждый инструмент и ящик имеют отношение к функции, классу или пространству имен, а внешние модули представляют собой чемоданы с этими ящиками.

Использование пространств имен помогает эффективно организовать эти инструменты, распределяя их по ящикам в отдельных чемоданах.

import { NutsNBolts, Measurements } from 'Toolbox';

NutsNBolts.tighten();
Measurements.measureLength();

При использовании импорта подумайте об этом как о выборе правильного инструмента из соответствующего ящика для выполнения работы.

Полезные материалы

1. TypeScript: Документация – Пространства имен и модули — изучите руководство по пространствам имен и модулям.
2. Как использовать пространства имен с внешними модулями TypeScript? – Stack Overflow — обсудите с сообществом разработчиков.
3. Модули ES6 — подробный обзор модулей.
4. TypeScript Modules Demystified – YouTube — просмотрите видеоурок о модулях в TypeScript.
5. Руководство по использованию импорта в TypeScript | DigitalOcean — узнайте, как использовать инструкции импорта.
6. Руководство по использованию экспорта в TypeScript | DigitalOcean — руководство по осуществлению экспорта в TypeScript.