JavaRush /Курсы /Модуль 2: Fullstack /Введение в модули

Введение в модули

Модуль 2: Fullstack
7 уровень , 0 лекция
Открыта

1.1 Основы модулей

Модули в TypeScript (и JavaScript) представляют собой «единицы кода», которые могут быть разделены на различные файлы и загружены по мере необходимости. Модули помогают структурировать и организовывать код, делая его более поддерживаемым и удобным для работы в больших проектах. В этой лекции вы узнаете, как работают модули в TypeScript, как использовать экспорт и импорт для управления зависимостями между модулями.

Модули в TypeScript основаны на стандарте ECMAScript Modules (ESM), который обеспечивает стандартный способ работы с модулями в JavaScript. TypeScript добавляет типизацию и улучшенные возможности работы с модулями.

Каждый файл TypeScript (или JavaScript) по сути является модулем. Код внутри файла обособлен, и для взаимодействия с кодом в других файлах используются экспорт и импорт.

1.2 Экспорт в модулях

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

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

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

Пример:

TypeScript
    
      // math.ts
      export const PI = 3.14;

      export function add(x: number, y: number): number {
        return x + y;
      }

      export class Calculator {
        multiply(a: number, b: number): number {
          return a * b;
        }
      }
    
  

Здесь из модуля math.ts экспортируются константа PI, функция add и класс Calculator. Все они могут быть импортированы в других модулях.

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

Позволяет экспортировать одно значение из модуля. Обычно это используется для экспорта основного функционала модуля.

Пример:

TypeScript
    
      // logger.ts
      export default function log(message: string): void {
        console.log(message);
      }
    
  

Здесь функция log экспортируется как экспорт по умолчанию.

1.3 Импорт в модулях

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

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

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

Пример:

TypeScript
    
      // main.ts
      import { PI, add, Calculator } from './math';

      console.log(PI); // Вывод: 3.14
      console.log(add(2, 3)); // Вывод: 5

      const calc = new Calculator();
      console.log(calc.multiply(4, 5)); // Вывод: 20
    
  

Здесь из модуля math.ts импортируются константа PI, функция add и класс Calculator.

Импорт по умолчанию

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

Пример:

TypeScript
    
      // main.ts
      import log from './logger';

      log('Hello, world!'); // Вывод: Hello, world!
    
  

Здесь функция log импортируется из модуля logger.ts.

Комбинированный импорт

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

Пример:

TypeScript
    
      // utility.ts
      export default function log(message: string): void {
        console.log(message);
      }

      export function formatDate(date: Date): string {
        return date.toISOString();
      }

      // main.ts
      import log, { formatDate } from './utility';
      log('Current date: ' + formatDate(new Date())); // Вывод: Current date: <текущая дата в формате ISO>
    
  

Здесь из модуля utility.ts импортируются функция log как экспорт по умолчанию и функция formatDate как именованный экспорт.

3
Задача
Модуль 2: Fullstack, 7 уровень, 0 лекция
Недоступна
Экспорт и импорт константы
Экспорт и импорт константы
3
Задача
Модуль 2: Fullstack, 7 уровень, 0 лекция
Недоступна
Импорт класса
Импорт класса
3
Задача
Модуль 2: Fullstack, 7 уровень, 0 лекция
Недоступна
Экспорт по умолчанию
Экспорт по умолчанию
3
Задача
Модуль 2: Fullstack, 7 уровень, 0 лекция
Недоступна
Комбинированный импорт
Комбинированный импорт
Комментарии
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ