Различия между "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 поддерживает разные формы переэкспорта и экспорта по умолчанию. Ваш выбор должен соответствовать архитектуре проекта.
Полезные материалы
- Избегайте экспорта по умолчанию – TypeScript Deep Dive — подробный обзор, почему стоит избегать экспорта по умолчанию.
- export – JavaScript | MDN — полное руководство по оператору
export
. - import – JavaScript | MDN — подробное руководство по использованию
import
. - ES modules: A cartoon deep-dive – Mozilla Hacks — наглядное введение в модули ES.
- TypeScript | webpack — руководство по использованию TypeScript с webpack.
- 16. Модули — комплексное изучение модулей в JavaScript и TypeScript.