Форматы 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));

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

Среда выполнения браузера или 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>;
}

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

Компилятор заменяет теги 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);
}

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

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

---

TypeScript (TS)

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

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

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

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

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

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

Пример кода

// Переменная со строгим типом
let count: number = 10;

// Функция с типами параметров
function add(a: number, b: number): number {
  return a + b;
}

// Объект с описанием структуры
interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: "Мария"
};

Отличия от JavaScript

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

---

TSX (TypeScript XML)

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

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

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

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

Пример кода

// Интерфейс для пропсов компонента
interface CardProps {
  title: string;
  description: string;
}

// Компонент с проверкой типов
function Card({ title, description }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

// Использование компонента
<Card 
  title="Заголовок" 
  description="Описание контента" 
/>

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

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

---