TypeScript — Модули

TypeScript — Модули

От автора: модули были разработаны с целью организации кода. В TypeScript модули обычно разделяются на: Внутренние Модули и Внешние Модули.

 

Внутренние Модули

Внутренние модули появились в ранней версии Typescript. Их использовали для того, чтобы логически сгруппировать классы, интерфейсы, функции в один элемент и экспортировать в другой модуль. Такое логическое группирование в последней версии TypeScript называется пространством имён. Так что внутренние модули устарели, вместо этого мы можем использовать пространство имён. Внутренние модули всё ещё поддерживаются, но рекомендуется использовать именно пространство имён.

Синтаксис внутренних модулей (старый)

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Синтаксис пространства имён (новый)

JavaScript в обоих случаях выглядит одинаково

Внешние модули

Внешние модули в TypeScript были созданы для того, чтобы задавать и загружать зависимости между множественными внешними js-файлами. Если используется только один js-файл, то использование внешних модулей нецелесообразно. Долгое время управление зависимостями между JavaScript файлами проводилось с использованием тэгов script браузера (). Но оно не расширяется, так как является линейным во время загрузки модулей. Это значит, что нет возможности асинхронного варианта загрузки модулей, вместо загрузки файлов один за другим. Когда вы создаёте js, например, для сервера NodeJsу, у вас даже нет тэгов script.

Существует два сценария для загрузки зависимых js файлов от единственного главного JavaScript файла.

Сторона клиента — RequireJs

Сторона сервера — NodeJs

Выбор загрузчика модулей

Для поддержки загрузки внешних файлов JavaScript, нам нужен загрузчик модулей. Таковым является другая js библиотека. Наиболее употребляемой библиотекой для браузера является RequieJS. Она была представлена спецификацией AMD (Асинхронное определение модуля). Вместо того, чтобы загружать файлы один за другим, AMD может загружать их по отдельности, даже когда они зависят друг от друга.

Определение внешнего модуля

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

Если вы перемещаете TypeScript от модульной системы AMD до CommonJs, то не требуется никаких дополнительных действий. Единственное, что придётся изменить — это флаг компилятора. В отличие от JavaScript, здесь есть служебные операции по переходу от CommonJs к AMD или наоборот.

Синтаксис для объявления внешнего модуля заключается в использовании ключевых слов ‘export’ и ‘import’.

Для того, чтобы использовать объявленный модуль в другом файле, нужно использовать ключевое слово import, как это показано в примере ниже. Указывается только имя файла, без расширения.

Давайте рассмотрим пример.

Команда, используемая для компиляции главного TypeScript файла для систем AMD, следующая:

После компиляции мы получим следующий код JavaScript для AMD.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Файл: IShape.js

Файл: Circle.js

Файл: Triangle.js

Файл: TestShape.js

Команда, используемая для компиляции главного TypeScript файла для Commonjs систем, следующая:

После компиляции мы получим следующий код JavaScript для Commonjs.

Файл: Circle.js

Файл: Triangle.js

Файл: TestShape.js

Результат

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Курс по TypeScript

Прямо сейчас посмотрите курс по TypeScript!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree