Модули в TypeScript
Эта статья объясняет модули в TypeScript.
YouTube Video
Модули в TypeScript
Модули в TypeScript — это важная функция, улучшающая повторное использование и поддержку кода. Как и JavaScript, TypeScript основан на системе модулей ECMAScript 2015 (ES6), но его ключевой особенностью является возможность использования системы типов TypeScript.
Что такое модули?
Модуль — это система группировки связанного кода в единый блок, который можно импортировать и повторно использовать в других файлах. В TypeScript создается область видимости для каждого файла, чтобы инкапсулировать код и не позволять ему влиять на другие файлы. Это помогает избежать конфликтов кода и упрощает его поддержку.
Внутренние и внешние модули
- Внутренние модули (пространства имен): Способ определения модулей, использовавшийся в TypeScript 1.5 и ранее, сейчас не рекомендуется. Сейчас это рассматривается как «пространство имен».
- Внешние модули: Текущий стандарт, основанный на системе модулей ES6. Этот раздел в основном объясняет внешние модули.
Как экспортировать модули
При создании модулей экспортировать их обязательно для обеспечения доступа извне. В TypeScript можно экспортировать значения, функции, классы и т. д., используя ключевое слово export. Существует два основных типа экспорта.
Именованный экспорт
Используется для создания нескольких экспортов, позволяя стороне импорта выбирать и использовать конкретные.
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}Экспорт по умолчанию
Используется, когда вы хотите, чтобы весь модуль имел один экспорт по умолчанию. Экспорт по умолчанию происходит без имени, позволяя стороне импорта принимать их под любым именем.
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}Как импортировать модули
Для использования модулей вы импортируете значения, функции, классы и т.д. из модуля с помощью ключевого слова import.
Именованные импорты
При импорте конкретных элементов из именованного экспорта используйте фигурные скобки {}.
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);Импорты по умолчанию
При импорте экспорта по умолчанию вы можете назначить ему любое имя.
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);Псевдонимы для импорта
Чтобы избежать конфликтов имен или сократить длинные имена, вы можете использовать псевдонимы для импорта.
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);Разница между модулями и пространствами имен
Пространство имен (namespace) — это внутренняя структура модуля, использовавшаяся на ранних этапах TypeScript для группировки кода. Однако сейчас рекомендуется использовать модули ES6, и пространства имен практически не нужны.
Пространства имен могут быть определены в пределах одного файла или между несколькими, и из-за их глобального расширения управление зависимостями может стать затруднительным. В отличие от этого, модули имеют отдельные области видимости для каждого файла и имеют четко определённые зависимости, что делает их современным и безопасным способом работы.
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);Разрешение модулей в TypeScript
В TypeScript существуют две стратегии разрешения модулей.
- Node Module Resolution: Стандартный метод разрешения, используемый в среде Node.js, который ищет модули в папке
node_modules. - Classic Module Resolution: Собственный метод разрешения в TypeScript, обеспечивающий более гибкий поиск, но редко используемый в наше время.
Как правило, используется разрешение модулей Node, которое включено по умолчанию, если не указано иное в конфигурационном файле.
Практический пример
Наконец, представлен пример реализации и повторного использования вычислительных функций с использованием модулей.
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);Резюме
Система модулей TypeScript — это мощный инструмент для организации кода, повышения его повторного использования и улучшения сопровождаемости. Рекомендуется использовать внешние модули на основе модулей ES6, а использование ключевых слов export и import позволяет легко экспортировать и импортировать модули.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.