Различия между "export" и "export default" в TypeScript

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

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

Пример именованного экспорта:

// Экспорт: pi – это число "пи"
export const pi = 3.14;
export function calculateArea(radius) { return pi * radius * radius; }

// Импорт
import { pi, calculateArea } from './mathUtils';

Пример экспорта по умолчанию:

// Экспорт: здесь мы также работаем с числом "пи"
const pi = 3.14;
export default pi;

// Импорт
import PInotPastry from './mathUtils';

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

Практическое руководство по использованию экспортов в TypeScript

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

Экспорт по умолчанию отлично подходит для предоставления основного API, делая при этом синтаксис более простым и лаконичным. В то же время необходимо соблюдать баланс и помнить о потенциальных проблемах с рефакторингом и однозначными наименованиями.

Как именованные экспорты упрощают процесс рефакторинга

Вот преимущества именованных экспортов на практике:

• Их можно сгруппировать, чтобы улучшить осмысленность кода.
• С их помощью проще навигировать и использовать автодополнение в IDE.
• Легче поддерживать код, зная точное использование экспортов.

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

В каком случае следует выбрать экспорт по умолчанию

Используйте экспорт по умолчанию, когда:

• Файл предоставляет только один основной экспорт.
• Вы создаете библиотеку, и экспорт по умолчанию является частью публичного API.

Классы и компоненты при работе с экспортом:

// Именованный экспорт класса
export class MyClass {}

// Экспорт по умолчанию класса, если он является основным в модуле
export default class MainAttractionClass {}

Разновидности импорта

Вот как могут выглядеть различные способы импорта:

• Именованный: import { myFunc } from 'myModule';
• По умолчанию: import myFunc from 'myModule';
• Импорт для побочных эффектов: import 'myModule';
• С псевдонимом: import { myFunc as newFuncAlias } from 'myModule';

Разъяснение трудностей и ловушек

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

Основные проблемы при использовании экспорта по умолчанию:

• Разработчики могут быть вынуждены искать информацию в исходном коде или документации.
• Автоимпорт в некоторых IDE может работать неоптимально.
• Поиск кода становится сложнее из-за различных наименований при импорте.

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

Почему в проектах лучше предпочитать именованные экспорты

Они упрощают работу с многокомпонентным кодом, предотвращая конфликты имен и отчетливо показывая функциональность модулей:

// Именованный экспорт утилит
export const UTIL_CONST = 'ohSoConstant';
export class UtilClass {}
export function utilFunction() {}

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

Попробуем объяснить на примере выбора игрушек для детской площадки:

Площадка А (🏰):

- Предлагает конкретную игрушку: 🧸🚂 (Поезд)
- Дети забирают игрушку по ее настоящему имени: `import 🚂 from 'playgroundA'`

Площадка B (🌟):

- Есть коробка с любимыми игрушками: 🧸👑
- В коробке всегда "игрушка месяца".
- Дети просят просто "любимую": `import 🧸 from 'playgroundB'`

Именованные экспорты (🏰) = заказ игрушки по имени:

- Как запрос определенной игрушки
- `export const 🚂 = ...;`

Экспорт по умолчанию (🌟) = фаворит площадки:

- Как выбор "любимой" игрушки на данный момент
- `export default 🧸;`

Получите удовольствие от кодирования, правильно выбирая экспорт!

Решение проблем при работе с экспортом

Ошибка TS1192?

Эта ошибка выявляет попытку импортировать нестандартный экспорт без скобок или экспорт по умолчанию со скобками:

// Нестандартный экспорт воспринят как по умолчанию
import myFunction from 'myModule'; // Ошибка, если myFunction не экспортируется по умолчанию

// Экспорт по умолчанию с фигурными скобками
import { myDefaultFunc } from 'myModule'; // Ошибка, если myDefaultFunc экспортируется по умолчанию

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

Встречаются проблемы с классами и рефакторингом

Как рекомендует Басарат Али Саед, лучше избегать экспорта классов по умолчанию: явный экспорт дает четкое представление о зависимостях и упрощает рефакторинг.

Улучшение практики работы с импортом и экспортом

TypeScript поддерживает разные формы переэкспорта и экспорта по умолчанию. Ваш выбор должен соответствовать архитектуре проекта.

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

1. Избегайте экспорта по умолчанию – TypeScript Deep Dive — подробный обзор, почему стоит избегать экспорта по умолчанию.
2. export – JavaScript | MDN — полное руководство по оператору export.
3. import – JavaScript | MDN — подробное руководство по использованию import.
4. ES modules: A cartoon deep-dive – Mozilla Hacks — наглядное введение в модули ES.
5. TypeScript | webpack — руководство по использованию TypeScript с webpack.
6. 16. Модули — комплексное изучение модулей в JavaScript и TypeScript.