Форматы JavaScript

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Форматы JavaScript

JavaScript-код работает в нескольких форматах:

Стандартный файл .js содержит чистый код на языке JavaScript.
Расширение .jsx позволяет писать HTML-подобную структуру внутри скриптов.
Файл .mjs явно указывает на использование современных модулей ECMAScript.
Язык TypeScript с расширением .ts добавляет статическую типизацию к JavaScript.
Файл .tsx объединяет возможности TypeScript и JSX для создания компонентов.

Стандартный JavaScript (JS)

JavaScript — это стандартный формат файла с исходным кодом на языке JavaScript. Файлы имеют расширение .js.

Назначение и применение

Файлы с расширением .js используются для написания логики приложения. Они содержат функции, переменные, классы и алгоритмы обработки данных. В контексте веб-разработки эти файлы отвечают за поведение страницы, взаимодействие с пользователем и работу с данными.

В файлах .js отсутствует визуальная HTML-разметка. Код описывает действия, которые браузер должен выполнить после загрузки страницы. Серверные скрипты также пишутся в этом формате при использовании среды Node.js.

Структура кода

// Объявление переменной
const userName = "Алексей";

// Определение функции
function greet(name) {
  return `Привет, ${name}!`;
}

// Вызов функции
console.log(greet(userName));

Разбор:

const userName = "Алексей" создаёт константу со строкой: это исходные данные, которые затем передаются в функцию.
function greet(name) объявляет функцию с параметром name; параметр получает значение в момент вызова.
Конструкция `Привет, ${name}!` — шаблонная строка: она подставляет значение переменной прямо в текст.
return возвращает готовую строку из функции обратно в место вызова.
console.log(greet(userName)) сначала выполняет greet(userName), получает результат, и только потом печатает его в консоль.

Особенности работы

Среда выполнения браузера или Node.js обрабатывает код напрямую без предварительной трансформации. Файлы могут использовать как старые методы модульности (require, module.exports), так и современные (import, export), если включен соответствующий режим.

Дополнительная информация о стандарте доступна в документации по языку JavaScript и руководстве по Node.js.

JSX (JavaScript XML)

JSX — это расширение синтаксиса языка JavaScript, позволяющее записывать HTML-подобную разметку непосредственно внутри кода. Файлы имеют расширение .jsx.

Назначение и применение

Формат используется преимущественно во фреймворке React для создания визуальных компонентов интерфейса. JSX позволяет разработчикам описывать структуру пользовательского интерфейса, используя привычные теги HTML, но внутри JavaScript-кода.

Браузеры не понимают синтаксис JSX напрямую. Специальный инструмент трансформации, например Babel, преобразует JSX в обычный JavaScript перед выполнением кода. Процесс превращения происходит на этапе сборки проекта.

Пример кода

// Компонент кнопки
function Button() {
  return <button className="primary">Нажми меня</button>;
}

// Компонент с пропсами
function Welcome({ name }) {
  return <h1>Привет, {name}</h1>;
}

Разбор:

function Button() и function Welcome(...) — это React-компоненты: функции, которые возвращают JSX-разметку.
В JSX запись <button ...> и <h1>...</h1> выглядит как HTML, но на этапе сборки преобразуется в вызовы JavaScript.
className используется вместо class, потому что в JSX это свойство объекта, а не HTML-атрибут в чистом виде.
Welcome({ name }) показывает деструктуризацию пропсов: из объекта входных параметров сразу извлекается поле name.
Выражение {name} внутри JSX вставляет значение переменной в разметку и обновляется при изменении данных.

Механизм работы

Компилятор заменяет теги JSX на вызовы функций React.createElement. Это обеспечивает совместимость с обычным JavaScript и позволяет использовать мощные возможности языка для генерации интерфейса.

MJS (Module JavaScript)

MJS — это расширение файла, указывающее на использование модулей ECMAScript (ESM). Файлы имеют расширение .mjs.

Ключевые особенности

Файлы .mjs используют современный синтаксис импорта и экспорта данных. Команды import и export работают без дополнительных настроек конфигурации. Среда выполнения (например, Node.js) интерпретирует такой файл исключительно как модуль.

Отличие от традиционных файлов .js заключается в явном указании типа модульности. Обычные файлы .js часто используют старый формат CommonJS с командами require и module.exports. Файл .mjs гарантирует использование ESM независимо от настроек проекта.

Сравнение подходов

Характеристика	.js (CommonJS)	.mjs (ESM)
Импорт	`require()`	`import`
Экспорт	`module.exports`	`export`
Синхронность	Синхронный	Асинхронный
Динамичность	Статический анализ	Поддержка динамического импорта

Пример кода

// Импорт модуля

import { fetchData } from './api.js';

// Экспорт функции
export function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

Разбор:

import { fetchData } from './api.js' подключает именованный экспорт из другого файла модуля.
export function calculateTotal(items) делает функцию доступной для импорта в других модулях.
Параметр items ожидает массив объектов, где у каждого элемента есть поле price.
reduce сворачивает массив в одно значение: накапливает сумму цен в переменной sum.
Начальное значение 0 во втором аргументе reduce гарантирует корректный результат даже для пустого массива.

Инструменты редактирования

Файлы открываются в любом текстовом редакторе. Популярные среды разработки включают Visual Studio Code, Sublime Text и Notepad++. Редакторы поддерживают подсветку синтаксиса и автодополнение для модулей ESM.

TypeScript (TS)

TypeScript — это надмножество JavaScript, добавляющее статическую типизацию. Файлы имеют расширение .ts.

Назначение и применение

Формат помогает находить ошибки на этапе написания кода, а не во время его выполнения. Разработчик обязан явно указывать типы данных для переменных, параметров функций и возвращаемых значений. Строгая проверка типов предотвращает множество распространенных ошибок.

В файлах .ts содержится только логика программы. Визуальная разметка отсутствует. После написания кода компилятор TypeScript преобразует файл в чистый JavaScript, который может выполняться в любой среде.

Преимущества типизации

Статическая типизация улучшает читаемость кода и облегчает поддержку больших проектов. Интегрированные среды разработки предлагают точное автодополнение и навигацию по коду. Изменения в структуре данных мгновенно отражаются в ошибках компиляции.

Пример кода

Код ITЗагрузка примера кода…

Разбор:

let count: number = 10 задаёт тип number; TypeScript не позволит присвоить сюда строку или другой несовместимый тип.
function add(a — number, b: number): number типизирует и параметры, и возвращаемое значение функции.
interface User описывает контракт объекта: какие поля обязательны и какого они типа.
const user: User = {...} проверяется компилятором на соответствие интерфейсу User.
Типы работают на этапе разработки и компиляции, а в итоговом JavaScript-коде они удаляются.

Отличия от JavaScript

Типы данных в TypeScript существуют только на этапе компиляции. В итоговом коде они отсутствуют. Это обеспечивает безопасность разработки без потери производительности.

TSX (TypeScript XML)

TSX — это формат файла, объединяющий возможности TypeScript и синтаксиса JSX. Файлы имеют расширение .tsx.

Назначение и применение

Формат применяется в проектах на React, написанных на TypeScript. Он позволяет создавать визуальные компоненты с использованием HTML-подобной разметки и одновременно применять строгую проверку типов данных.

Разработчики получают преимущества обоих миров: гибкость JSX для построения интерфейсов и надежность TypeScript для управления типами. Это особенно важно в крупных проектах с множеством компонентов.

Пример кода

Код ITЗагрузка примера кода…

Разбор:

interface CardProps задаёт строгий тип входных пропсов компонента: title и description должны быть строками.
function Card({ title, description }: CardProps) объединяет деструктуризацию и типизацию параметров в одной записи.
JSX-блок return (...) определяет структуру UI: контейнер div, заголовок и текст.
При использовании <Card ... /> TypeScript проверяет, что переданы все обязательные пропсы и правильные типы.
Такой подход снижает количество ошибок в интерфейсе: опечатки в именах пропсов и неверные типы ловятся до запуска.

Особенности реализации

Компилятор проверяет соответствие передаваемых данных интерфейсу компонента. Ошибки в именах свойств или типах данных выявляются до запуска программы. Это снижает количество дефектов в пользовательском интерфейсе.

Форматы JavaScript