0Pricing
TypeScript Academy · Урок

Синтаксис модулей ES: import и export

Используйте именованные экспорты и экспорт по умолчанию в файлах TypeScript

«Синтаксис модулей ES: import и export» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Добро пожаловать

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

Именованные экспорты

Используйте `export`, чтобы сделать объявление доступным в других файлах.
// math.ts
export function add(a: number, b: number): number { return a + b; }
export const PI = 3.14159;
export interface Config { host: string; }

Именованные импорты

Импортируйте определённые именованные экспорты с помощью фигурных скобок.
// app.ts
import { add, PI } from './math';
console.log(add(1, 2)); // 3
console.log(PI);        // 3.14159

Экспорты по умолчанию

Модуль может содержать один экспорт по умолчанию. Импортируйте его без фигурных скобок и под любым именем.
// greeter.ts
export default function greet(name: string): string {
  return 'Hello, ' + name;
}

// app.ts
import greet from './greeter';
console.log(greet('Alice'));

Псевдонимы импортов

Используйте `as`, чтобы переименовать импорт и избежать конфликтов имён.
import { log as consoleLog } from './logger';
import { User as UserModel } from './models';

Импорты пространства имён

Импортируйте все экспорты как объект пространства имён.
import * as math from './math';
console.log(math.add(1, 2));
console.log(math.PI);

Переэкспорт

Переэкспортируйте содержимое другого модуля, чтобы создать общедоступный API.
// index.ts
export { add, PI } from './math';
export { greet } from './greeter';
export * from './utils';

Экспорты только типов

Экспортируйте типы без включения кода, выполняемого во время работы, с помощью `export type`.
// types.ts
export type { User, Product };
export type UserId = string;

Импорты только типов

`import type` гарантирует, что импорт не добавит код, выполняемый во время работы. Это удобно для импорта интерфейсов и псевдонимов типов.
import type { User } from './models';
// Only the type is imported — no JavaScript
function greet(user: User): string { return user.name; }

Разрешение модулей

TypeScript разрешает импорты на основе настройки tsconfig `moduleResolution`. Для современных проектов рекомендуются `bundler` или `node16`.

Импорт JSON

Включите `resolveJsonModule: true` в tsconfig, чтобы импортировать файлы JSON с выводом типов.
// tsconfig.json: "resolveJsonModule": true
import config from './config.json';
console.log(config.host); // typed based on JSON structure

Быстрая проверка

Какой синтаксис импорта гарантирует, что импорт не создаст вывод JavaScript, то есть будет использоваться только как тип?

Итоги

Используйте именованные экспорты и импорты для нескольких элементов, экспорты по умолчанию — для главного элемента модуля, а import type — для типов. Переэкспорты в index.ts создают аккуратные общедоступные API.

Часто задаваемые вопросы

Урок «Синтаксис модулей ES: import и export» бесплатный?

Да — полный текст урока «Синтаксис модулей ES: import и export» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Синтаксис модулей ES: import и export»?

Используйте именованные экспорты и экспорт по умолчанию в файлах TypeScript Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Синтаксис модулей ES: import и export»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Синтаксис модулей ES: import и export
  2. Повторные экспорты и файлы-агрегаторы
  3. Импорты и экспорты только типов
  4. Пространства имён и модули: современное применение
← Назад к TypeScript Academy