Типизация свойств

Типизация свойств формирует основу предсказуемого взаимодействия между компонентом и его окружением. Slim.js предоставляет механизм строгих и гибких свойств, обеспечивая контроль типов, значений по умолчанию и способов обновления интерфейса.

Объявление свойств

Свойства объявляются в статическом объекте props у класса компонента. Каждое свойство описывается конфигурацией, где ключ — имя свойства, а значение — объект с параметрами:

class Counter extends Slim {
  static props = {
    count: { type: Number, default: 0 },
    title: { type: String },
    enabled: { type: Boolean, default: true }
  };
}

При создании компонента Slim.js анализирует предоставленные типы и значения, формируя внутренние реактивные поля и связанный атрибут DOM, если он задан.

Типы свойств

Slim.js поддерживает примитивные типы Jav * aScript: String, Number, Boolean, Object, Array и Function. При присвоении значения Slim.js выполняет преобразование для соответствия объявленному типу. Например, для Boolean значения "", "true" и "false" приводятся к логическим.

Строковые свойства

Строковые свойства удобно использовать для простых текстовых значений и отображения в шаблоне. В случае передачи атрибутов DOM все значения считаются строковыми, и Slim.js попытется конвертировать их, если тип определён другим образом.

Числовые свойства

Числовые свойства автоматически парсятся с помощью Number(). Если парсинг неудачен, значение становится NaN. Для компонентов интерфейса часто используются числовые свойства для индексов, размеров, счётчиков и идентификаторов.

Логические свойства

Логические свойства учитывают особенности HTML-атрибутов. Наличие атрибута без значения интерпретируется как true. Передача строки "false" даёт логическое false. Такой подход упрощает управление состоянием включено/выключено.

Сложные типы: объекты и массивы

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

Функции как свойства

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

Значения по умолчанию

Значение по умолчанию задаётся через ключ default. Оно используется, если внешнее окружение не предоставило значения. Для сложных типов рекомендуется задавать фабричную функцию, чтобы избежать общих ссылок:

items: { type: Array, default: () => [] }

Такой подход гарантирует, что каждый экземпляр компонента получит независимую структуру.

Автоматическое связывание со свойствами DOM

Если свойство соответствует имени атрибута, Slim.js создаёт двухстороннее связывание. Значения, полученные через атрибуты, проходят преобразование к типу, указанному в конфигурации. Это позволяет лаконично описывать API компонента через HTML:

<counter count="10" enabled></counter>

Реактивность и обновление шаблона

При изменении типизированного свойства Slim.js инициирует обновление связанного фрагмента шаблона. Для сложных типов обновление может не происходить автоматически при изменении вложенных данных, поэтому предпочтительно обновлять свойство целиком:

this.items = [...this.items, newItem];

Такое присваивание запускает реактивный цикл и приводит к обновлению отображения.

Валидность значения и преобразования

Slim.js предполагает, что типизация служит не только для удобства, но и для защиты API. При некорректных значениях компонент продолжает работу, но оставляет преобразованное значение или undefined. Практика явной проверки значений на уровне компонента помогает поддерживать надёжные инварианты.

Полезные шаблоны проектирования

  • Разделение свойств на входные и внутренние повышает читаемость.
  • Использование фабрик для значений по умолчанию исключает побочные эффекты.
  • Чёткое определение типов снижает нагрузку на шаблон и логику компонента.
  • Сложные структуры данных предпочтительно передавать через объекты, а не строковые атрибуты.

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

Оглавление