Опциональные свойства, зависящие от других свойств

Чтобы добиться такого поведения в React с использованием TypeScript, можно воспользоваться условными типами для определения свойств компонента в зависимости от наличия свойства truncate. Вот пример, который демонстрирует, как это можно реализовать.

Сначала определим интерфейс для общих свойств:

interface CommonProps {
  children: React.ReactNode;

  // ...другие свойства, которые всегда присутствуют
}

Затем создаем условные типы для свойств TruncateProps:

type TruncateProps =
  | { truncate?: false; showExpanded?: never }
  | { truncate: true; showExpanded?: boolean };

Теперь объединим эти типы с общими свойствами:

type Props = CommonProps & TruncateProps;

Теперь мы можем использовать эти свойства в компоненте Text:

const Text = ({ children, showExpanded, truncate }: Props) => {
  // Здесь `truncate` и `showExpanded` будут иметь тип `boolean | undefined`
  
  return (
    <div>
      {truncate && showExpanded ? (
        <div>{children} (развернуто)</div>
      ) : (
        <div>{children}</div>
      )}
    </div>
  );
};

Таким образом, если truncate равно true, то свойство showExpanded будет доступно, и вы сможете задать логику для отображения текста с возможностью развертывания. Если truncate не указано или установлено в false, то showExpanded не будет доступно, что позволит избежать возникновения ошибок.

Теперь вы можете использовать компонент Text в таком виде:

<Text>not truncated</Text>
<Text truncate>truncated</Text>
<Text truncate showExpanded>truncated w/ expand option</Text>

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