Работа с модулями в TypeScript

В этом руководстве вы узнаете о работе с модулями 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 для доступа к экспорту из других модулей.