Типы для метаданных

В библиотеке MDX метаданные играют ключевую роль в описании и управлении содержимым документа. Метаданные в MDX обычно задаются через frontmatter, который оформляется в виде YAML-блока в начале файла .mdx. Этот блок позволяет структурировать информацию о документе, такую как заголовок, дата публикации, автор и т. д., и использовать её в приложениях на React.

---
title: "Пример документа MDX"
date: "2026-03-23"
author: "Иван Иванов"
tags: ["javascript", "mdx", "tutorial"]
---

Основные типы метаданных

  1. Строковые значения (string) Строки являются наиболее распространённым типом данных в метаданных. Их используют для заголовков, описаний, имен авторов.

    interface MetadataString {
  title: string;
  author: string;
}

  2. Даты (Date) Даты применяются для публикаций, событий, сроков. В MDX YAML-формат поддерживает ISO-формат даты. В TypeScript рекомендуется приводить строки к типу Date для строгой типизации.

    interface MetadataDate {
  date: Date;
}

const metadata: MetadataDate = {
  date: new Date("2026-03-23")
};

  3. Булевы значения (boolean) Используются для флагов, например, публикации документа или включения определённой функциональности.

    interface MetadataBoolean {
  published: boolean;
}

const metadata: MetadataBoolean = {
  published: true
};

  4. Массивы (Array) Массивы позволяют хранить несколько значений одного типа, например, теги или категории. Важно явно указывать тип элементов массива для корректной типизации.

    interface MetadataArray {
  tags: string[];
}

const metadata: MetadataArray = {
  tags: ["mdx", "typescript", "tutorial"]
};

  5. Сложные объекты (Object) Метаданные могут содержать вложенные структуры, например, информацию об авторе, включающую имя, email и роль.

    interface Author {
  name: string;
  email: string;
  role?: string;
}

interface MetadataObject {
  author: Author;
}

const metadata: MetadataObject = {
  author: {
    name: "Иван Иванов",
    email: "ivan@example.com",
    role: "Editor"
  }
};

Совместное использование типов

MDX позволяет комбинировать разные типы в одном блоке метаданных. Для строгой типизации в TypeScript создаётся единый интерфейс, объединяющий все свойства:

interface MDXMetadata {
  title: string;
  date: Date;
  author: Author;
  tags: string[];
  published: boolean;
}

const metadata: MDXMetadata = {
  title: "Пример документа MDX",
  date: new Date("2026-03-23"),
  author: { name: "Иван Иванов", email: "ivan@example.com" },
  tags: ["javascript", "mdx", "tutorial"],
  published: true
};

Использование типов в приложении

В React-приложениях метаданные часто импортируются и используются для генерации списков, фильтрации контента и SEO-оптимизации. При интеграции с TypeScript типизация метаданных обеспечивает автодополнение и проверку корректности данных на этапе компиляции:

import metadata from "./example.mdx";

function DocumentHeader() {
  return (
    <header>
      <h1>{metadata.title}</h1>
      <p>Автор: {metadata.author.name}</p>
      <time dateTime={metadata.date.toISOString()}>
        {metadata.date.toLocaleDateString()}
      </time>
    </header>
  );
}

Практические рекомендации

  • Всегда использовать строгую типизацию для всех полей метаданных.
  • Для массивов указывать конкретный тип элементов (string[], Author[]).
  • Для дат приводить строки из YAML к типу Date.
  • Использовать необязательные поля (?) для метаданных, которые могут отсутствовать.
  • Организовывать вложенные объекты для сложных структур, таких как авторы или источники.

Эта структура позволяет строить масштабируемые проекты на MDX с уверенностью, что данные будут валидными и полностью типизированными.

Оглавление