Экспорт компонентов модуля

Пусть у нас будет в проекте файл 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();