Модули

Концепция модулей впервые появилась в стандарте ECMAScript 2015. Модули позволяют разбить сложное приложение на отдельные файлы, в каждом из которых содержится строго определенный функционал, а после, с помощью импортирования, собрать их воедино. Переменные, классы, функции, объявленные в модуле, не доступны извне этого модуля, если они не экспортируются с помощью команды export. А для того, чтобы использовать экспортированные части в другом модуле, нужно их импортировать, воспользовавшись командой import.

Экспорт

Любое объявление можно экспортировать с помощью ключевого слова export.

Playground Link

// Экспорт переменной
let fruit: string = 'banana',
  device: string = 'smartphone',
  bool: boolean = true
export { fruit, device, bool as isBool }

// Экспорт константы
export const e = 2.7182818284590452353602874713526625

// Экспорт функции
export function sum(x, y: number): number {
  return x + y
}

// Экспорт интерфейса
export interface Fruit {
  name: string;
  sweetness: number;
  bones: boolean;
}

// Экспорт класса
export class Animal {
  move(distanceInMeters: number = 0) {
    console.log(`Animal moved ${distanceInMeters}m.`)
  }
}

// Экспорт всего сразу
export { fruit, e, sum, Fruit, Animal }

Экспорт по умолчанию

С помощью ключевого слова default можно делать экспорт по умолчанию.

Playground Link

export default class User {
    constructor(public name) {}
}

Импорт

Подключить экспортируемую функциональность модуля можно с помощью ключевого слова import.

Playground Link

// Импорт пример
import { A, B } from './scripts'

// Импорт для экспорта по умолчанию
import User from './users'

// Импорт с другим именем
import { A as a, B } from './scripts'

// Импорт всех модулей
import * as scripts from './scripts'
let a = scripts.A

Реэкспорт

В модуле можно выполнить реэкспорт функционала какого-то другого модуля при помощи конструкции export .. from. При этом локально импорт не производится и переменная не создается.

Playground Link

export { B as b } from './scripts'

Вопросы

Теперь мы готовы с вами изучать TypeScript, но для того чтобы понять на сколько вы усвоили этот урок пройдите тест в мобильном приложении в нашей школы по этой теме.