В этом руководстве вы узнаете о работе с модулями TypeScript и о том, как использовать их для структурирования своего кода.
Введение в модули TypeScript
Начиная с ES6, JavaScript начал поддерживать модули как нативную часть языка. TypeScript использует ту же концепцию модулей, что и JavaScript.
Модуль TypeScript может содержать как объявления, так и код. Модуль выполняется в своей области, а не в глобальной. Это означает, что когда вы объявляете переменные, функции, классы, интерфейсы и т. д. в модуле, они не видны за пределами модуля, если только вы явно не экспортируете их с помощью инструкции export
.
С другой стороны, если вы хотите получить доступ к переменным, функциям, классам и т. д. из модуля, вам нужно импортировать их с помощью оператора import
.
Как и в ES6, когда файл TypeScript содержит импорт или экспорт верхнего уровня, он рассматривается как модуль.
Создание нового модуля
Далее создается новый модуль с именем Validator.ts
и объявляется интерфейс с именем Validator
:
export interface Validator { isValid(s: string): boolean }
В этом модуле мы поместили ключевое слово export
перед ключевым словом interface
, чтобы сделать его доступным для других модулей.
Другими словами, если вы не используете ключевое слово export
, интерфейс Validator
является закрытым в модуле Validator.ts
, поэтому он не может использоваться другими модулями.
Оператор export
Другой способ экспортировать объявление из модуля — использовать оператор export
. Например:
interface Validator { isValid(s: string): boolean } export { Validator };
TypeScript также позволяет вам переименовывать объявления для потребителей модулей, например:
interface Validator { isValid(s: string): boolean } export { Validator as StringValidator };
В этом примере другие модули будут использовать интерфейс Validator
в качестве интерфейса StringValidator
.
Импорт нового модуля
Чтобы использовать модуль, вы используете оператор import
. Далее создается новый модуль EmailValidator.ts
, который использует модуль Validator.ts
:
import { Validator } from './Validator'; class EmailValidator implements Validator { isValid(s: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(s); } } export { EmailValidator };
Когда вы импортируете модуль, вы можете переименовать его следующим образом:
import { Validator as StringValidator } from './Validator';
Внутри модуля EmailValidator
вместо интерфейса Validator
используется интерфейс StringValidator
:
import { Validator as StringValidator } from './Validator'; class EmailValidator implements StringValidator { isValid(s: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(s); } } export { EmailValidator };
Ниже показано, как использовать модуль EmailValidator
в файле App.ts
:
import { EmailValidator } from './EmailValidator'; let email = 'john.doe@typescripttutorial.net'; let validator = new EmailValidator(); let result = validator.isValid(email); console.log(result);
Выход:
true
Импорт типов
Следующий код объявляет тип, вызываемый в модуле Types.ts
:
export type alphanumeric = string | number;
Чтобы импортировать тип alphanumeric
из модуля Types.ts
, вы можете использовать import type
:
import type {alphanumeric} from './Types';
Обратите внимание, что TypeScript поддерживает import type
, начиная с версии 3.8. До TypeScript 3.8 вместо этого необходимо использовать оператор import
:
import {alphanumeric} from './Types';
Импорт всего из модуля
Чтобы импортировать все из модуля, вы используете следующий синтаксис:
import * from 'module_name';
Реэкспорт
Далее создается новый модуль с именем ZipCodeValidator.ts
, который использует модуль Validator.ts
:
import { Validator } from './Validator'; class ZipCodeValidator implements Validator { isValid(s: string): boolean { const numberRegexp = /^[0-9]+$/; return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator };
Вы можете обернуть EmailValidator
и ZipCodeValidator
в новый модуль, объединив все их экспорты, используя следующий синтаксис:
export * from 'module_name';
В следующем примере показано, как обернуть EmailValidator.ts
и ZipCodeValidator.ts
в модуль FormValidator.ts
:
export * from "./EmailValidator"; export * from "./ZipCodeValidator";
Экспорт по умолчанию
TypeScript позволяет каждому модулю иметь один экспорт по умолчанию. Чтобы пометить экспорт как экспорт по умолчанию, используйте ключевое слово default
.
Ниже показано, как экспортировать ZipCodeValidator
в качестве экспорта по умолчанию:
import { Validator } from './Validator'; export default class ZipCodeValidator implements Validator { isValid(s: string): boolean { const numberRegexp = /^[0-9]+$/; return s.length === 5 && numberRegexp.test(s); } }
Чтобы импортировать экспорт по умолчанию, вы используете другой синтаксис, import
например:
import default_export from 'module_name';
Ниже показано, как использовать экспорт по умолчанию из ZipCodeValidator в файл App.ts
:
import ZipCodeValidator from './ZipCodeValidator'; let validator = new ZipCodeValidator(); let result = validator.isValid('95134'); console.log(result);
Выход:
true
Заключение
- TypeScript разделяет ту же концепцию модуля, что и модуль ES6. Модуль может содержать как объявления, так и код.
- В модуле TypeScript переменные, функции, классы, интерфейсы и т. д. выполняются в своей собственной области, а не в глобальной области.
- Используйте оператор
export
для экспорта переменных, функций, классов, интерфейсов, типов и т. д. из модуля. - Используйте оператор
import
для доступа к экспорту из других модулей.