Типизация props

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

Определение props

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

import { c, props } from "atomico";

const buttonProps = props({
    label: String,
    disabled: {
        type: Boolean,
        default: false
    },
    count: {
        type: Number,
        default: 0,
        validate: value => value >= 0
    }
});

function Button({ label, disabled, count }) {
    return <button disabled={disabled}>{label} ({count})</button>;
}

Button.props = buttonProps;

export default c(Button);

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

  • type определяет допустимый тип значения. Поддерживаются базовые типы Jav * aScript: String, Number, Boolean, Object, Array, а также функции.
  • default задает значение по умолчанию, если prop не передан.
  • validate позволяет определить кастомную проверку значений.

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

Atomico полностью совместим с TypeScript, что позволяет строгую типизацию props на этапе компиляции. Типизация выполняется через интерфейсы или типы, определяемые отдельно:

import { c, Props, props } from "atomico";

type ButtonProps = {
    label: string;
    disabled?: boolean;
    count?: number;
};

const buttonProps = props<ButtonProps>({
    label: String,
    disabled: {
        type: Boolean,
        default: false
    },
    count: {
        type: Number,
        default: 0,
        validate: value => value >= 0
    }
});

function Button({ label, disabled, count }: Props<typeof buttonProps>) {
    return <button disabled={disabled}>{label} ({count})</button>;
}

Button.props = buttonProps;

export default c(Button);

Особенности типизации в Atomico с TypeScript:

  • Тип Props<typeof buttonProps> автоматически извлекает типы из объекта props, включая значения по умолчанию.
  • Опциональные поля (disabled?) позволяют компонентах быть гибкими без необходимости явно указывать все props.
  • Проверка значений через validate выполняется на runtime, а TypeScript обеспечивает compile-time контроль типов.

Дефолтные значения и обязательные props

Atomico позволяет различать обязательные и необязательные props. Если значение по умолчанию не указано, prop считается обязательным:

const inputProps = props({
    value: String, // обязательный
    placeholder: {
        type: String,
        default: "Введите текст"
    }
});

В этом примере value обязательно должен быть передан при использовании компонента, а placeholder может быть опущен.

Композиция и наследование props

Для сложных компонентов удобно использовать композицию props, объединяя несколько объектов:

const baseProps = props({
    id: String,
    className: String
});

const extendedProps = props({
    ...baseProps,
    value: String,
    onChange: Function
});

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

Кастомные типы и проверка

Atomico позволяет создавать кастомные валидаторы для сложных структур:

const userProps = props({
    user: {
        type: Object,
        validate: value => value && typeof value.name === "string" && typeof value.age === "number"
    }
});

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

Резюме по типизации props

  • Каждый prop может иметь тип, значение по умолчанию и кастомный валидатор.
  • TypeScript интеграция позволяет строгую проверку на этапе компиляции.
  • Обязательные и опциональные props различаются наличием default.
  • Композиция props упрощает построение сложных компонентов.
  • Кастомные валидаторы повышают надежность работы с внешними данными.

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

Оглавление