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

В SkateJS типизация свойств компонентов играет ключевую роль для обеспечения предсказуемого поведения элементов, контроля значений и автоматической синхронизации с атрибутами DOM. Свойства (props) компонента определяются в объекте props, где каждому свойству можно назначить тип, значение по умолчанию и дополнительные конфигурации.

Определение свойств с типами

Свойства объявляются с использованием вспомогательных типов, предоставляемых SkateJS, таких как String, Number, Boolean, Array, Object, а также через пользовательские валидаторы. Простейший пример:

import { define, props, Component } from 'skatejs';

class MyComponent extends Component {
  static props = {
    name: props.string,
    age: props.number,
    isActive: props.boolean
  };
}
define('my-component', MyComponent);

Здесь каждое свойство имеет строгий тип. SkateJS автоматически приводит значения, заданные через HTML-атрибуты, к соответствующему типу:

<my-component name="Иван" age="30" is-active></my-component>
  • name будет строкой "Иван",
  • age автоматически преобразуется в число 30,
  • isActive получает значение true, так как булевы свойства интерпретируются по наличию атрибута.

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

Каждое свойство можно снабдить значением по умолчанию, которое используется, если атрибут не задан.

static props = {
  name: props.string({ default: 'Гость' }),
  age: props.number({ default: 18 }),
  isActive: props.boolean({ default: false })
};

Если <my-component> не содержит атрибутов, SkateJS присвоит свойства: name = "Гость", age = 18, isActive = false.

Пользовательские валидаторы

Для более сложной типизации можно использовать функцию validate. Она проверяет корректность значения перед установкой и выбрасывает предупреждение при несоответствии.

static props = {
  score: props.number({
    validate(value) {
      return value >= 0 && value <= 100;
    },
    default: 0
  })
};

Попытка присвоить score = 150 вызовет предупреждение, и свойство не изменится.

Свойства с кастомным типом

SkateJS позволяет создавать собственные типы через функцию props.custom. Это удобно для объектов, массивов или сложных структур.

static props = {
  user: props.custom({
    attribute: false, // не синхронизировать с атрибутом
    default: () => ({ name: '', email: '' }),
    coerce(value) {
      return typeof value === 'object' ? value : {};
    }
  })
};
  • attribute: false предотвращает автоматическую синхронизацию с HTML-атрибутами.
  • coerce позволяет преобразовывать входные значения к нужной структуре.

Синхронизация свойств с атрибутами

По умолчанию SkateJS связывает свойства с атрибутами DOM. Типизация обеспечивает корректное преобразование:

  • String – любые значения приводятся к строке.
  • Number – строковые значения из атрибута автоматически конвертируются в числа.
  • Boolean – присутствие атрибута устанавливает true, отсутствие – false.
  • Array/Objects – можно настроить через coerce или отключить синхронизацию с атрибутом.
static props = {
  items: props.array({ attribute: false }),
};

Свойство items становится локальным состоянием компонента и не связано с HTML-атрибутом, что важно для массивов и объектов.

Изменение свойств и реактивность

Свойства SkateJS реактивны: изменение любого свойства вызывает перерисовку компонента через метод render.

this.name = 'Мария'; // автоматически вызывает перерисовку

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

Объединение типов

Иногда необходимо разрешить несколько типов для одного свойства. SkateJS поддерживает такой подход через props.any.

static props = {
  value: props.any({ default: 0 }) // может быть числом или строкой
};

При этом SkateJS не приводит тип автоматически, но гарантирует, что свойство всегда будет задано.

Краткий список ключевых возможностей типизации

  • Автоматическое приведение типов при чтении из атрибутов.
  • Значения по умолчанию для всех свойств.
  • Пользовательские валидаторы для строгого контроля данных.
  • Кастомные типы с возможностью coerce и отключением атрибутов.
  • Реактивность: изменение свойства вызывает обновление компонента.
  • Поддержка комбинированных и неопределенных типов (any).

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

Оглавление