Пусть у нас будет в проекте файл devices.ts:
export interface Device{ name: string; } export class Phone implements Device { name: string; constructor(n:string){ this.name = n; } } export function call(phone: Phone) : void{ console.log("Make a call by", phone.name); }
Чтобы классы, интерфейсы, функции были видны извне, они определяются с ключевым словом export
.
Но мы могли бы и по другому экспортировать все сущности:
interface Device{ name: string; } class Phone implements Device { name: string; constructor(n:string){ this.name = n; } } function call(phone: Phone) : void{ console.log("Make a call by", phone.name); } export {Device, Phone, call};
Чтобы задействовать модуль в приложении, его надо импортировать с помощью оператора import. Например, импортируем класс Phone и функцию Call из выше определенного модуля devices.ts:
import {Phone, call} from "./devices"; let iphone: Phone = new Phone("iPhone X"); call(iphone);
После слова import определяется набор импортируемых типов - класов, интерфейсов, функций, объектов. А после слова from указывается путь к модулю. В данном случае модуль располагается в файле devices.js, который находится в той же папке, поэтому в начале пути ставится точка и далее указывается название файла без расширения. Если бы модуль располагался бы в папке lib, находящеся в текущем каталоге, то название папки также бы включалось в путь к модулю: "./lib/devices".
При экспорте и импорте для компонента модуля можно указать псевдоним с помощью оператора as:
Например, установка псевдонима для компонента при импорте:
import {Phone, call as makeCall} from "./devices.js"; let iphone: Phone = new Phone("iPhone X"); makeCall(iphone);
Так, в данном случае для функции call()
установлен псевдоним makeCall()
, и далее мы обращаемся к функции call()
через ее псевдоним makeCall()
.
Также псевдоним можно установить при экспорте компонента:
interface Device{ name: string; } class Phone implements Device { name: string; constructor(n:string){ this.name = n; } } function call(phone: Phone) : void{ console.log("Make a call by", phone.name); } export {Device, Phone, call as makeCall};
Затем компонент импортируется через его псевдоним:
import {Phone, makeCall} from "./devices.js"; let iphone: Phone = new Phone("iPhone X"); makeCall(iphone);
Можно импортировать сразу весь модуль:
import * as dev from "./devices.js"; let iphone: dev.Phone = new dev.Phone("iPhone X"); dev.makeCall(iphone);
В данном случае модуль импортируется через псевдоним "dev". И, используя этот псевдоним, мы можем обращаться к расположенным в этом модуле типам.
Параметры экспорта по умолчанию позволяют определить тип, который будет импортироваться из модуля по умолчанию. К примеру, добавим новый модуль smartwatch.ts:
export default class SmartWatch{ constructor(private model:string){} printModel(){ console.log(`Model: ${this.model}`); } }
Ключевое слово default позволяет установить класс SmartWatch в качестве типа по умолчанию. И затем мы можем импортировать его следующим образом:
import SmartWatch from "./smartwatch.js"; let watch: SmartWatch = new SmartWatch("Apple Watch"); watch.printModel();
При этом мы можем установить для экспортируемого по умолчанию компонента другое имя:
import Watch from "./smartwatch.js"; let watch: Watch = new Watch("Apple Watch 2"); watch.printModel();