Типизация компонентов

Atomico — это современная библиотека для создания веб-компонентов на JavaScript, которая предоставляет удобные механизмы для декларативного описания состояния, свойств и событий компонентов. Типизация играет ключевую роль в обеспечении надежности, предсказуемости поведения и автодополнения в редакторах кода, особенно при использовании TypeScript.

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

Свойства (props) в Atomico задаются с помощью функции prop, которая позволяет указывать тип, значение по умолчанию и некоторые дополнительные параметры. Типизация свойств гарантирует правильное использование компонента как при чтении, так и при модификации его состояния.

Пример типизированного свойства:

import { c, prop } from "atomico";

const Button = c({
    props: {
        label: prop.string({ default: "Нажми меня" }),
        disabled: prop.boolean({ default: false }),
        count: prop.number(),
    },
    render({ label, disabled, count }) {
        return <button disabled={disabled}>{label} ({count})</button>;
    }
});

Ключевые моменты:

  • prop.string(), prop.boolean(), prop.number() — встроенные функции для типизации.
  • Значение default автоматически применяется, если свойство не передано.
  • При использовании TypeScript компилятор проверяет соответствие типов при присвоении значений свойствам.

Кастомные типы и валидация

Atomico позволяет определять свойства с пользовательскими типами или ограниченными значениями, что особенно полезно для создания строгих интерфейсов компонентов.

Пример перечисления допустимых значений:

const Alert = c({
    props: {
        type: prop.string<"success" | "warning" | "error">({ default: "success" }),
        message: prop.string(),
    },
    render({ type, message }) {
        return <div class={`alert ${type}`}>{message}</div>;
    }
});

Особенности:

  • Использование TypeScript generics (<...>) позволяет ограничить набор допустимых значений.
  • Автодополнение в редакторах подсказывает допустимые варианты.
  • Ошибка компиляции возникает, если свойство передается с недопустимым значением.

Типизация событий

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

import { c, useEvent } from "atomico";

type ToggleEventDetail = { checked: boolean };

const Toggle = c({
    props: { checked: prop.boolean({ default: false }) },
    render({ checked }) {
        const toggle = useEvent<CustomEvent<ToggleEventDetail>>("toggle");
        return (
            <input
                type="checkbox"
                checked={checked}
                onCha nge={(e) => toggle({ detail: { checked: e.target.checked } })}
            />
        );
    }
});

Особенности типизации событий:

  • Использование CustomEvent<T> обеспечивает строгость структуры данных.
  • При подписке на событие TypeScript проверяет тип detail, что предотвращает ошибки при обработке событий.

Типизация состояния и хука useState

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

import { c, useState } from "atomico";

const Counter = c({
    render() {
        const [count, setCount] = useState<number>(0);
        return (
            <button onCl ick={() => setCount(count + 1)}>
                Счетчик: {count}
            </button>
        );
    }
});

Особенности:

  • Тип, указанный в useState<Type>(), контролирует значение и функции обновления.
  • Предотвращает присвоение некорректных типов (например, строки вместо числа).

Интерфейсы и типы для сложных компонентов

Для сложных компонентов с большим количеством свойств и событий удобно определять интерфейсы TypeScript. Это делает код более читаемым и поддерживаемым.

interface ModalProps {
    title: string;
    visible: boolean;
    onClose?: () => void;
}

const Modal = c<ModalProps>({
    props: {
        title: prop.string(),
        visible: prop.boolean({ default: false }),
        onClose: prop.any(),
    },
    render({ title, visible, onClose }) {
        if (!visible) return null;
        return (
            <div class="modal">
                <h2>{title}</h2>
                <button onCl ick={onClose}>Закрыть</button>
            </div>
        );
    }
});

Преимущества подхода:

  • Интерфейсы объединяют типы всех свойств компонента.
  • Упрощается масштабирование проекта и интеграция с внешними библиотеками.
  • Улучшается автодополнение и статическая проверка типов.

Выводы по типизации

Типизация компонентов в Atomico — это не просто рекомендация, а инструмент для повышения надежности, предотвращения ошибок и улучшения поддержки кода. Использование встроенных функций prop, явных generic-типов для событий и состояния, а также интерфейсов TypeScript позволяет создавать масштабируемые, предсказуемые и безопасные компоненты.

Типизация охватывает все ключевые элементы:

  • Свойства — строгость значений, значения по умолчанию, пользовательские типы.
  • События — контроль структуры detail, безопасная передача данных.
  • Состояние — управление типами данных в useState.
  • Интерфейсы и generic — стандартизация и поддержка сложных компонентов.

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

Оглавление