Пропсы и их типы

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Компонент — обычная функция, и параметр у неё ровно один, сколько бы атрибутов вы ни написали в разметке. React собирает их в объект и передаёт целиком. Имя props — просто традиция, аргумент можно назвать как угодно.

tsx

function Row(props: { label: string; value: string }) {
  console.log(props);
  return (
    <p>
      {props.label}: <strong>{props.value}</strong>
    </p>
  );
}

function App() {
  return (
    <div>
      <Row label="Город" value="Дубай" />
      <Row label="Валюта" value="дирхам" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

Два тега — два вызова функции, поэтому в выводе две строки. Внутри Row нет ни атрибутов, ни узлов DOM: есть объект с полями label и value — ровно с теми именами, что стоят в JSX.

Имена почти всегда достают прямо в сигнатуре — это обычная деструктуризация из части I. И вот что важнее синтаксиса: в шаблонной строке из части II любое значение становилось текстом, а в пропсах оно остаётся собой.

tsx

function Stat({ label, value, done }: { label: string; value: number; done: boolean }) {
  console.log(typeof label, typeof value, typeof done);
  return (
    <p>
      {label}: {value * 2} — {done ? "готово" : "в работе"}
    </p>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Stat label="Статей" value={92} done={false} />
);

страница примера

Сначала предположите, что выведет код

value приехало числом, и его можно умножить прямо в разметке; done приехало булевым, и его можно проверить. В render() из части II для этого пришлось бы держать данные отдельно от строки разметки и не путать их — здесь компилятор следит за этим сам.

Атрибут в кавычках — строка, атрибут в фигурных скобках — выражение JavaScript. Отсюда value={92}, а не value="92".

Атрибут key выглядит как проп, но в объект пропсов не попадает: React забирает его себе, чтобы узнавать элементы между перерисовками. Прочитать его внутри компонента нельзя — если значение нужно и там, его передают вторым, обычным пропом.

tsx

function Row(props: { label: string }) {
  console.log(Object.keys(props));
  return <li>{props.label}</li>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <ul>
    <Row key="a" label="Первый" />
    <Row key="b" label="Второй" />
  </ul>
);

страница примера

Сначала предположите, что выведет код

Пока у параметра нет типа, компилятор не знает о компоненте ничего — и под strict сразу говорит об этом той же диагностикой, что и в части III.

tsx

function Tag(props) {
  return <b>{props.text}</b>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Tag text="черновик" />);

страница примера

Сначала предположите, что выведет код

Тип пропсов объявляют рядом с компонентом и называют по его имени: PriceProps. Дальше начинается то, ради чего в React вообще берут TypeScript.

tsx

interface PriceProps {
  title: string;
  amount: number;
}

function Price({ title, amount }: PriceProps) {
  return (
    <p>
      {title} — {amount} дирхамов
    </p>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Price title={2024} amount={990} />
);

страница примера

Сначала предположите, что выведет код

Компилятор указал на атрибут title. Но кадр под примером не пустой: React честно нарисовал «2024 — 990 дирхамов». Типы стираются при сборке — компилятор ругается, браузер выполняет получившийся JavaScript. Диагностика здесь не защита во время работы, а разговор с вами до запуска.

Ошибиться можно ещё двумя способами: забыть обязательный проп и передать лишний. Оба ловятся на месте использования.

tsx

interface PriceProps {
  title: string;
  amount: number;
}

function Price({ title, amount }: PriceProps) {
  return (
    <p>
      {title} — {amount} дирхамов
    </p>
  );
}

function App() {
  return (
    <div>
      <Price title="Кофе" />
      <Price title="Чай" amount={12} color="red" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

Пропущенный amount — это undefined, а undefined React просто не рисует: в кадре осталась дырка между тире и словом «дирхамов». Без типов такие дырки ищут глазами по готовой странице.

Что сделали	Что скажет компилятор
Передали число в `title: string`	Тип «number» не может быть назначен для типа «string».
Не передали `amount`	Свойство «amount» отсутствует в типе «{ title: string; }» и является обязательным в типе «PriceProps».
Передали лишний `color`	Свойство «color» не существует в типе «IntrinsicAttributes & PriceProps».

IntrinsicAttributes в тексте ошибки — служебный тип React: в нём живёт то, что React забирает себе, вроде key.

Компонент можно писать парным тегом. Всё, что окажется внутри, React положит в проп с зарезервированным именем children — и объявить его в типе придётся вам.

tsx

interface PanelProps {
  title: string;
  // всё, что окажется между открывающим и закрывающим тегом
  children: React.ReactNode;
}

function Panel(props: PanelProps) {
  console.log(Object.keys(props));
  return (
    <section>
      <h3>{props.title}</h3>
      {props.children}
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Panel title="Итоги недели">
    <p>Написано 5 статей.</p>
    <p>Осталось 179.</p>
  </Panel>
);

страница примера

Сначала предположите, что выведет код

В объекте пропсов два поля, хотя атрибут написан один. Тип React.ReactNode означает «то, что React умеет нарисовать»: строка, число, элемент, массив элементов, null. Он намеренно широкий — в него влезает и текст, и целое поддерево.

Забыть про children в типе — частая ошибка первых дней. Сам компонент при этом компилируется без единого замечания, ругань появляется там, где его используют.

tsx

interface PanelProps {
  title: string;
}

function Panel({ title }: PanelProps) {
  return <section><h3>{title}</h3></section>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Panel title="Итоги">
    <p>Написано 5 статей.</p>
  </Panel>
);

страница примера

Сначала предположите, что выведет код

Ничего волшебного в парной записи нет: то же самое можно передать атрибутом. React разбирает содержимое тега и кладёт его в поле children — оба варианта дают одинаковый элемент.

tsx

interface NoteProps {
  children: React.ReactNode;
}

function Note({ children }: NoteProps) {
  return <p>{children}</p>;
}

const nested = <Note>важное</Note>;
const asProp = <Note children="важное" />;
console.log(nested.props.children, asProp.props.children);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>{nested}{asProp}</div>
);

страница примера

Сначала предположите, что выведет код

Пишут, конечно, парным тегом: вложенную разметку так видно глазами. Но помнить, что это поле объекта, полезно — например, когда children нужно достать из пропсов и разложить по местам.

Знак вопроса делает проп необязательным: тип поля становится string | undefined, а компилятор перестаёт требовать атрибут. Значение по умолчанию задают там же, где достают имя, — в деструктуризации.

tsx

interface LabelProps {
  text?: string;
}

function Label({ text = "нет данных" }: LabelProps) {
  // кавычки в выводе — чтобы было видно, где строка начинается и кончается
  console.log(JSON.stringify(text));
  return <li>{text}</li>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <ul>
    <Label />
    <Label text={undefined} />
    <Label text="" />
  </ul>
);

страница примера

Сначала предположите, что выведет код

Третья строка вывода — пустые кавычки, а третий пункт списка пуст. Значение по умолчанию подставляется ровно тогда, когда пришло undefined: пустая строка, ноль и false — законные значения, и подменять их никто не станет. Это правило деструктуризации из части I, React ничего к нему не добавляет.

Если пустую строку тоже нужно считать «ничем», это делают явно — оператором || внутри компонента. Тогда решение видно в коде, а не прячется в сигнатуре.

А null в необязательный проп не пройдёт: «необязательный» — это про undefined, и strictNullChecks из части III держит эту границу.

tsx

interface LabelProps {
  text?: string;
}

function Label({ text = "нет данных" }: LabelProps) {
  return <li>{text}</li>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Label text={null} />);

страница примера

Сначала предположите, что выведет код

Старый способ задавать умолчания — статическое поле Component.defaultProps — в настоящем проекте на функциональном компоненте не работает: разметку там переписывают в jsx из react/jsx-runtime, а тот этого поля не читает вовсе. Проверить это в песочнице не выйдет: здесь трансформ классический, и React.createElement поле пока подставляет — то есть приём «работает» ровно до переноса в проект. Умолчания живут в деструктуризации.

Необязательный проп — обещание вызывающему, а не поблажка себе. Если без значения компонент бессмыслен, пусть проп будет обязательным.

Часто компонент — тонкая обёртка над обычным тегом: своя пара пропсов плюс всё, что и так умеет <button>. Перечислять атрибуты кнопки руками бессмысленно, тип берут готовый — React.ComponentProps<"button">.

tsx

// свои пропсы плюс всё, что понимает настоящая кнопка
interface ActionProps extends React.ComponentProps<"button"> {
  tone: "main" | "quiet";
}

function Action({ tone, children, ...rest }: ActionProps) {
  console.log(Object.keys(rest));
  return (
    <button className={tone} {...rest}>
      {children}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Action tone="main" type="button" title="подсказка">
      Сохранить
    </Action>
    <Action tone="quiet" disabled>
      Отмена
    </Action>
  </div>
);

страница примера

Сначала предположите, что выведет код

...rest — остаточная деструктуризация из части I: туда попадает всё, что вы не разобрали по именам. Спред {...rest} в разметке раскладывает объект обратно в атрибуты, поэтому type, title и disabled доезжают до настоящей кнопки нетронутыми.

Заодно компилятор теперь знает про кнопку всё, что знает React, — и про ваш собственный проп тоже.

tsx

interface ActionProps extends React.ComponentProps<"button"> {
  tone: "main" | "quiet";
}

function Action({ tone, children, ...rest }: ActionProps) {
  return <button className={tone} {...rest}>{children}</button>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Action tone="loud">Сохранить</Action>
    <Action tone="main" href="/save">Сохранить</Action>
  </div>
);

страница примера

Сначала предположите, что выведет код

Первая диагностика про tone — это литеральные типы из части III: «loud» не входит в объединение. Вторая ловит href, которого у кнопки нет, и даже предлагает замену — компилятор ищет похожее имя среди допустимых.

Проверка лишних свойств работает только для литерала, написанного на месте, — это раздел «Тот же объект, но литералом» статьи «Структурная типизация и проверка лишних свойств» из части III. Разложите тот же объект спредом — и проверка выключится: лишнее поле уедет в компонент, а компилятор не скажет ни слова.

tsx

interface RowProps {
  label: string;
  value: string;
}

function Row({ label, value }: RowProps) {
  return <p>{label}: {value}</p>;
}

const data = { label: "Город", value: "Дубай", extra: 1 };

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Row {...data} />
    <Row {...{ label: "Валюта", value: "дирхам", extra: 1 }} />
    <Row label="Год" value="2026" extra={1} />
  </div>
);

страница примера

Сначала предположите, что выведет код

Ругань будет только на последней строке — там, где extra написан атрибутом. Отсюда практическое правило: {...данные} в разметке — место, где типы защищают слабее всего, и туда стоит подавать объект известного типа, а не собранный по дороге.

Компонент — функция с одним параметром: все атрибуты тега React собирает в объект пропсов.
В пропсы приезжают настоящие значения, а не текст: число остаётся числом, булево — булевым.
Тип пропсов объявляют рядом с компонентом; несовпадение показывается диагностикой компилятора, но выполнение она не отменяет — типы стираются при сборке.
children — обычный проп с зарезервированным именем: React кладёт туда содержимое парного тега, а объявить его в типе нужно самому.
Значение по умолчанию задают в деструктуризации, и подставляется оно только вместо undefined — пустая строка и ноль проходят как есть.
Остаток пропсов пробрасывают спредом, взяв тип у настоящего тега через React.ComponentProps; проверка лишних свойств при спреде не работает.

1/4Компонент объявлен с interface PriceProps { title: string; amount: number }, а в разметке написано <Price title={2024} amount={990} />. Что произойдёт при запуске примера?

2/4Что такое children в React?

3/4У компонента сигнатура function Label({ text = "нет данных" }: LabelProps). Что покажет <Label text="" />?

4/4В разметке написано <Row key="a" label="Первый" />. Какие ключи будут у объекта пропсов внутри Row?

Типизировать карточку

Компонент принимает заголовок, цену и признак скидки. Типа у пропсов нет, поэтому компилятор молчит про оба вызова — а они оба неверны: цена приехала строкой, а во втором теге её вообще нет. Объявите ProductProps, разберите пропсы деструктуризацией и почините вызовы.

tsx

// Карточка должна принимать заголовок (строка), цену (число) и признак
// скидки (булево). Типа нет — и в вызовах компилятор не видит ничего дурного
function Product(props) {
  return (
    <p>
      {props.title} — {props.price} дирхамов {props.sale ? "со скидкой" : ""}
    </p>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Product title="Кофе" price="990" sale={false} />
    <Product title="Чай" />
  </div>
);

страница примера

Сначала предположите, что выведет код

Интерфейс называем по имени компонента и кладём рядом с ним. После этого компилятор сам показывает оба неверных вызова.

tsxлистинг · не запускается

interface ProductProps {
  title: string;
  price: number;
  sale: boolean;
}

function Product({ title, price, sale }: ProductProps) {
  return (
    <p>
      {title} — {price} дирхамов {sale ? "со скидкой" : ""}
    </p>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Product title="Кофе" price={990} sale={false} />
    <Product title="Чай" price={45} sale />
  </div>
);

interface ProductProps {
  title: string;
  price: number;
  sale: boolean;
}

function Product({ title, price, sale }: ProductProps) {
  return (
    <p>
      {title} — {price} дирхамов {sale ? "со скидкой" : ""}
    </p>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Product title="Кофе" price={990} sale={false} />
    <Product title="Чай" price={45} sale />
  </div>
);

Строка "990" рисовалась не хуже числа — ровно поэтому её и нужно ловить типом: сломается она не в разметке, а на первом умножении. А sale без значения — это sale={true}, привычное сокращение из HTML.

Врезка с содержимым

Callout должен принимать любую вложенную разметку и необязательный заголовок со значением «Заметка» по умолчанию. Сейчас компилятор ругается на оба использования: children в типе не объявлен, и внутрь <aside> ничего не попадает.

tsx

interface CalloutProps {
  title?: string;
  // ваш код: объявить children
}

function Callout({ title = "Заметка" }: CalloutProps) {
  return (
    <aside>
      <h4>{title}</h4>
      {/* ваш код: сюда должно попасть содержимое врезки */}
    </aside>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Callout>
      <p>Пропсы — это аргументы функции.</p>
    </Callout>
    <Callout title="Ловушка">
      <p>Значение по умолчанию подставляется только вместо undefined.</p>
    </Callout>
  </div>
);

страница примера

Сначала предположите, что выведет код

Добавляем children в тип, достаём его в деструктуризации рядом с заголовком и ставим в разметку.

tsлистинг · не запускается

interface CalloutProps {
  title?: string;
  children: React.ReactNode;
}

function Callout({ title = "Заметка", children }: CalloutProps) {
  return (
    <aside>
      <h4>{title}</h4>
      {children}
    </aside>
  );
}

interface CalloutProps {
  title?: string;
  children: React.ReactNode;
}

function Callout({ title = "Заметка", children }: CalloutProps) {
  return (
    <aside>
      <h4>{title}</h4>
      {children}
    </aside>
  );
}

title остаётся необязательным, children — обязательный: врезка без содержимого бессмысленна, и пусть об этом скажет компилятор, а не пустая рамка на странице.

Поле поверх настоящего input

Field должен принимать свой проп label и всё, что понимает <input>, — не перечисляя атрибуты руками. Сейчас компилятор ругается на оба вызова: в первом лишний placeholder, во втором — type. До disabled он не доходит: о лишнем свойстве компилятор сообщает по одному на тег.

tsx

interface FieldProps {
  label: string;
}

function Field({ label }: FieldProps) {
  return (
    <label>
      {label} <input />
    </label>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <Field label="Имя" placeholder="Рико" />
    <Field label="Возраст" type="number" disabled />
  </div>
);

страница примера

Сначала предположите, что выведет код

Наследуем тип пропсов настоящего поля и пробрасываем остаток спредом.

tsлистинг · не запускается

interface FieldProps extends React.ComponentProps<"input"> {
  label: string;
}

function Field({ label, ...rest }: FieldProps) {
  return (
    <label>
      {label} <input {...rest} />
    </label>
  );
}

interface FieldProps extends React.ComponentProps<"input"> {
  label: string;
}

function Field({ label, ...rest }: FieldProps) {
  return (
    <label>
      {label} <input {...rest} />
    </label>
  );
}

Всё, что не разобрано по именам, оказывается в rest и уезжает на <input>. Если завтра понадобится maxLength или required, менять в компоненте нечего — они уже входят в React.ComponentProps<"input">.

Пропсы и их типы

Видеоразбор темы за 5–7 минут

Пропсы — это аргументыОдин объект вместо списка параметров

Тип пропсовИнтерфейс рядом с компонентом и диагностика прямо в разметке

childrenРазметка между тегами — тоже проп

Необязательные пропсы и значения по умолчаниюВопросительный знак, значение по умолчанию и его ловушка

Проброс остальных пропсовСвой компонент поверх настоящей кнопки

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Типизировать карточку

Врезка с содержимым

Поле поверх настоящего input