Преобразование типов

Haunted — это библиотека для создания веб-компонентов с использованием функционального подхода и реактивного состояния на основе Hooks. Одним из важных аспектов работы с Haunted является правильное управление типами данных, особенно при передаче свойств (props) компонентам и работе с внутренним состоянием. Преобразование типов играет ключевую роль в обеспечении корректного рендеринга и предсказуемого поведения.

Свойства компонентов и типизация

В Haunted компоненты обычно определяются как функции:

import { html, component } from 'haunted';

function MyComponent({ count }) {
  return html`<p>Количество: ${count}</p>`;
}

customElements.define('my-component', component(MyComponent));

Свойства, передаваемые через атрибуты HTML, всегда приходят в виде строк. Например:

<my-component count="10"></my-component>

В этом случае count будет строкой "10", а не числом. Если требуется арифметическая обработка, необходимо выполнить преобразование:

const numericCount = Number(count);

Важно учитывать возможные значения undefined или некорректные строки:

const numericCount = count ? Number(count) : 0;

Преобразование булевых значений

Булевые свойства чаще всего передаются через наличие атрибута, а не через значение:

<my-component disabled></my-component>

В Haunted можно использовать хелпер для обработки булевых значений:

const isDisabled = disabled !== null;

Если атрибут отсутствует, значение будет null, что автоматически позволяет определить false.

Для более явного управления часто используют кастомный хук useProp с проверкой типов:

import { useState, useEffect } from 'haunted';

function BooleanPropComponent({ active }) {
  const [isActive, setIsActive] = useState(active === '' || active === 'true');

  useEffect(() => {
    setIsActive(active === '' || active === 'true');
  }, [active]);

  return html`<p>Состояние: ${isActive}</p>`;
}

Преобразование объектов и массивов

При передаче сложных структур через атрибуты необходимо сериализовать их в JSON:

<my-component data='[1, 2, 3]'></my-component>

В компоненте:

const dataArray = JSON.parse(data || '[]');

Это обеспечивает корректное получение массивов или объектов, даже если атрибут отсутствует.

Для объектов предпочтительно использовать строгую проверку:

let configObject;
try {
  configObject = JSON.parse(config || '{}');
} catch(e) {
  configObject = {};
}

Внутреннее состояние и приведение типов

Haunted активно использует хуки useState для управления состоянием. Тип значения состояния напрямую влияет на поведение компонента:

import { useState } from 'haunted';

function Counter({ initial }) {
  const [count, setCount] = useState(Number(initial) || 0);

  return html`
    <p>Счётчик: ${count}</p>
    <button @click=${() => setCount(count + 1)}>+</button>
  `;
}

Если initial не преобразовать к числу, любое сложение будет конкатенацией строк.

Практика безопасного преобразования типов

  1. Строки → числа: использовать Number() или parseInt()/parseFloat(), учитывая проверку на NaN.
  2. Строки → булевые: проверка на пустую строку или 'true'/'false'.
  3. JSON → объекты/массивы: JSON.parse() с обработкой ошибок.
  4. Любое значение → строку: String(value) гарантирует корректный рендер в шаблоне.

Пример комплексного компонента с безопасным приведением типов:

function UserCard({ name, age, active, tags }) {
  const userAge = Number(age) || 0;
  const isActive = active === '' || active === 'true';
  let userTags = [];

  try {
    userTags = JSON.parse(tags || '[]');
  } catch(e) {
    userTags = [];
  }

  return html`
    <div>
      <h3>${String(name)}</h3>
      <p>Возраст: ${userAge}</p>
      <p>Активен: ${isActive}</p>
      <ul>
        ${userTags.map(tag => html`<li>${String(tag)}</li>`)}
      </ul>
    </div>
  `;
}

Взаимодействие с TypeScript

Haunted отлично сочетается с TypeScript, что позволяет явно задавать типы для props:

interface UserCardProps {
  name: string;
  age?: string | number;
  active?: string | boolean;
  tags?: string;
}

function UserCard({ name, age, active, tags }: UserCardProps) { ... }

TypeScript помогает предотвратить ошибки преобразования типов ещё на этапе компиляции, особенно при сложных структурах данных.

Рекомендации по практическому использованию

  • Всегда контролировать тип входных данных через атрибуты.
  • Для чисел и булевых значений выполнять явное преобразование внутри компонента.
  • Для массивов и объектов использовать JSON-парсинг с защитой от ошибок.
  • При работе с состоянием учитывать исходный тип, чтобы избежать неожиданных багов, связанных с конкатенацией или логическими операциями.

Правильное преобразование типов повышает стабильность компонентов Haunted, делает код более предсказуемым и облегчает интеграцию с HTML и TypeScript.

Оглавление