Валидация пропсов

В Preact, как и в React, компоненты получают данные через props, которые позволяют передавать параметры и настраивать поведение компонентов. Корректность этих данных критична для стабильной работы приложения, поэтому часто требуется их валидация.

Типы и структура пропсов

Prop (сокращение от property) представляет собой объект, содержащий ключи и значения. Например:

function Button({ label, onClick }) {
    return <button onCl ick={onClick}>{label}</button>;
}

Здесь label — строка, onClick — функция. Если передать неправильный тип, компонент может работать некорректно или вызвать ошибки.

В Preact нет встроенной строгой проверки типов пропсов на уровне выполнения, как в некоторых фреймворках. Однако можно использовать PropTypes через отдельный пакет prop-types или TypeScript для статической типизации.

Использование PropTypes

Библиотека prop-types позволяет описать типы пропсов и выдавать предупреждения в консоль при их нарушении. Пример:

import PropTypes from 'prop-types';
import { h } from 'preact';

function Button({ label, onClick }) {
    return <button onCl ick={onClick}>{label}</button>;
}

Button.propTypes = {
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func
};

В этом примере:

  • label обязательно должен быть строкой.
  • onClick — функция, но не обязательная. Если передать другой тип, в консоли появится предупреждение.

Основные типы PropTypes

  • PropTypes.string — строка
  • PropTypes.number — число
  • PropTypes.bool — булевый тип
  • PropTypes.func — функция
  • PropTypes.array — массив
  • PropTypes.object — объект
  • PropTypes.node — любой renderable элемент
  • PropTypes.element — элемент Preact (JSX)
  • PropTypes.oneOf([...]) — одно из заранее заданных значений
  • PropTypes.arrayOf(Type) — массив элементов указанного типа
  • PropTypes.shape({...}) — объект с определенной структурой

Пример с более сложной структурой:

Profile.propTypes = {
    user: PropTypes.shape({
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        email: PropTypes.string
    }).isRequired,
    isActive: PropTypes.bool
};

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

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

Button.defaultProps = {
    label: 'Нажми меня',
    onClick: () => {}
};

Валидация через TypeScript

TypeScript обеспечивает более строгую проверку на этапе компиляции. Типизация пропсов выглядит следующим образом:

import { FunctionalComponent, h } from 'preact';

interface ButtonProps {
    label: string;
    onClick?: () => void;
}

const Button: FunctionalComponent<ButtonProps> = ({ label, onClick }) => (
    <button onCl ick={onClick}>{label}</button>
);

TypeScript гарантирует, что:

  • label всегда передан и является строкой.
  • onClick может быть опциональным и функцией.

Валидация динамических данных

Иногда пропсы передаются из внешних источников, например, API. В таких случаях рекомендуется проверять данные вручную внутри компонента:

function UserCard({ user }) {
    if (!user || typeof user.name !== 'string') {
        return <div>Некорректные данные</div>;
    }
    return <div>{user.name}</div>;
}

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

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

  • Использовать PropTypes в проектах на JavaScript для простых проверок.
  • Использовать TypeScript для полного контроля типов на этапе компиляции.
  • Всегда задавать defaultProps для необязательных пропсов.
  • Проверять динамические данные из внешних источников вручную.
  • Для сложных структур объектов предпочтительно использовать PropTypes.shape или интерфейсы TypeScript.

Валидация пропсов — важный инструмент для повышения устойчивости компонентов и снижения числа ошибок в приложении, особенно в крупных проектах с множеством вложенных компонентов.

Оглавление