Типы TypeScript

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

Примитивные типы

Основные примитивные типы включают:

• string — строки, например: const label: string = "Submit";
• number — числа: const count: number = 5;
• boolean — логические значения: const isOpen: boolean = true;
• null и undefined — специальные значения, используемые для отсутствующих данных.
• any — универсальный тип, позволяющий хранить значения любого типа. Использование any рекомендуется минимизировать.

Пример в контексте React Aria:

import {useButton} from "@react-aria/button";

interface ButtonProps {
  label: string;
  isDisabled?: boolean;
}

export function MyButton(props: ButtonProps) {
  const {buttonProps} = useButton(props);
  return {props.label};
}

Здесь label строго типизирован как string, а isDisabled — как необязательный boolean.

Типы объектов и интерфейсы

Для описания сложных структур данных применяются интерфейсы (interface) и типы объектов (type). Они позволяют определять форму пропсов, возвращаемых значений хуков и состояния компонентов.

interface MenuItem {
  id: string;
  name: string;
  disabled?: boolean;
}

type MenuProps = {
  items: MenuItem[];
  onSelect: (item: MenuItem) => void;
};

Использование этих типов обеспечивает строгую проверку всех операций с элементами меню, включая обработку событий.

Объединение и пересечение типов

TypeScript поддерживает union (|) и intersection (&) типов:

• Union позволяет переменной принимать несколько типов:

let key: string | number;
key = "Enter";
key = 13;

• Intersection объединяет свойства нескольких типов:

interface AriaButtonProps {
  label: string;
}

interface StyleProps {
  className?: string;
}

type ButtonProps = AriaButtonProps & StyleProps;

const button: ButtonProps = { label: "Click", className: "primary" };

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

Типы функций и хуков

Функции, возвращающие значения из React Aria хуков, требуют строгой типизации:

import {useMenu} from "@react-aria/menu";
import {AriaMenuProps} from "@react-aria/menu";

function MyMenu(props: AriaMenuProps