Что такое модули в Typescript?
В этой статье мы поговорим о том, какие типы модулей представлены в TypeScript. Прежде чем мы обсудим типы модулей, мы посмотрим, что такое концепция модуля. Посмотрим.
Когда в ES6 появилась концепция модуля, JavaScript начал поддерживать концепцию модуля как часть библиотеки JavaScript. Когда на сцену выходит TypeScript, он также разделяет модуль с JavaScript. Модуль TypeScript позволяет ему содержать как объявление, так и его код. Модуль выполняется в локальной среде, а не в глобальной области. Это означает, что когда мы определяем функции, переменные, классы, интерфейсы и т. д. в модуле, они не могут быть видны за пределами модуля, пока вы не сможете экспортировать модуль с помощью оператора экспорта. Если вы хотите получить доступ к переменным и функциям в модуле, вы должны импортировать модуль в свой файл с помощью оператора импорта.
Типы модулей в TypeScript: Модуль предназначен для написания организованного кода. Модули TypeScript разделены на две части:
- Внутренний модуль
- Внешний модуль
1. Внутренний модуль. Внутренний модуль используется для логической группировки переменных, функций, классов и интерфейсов в одном модуле, а затем их экспорта в другой модуль. TypeScript дает имя этой логической группировки в качестве пространства имен в последней версии. В старых модулях концепции namespace нет, вместо namespace мы используем традиционный способ использования модулей в старых версиях.
Синтаксис:
import { sample_file } from “./sample_file”;Пример 1: Мы напишем сообщение, которое отображает и экспортирует сообщение, используя экспорт по умолчанию.
- сообщение.js
Javascript
const message = () => { const name = "Jesse"; const age = 40; return name + " is " + age + "years old.";};export default message; |
- index.html
HTML
<!DOCTYPE html><html> <body> <h1 style="color:green">Hello GFG</h1> <h1>JavaScript Modules</h1> <p id="demo"></p> <script type="module"> import message from "./message.js"; document.getElementById("demo").innerHTML = message(); </script></body> </html> |
Выход:
2. Внешний модуль. Внешние модули в TypeScript используются для указания и загрузки зависимостей между несколькими внешними js-файлами. Если используется только один файл js, то в этом случае внешние модули не используются. В этом случае мы используем традиционное управление зависимостями между файлами JavaScript с помощью тегов сценария браузера (<script></script>).
Но это не всегда возможно, так как при загрузке модулей это очень линейно. Это означает, что вместо загрузки файлов один за другим нет возможности асинхронной загрузки модулей. Когда вы программируете js для сервера, например, NodeJ, у вас даже нет тегов script.
Синтаксис:
export interface sample_file {
...
}Существует два альтернативных способа загрузки зависимых файлов JS из одного файла JavaScript. Они есть:
- Сторона клиента: RequireJs
- Сторона сервера: NodeJs
Выбор загрузчика модуля: для поддержки загрузки внешних файлов JavaScript в модуль мы будем использовать загрузчик модуля. Это будет сделано с помощью другой js-библиотеки RequireJs. RequireJS — самая популярная библиотека, используемая для браузеров.
Это реализовано спецификацией AMD (определение асинхронного модуля). Вместо загрузки файлов по одному AMD позволяет загружать их все по отдельности, даже если они зависят друг от друга.
Определение внешнего модуля: при определении внешнего модуля в TypeScript используйте CommonJS или AMD и рассматривайте каждый файл как модуль. Поэтому необязательно использовать внутренний модуль во внешнем модуле.
Если вы переносите TypeScript с модульных систем AMD на CommonJs, дополнительная работа не требуется. Единственное, что вам нужно изменить, это просто флаг компилятора. В отличие от JavaScript, при переходе с CommonJ на AMD или наоборот возникают накладные расходы.
Пример 1: Этот пример иллюстрирует использование внешнего модуля с отдельными файлами:
- Script.ts
Javascript
export function multiple(x: number, y: number): number { log(`${x} * ${y}`); return x + y;}function log(message: string): void { console.log("Numbers", message);} |
- Index.js
Javascript
import { multiple } from "./script";console.log("Value of x*y is:", multiple(6, 2)); |
Шаги для запуска приложения: во-первых, преобразуйте файл TypeScript в JavaScript, для этого вам нужно выполнить следующую команду на соответствующем терминале.
tsc Script.ts
После этого вам нужно запустить файл JavaScript с помощью модуля Node. как показано ниже.
node Index.js
Выход:
Пример 2: Этот пример иллюстрирует использование внешнего модуля с несколькими файлами:
- Student.ts: в этом примере Student.ts — это модуль, который содержит две переменные и определение класса. Перед переменными stuCode, stuName и классом Student стоит ключевое слово export. Экспортируйте класс Student и переменные.
Javascript
export class Student { stuCode: number; stuName: string; constructor(name: string, code: number) { this.stuName = name; this.stuCode = code; } displayStudent() { console.log("Student Code: " + this.stuCode + ", Student Name: " + this.stuName); }} |
- StudentDetails.ts: мы экспортировали переменную и класс в файл Student.ts. Однако мы можем импортировать только модуль экспорта Student в StudentDetails.js, который мы собираемся использовать.
Javascript
import { Student } from "./Student";let empObj = new Student("Jhon", 100);empObj.displayStudent(); |
Шаги для запуска приложения: во-первых, преобразуйте файл TypeScript в JavaScript, для этого вам нужно выполнить следующую команду на соответствующем терминале.
tsc StudentDetails.ts
После этого вам нужно запустить файл JavaScript с помощью модуля Node. как показано ниже.
node StudentDetails.js
Выход: