LETUNOFF DOCS

TSX. Сортировка свойств интерфейсов (props types)

🧱 Суть

Порядок свойств не влияет на работу приложения, но сильно влияет на читаемость.

📦 Проблема

TypeScript не зависит от порядка полей:

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

и

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

одинаковы для компилятора.

✅ Решение

Рекомендуемый порядок props

Логика такая: сначала данные → потом поведение → потом внешний вид

1. Данные

Что компонент получает для работы:

options: SelectOption[];
placeholder: string;

2. Поведение и состояние

Как компонент работает:

disabled?: boolean;
error?: boolean;

3. Визуальные настройки

Как компонент выглядит:

variant?: 'default' | 'ghost';
size?: 'sm' | 'md' | 'lg';
fullWidth?: boolean;
align?: 'left' | 'center';

💻 Код

interface SelectProps
	extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
 
	// 1. Данные
	options: SelectOption[];
 
	// 2. Поведение
	placeholder: string;
	error?: boolean;
	disabled?: boolean;
 
	// 3. Внешний вид
	variant?: 'default' | 'ghost' | 'custom';
	size?: 'sm' | 'md' | 'lg';
	fullWidth?: boolean;
	align?: 'left' | 'center' | 'right';
}

Простое правило

Если сомневаешься:

Сначала:

  • что отображаем;
  • какие данные нужны.
    Потом:
  • какие состояния есть;
  • как компонент реагирует.
    В конце:
  • как он выглядит.

🎯 Вывод

Хорошая структура props:

  1. обязательные данные;
  2. поведение и состояния;
  3. визуальные параметры;
  4. остальные HTML-атрибуты через расширение.

🔗 Связано

Обратные ссылки