Модули ES (именованные и экспорт по умолчанию), повторный экспорт
Разберитесь с именованными экспортами и импортами и экспортом по умолчанию, а также узнайте, как повторно экспортировать сущности для создания аккуратных границ модулей.
«Модули ES (именованные и экспорт по умолчанию), повторный экспорт» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.
Введение
Цель: уверенно использовать модули ES. Вы будете экспортировать и импортировать именованные символы и символы, экспортируемые по умолчанию, а затем объединять их с помощью повторных экспортов для создания аккуратных публичных API.
Именованные экспорты и импорты
Именованные экспорты используют export перед объявлениями; импортируйте их в фигурных скобках: import { name }.
// file: math.ts
export function add(a: number, b: number): number { return a + b }
export const PI = 3.14159
// file: app.ts
import { add, PI } from "./math"
console.log(add(2, 3), PI) // 5 3.14159Экспорт и импорт по умолчанию
Экспорт по умолчанию — основное значение модуля. Импортируйте его без фигурных скобок: import Foo from "./mod".
// file: greet.ts
export default function greet(name: string) { console.log(`Hello, ${name}`) }
// file: app.ts
import greet from "./greet"
greet("Ada")Экспорт по умолчанию и именованные экспорты
В модуле можно объединить один экспорт по умолчанию с несколькими именованными экспортами и импортировать их вместе.
// file: color.ts
export default "black"
export const palette = [ "red", "green", "blue" ]
// file: app.ts
import baseColor, { palette } from "./color"
console.log(baseColor, palette.length)Повторные экспорты (баррели)
Повторные экспорты (export { x } from / export * from) создают баррель, поэтому потребители импортируют данные из одной точки входа.
// file: math/add.ts
export const add = (a: number, b: number) => a + b
// file: math/index.ts (barrel)
export { add } from "./add"
export * from "./more"
// file: app.ts
import { add } from "./math"
console.log(add(1, 2))Советы и подводные камни
Советы:
- Отдавайте предпочтение именованным экспортам для удобного обнаружения и единообразного переименования.
- Используйте экспорт по умолчанию для единственного «главного» элемента модуля.
- Создавайте баррели на границах пакетов; избегайте циклических импортов.
Проверка импорта по умолчанию
Быстрая проверка: какой импорт соответствует экспорту по умолчанию?
Итоги
Итоги: используйте именованные экспорты для нескольких экспортов, экспорт по умолчанию для одного основного значения, а повторные экспорты — чтобы представить удобную точку входа.
Изучай TypeScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 101
- Уроки
- 352
Часто задаваемые вопросы
Урок «Модули ES (именованные и экспорт по умолчанию), повторный экспорт» бесплатный?
Да — полный текст урока «Модули ES (именованные и экспорт по умолчанию), повторный экспорт» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Модули ES (именованные и экспорт по умолчанию), повторный экспорт»?
Разберитесь с именованными экспортами и импортами и экспортом по умолчанию, а также узнайте, как повторно экспортировать сущности для создания аккуратных границ модулей. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Модули ES (именованные и экспорт по умолчанию), повторный экспорт»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Модули ES (именованные и экспорт по умолчанию), повторный экспорт
- Окружающие объявления (.d.ts) и типы сторонних библиотек
- Сопоставление путей и разрешение модулей