मुख्य कंटेंट तक स्किप करें

Модули

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

Экспорт#

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

Playground Link

// Экспорт переменнойlet fruit: string = 'banana',  device: string = 'smartphone',  bool: boolean = trueexport { 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!