Как можно типизировать сложные props когда компонент принимает сложные типы данных

Для типизации сложных props в React с TypeScript можно использовать интерфейсы или типы. Особенно полезны дженерики для гибкости.

interface User {
  id: number;
  name: string;
  address: {
    city: string;
    street: string;
  };
}

type ComplexProps<T> = {
  data: T[];
  renderItem: (item: T) => React.ReactNode;
  onSelect: (selected: T) => void;
};

function ComplexComponent<T>({ data, renderItem, onSelect }: ComplexProps<T>) {
return (
<div>
{data.map((item) => (
<div key={JSON.stringify(item)} onClick={() => onSelect(item)}>
{renderItem(item)}
</div>
))}
</div>
);
}

// Использование
<ComplexComponent<User>
data={users}
renderItem={(user) => <span>{user.name}</span>}
onSelect={(user) => console.log(user.address.city)}
/>

Для вложенных структур можно использовать Utility Types (Partial, Pick, Omit) или создавать собственные сложные типы.