Skip to main content

Модули

Концепция модулей впервые появилась в стандарте 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, но для того чтобы понять на сколько вы усвоили этот урок пройдите тест в мобильном приложении в нашей школы по этой теме.

Sumerian school

Ссылки

  1. TypeScriptLang
  2. Модули

Contributors ✨

Thanks goes to these wonderful people (emoji key):


IIo3iTiv

📖

Dmitriy Vasilev

💵

Become a Patron!