@FronzZ

Как типизировать пропсы в компоненте React?

Всем привет! Подскажите пожалуйста, как типизировать пропсы в React? Например у меня есть определенные свойства которые обязательны для компонента и ключи известны. Но могут добавиться любый дополнительные пропсы имя ключей которых не известно, известно что они могут быть либо строкой либо булевым значением).

Изначально написал так, но так ругается что 'Свойство 'items' типа 'string[]' не может быть присвоено индексному типу 'string | boolean''.

type CompanyInfoSectionProps = {
  title: string;
  to: string;
  items: string[];
  [key: string]: string | boolean;
};
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@Alexandroppolus
кодир
В данной постановке задачи - никак.

[key: string]: string | boolean; предполагает, что у тебя значения всех пропсов, кроме пропсов-симболов, должны быть в рамках string | boolean. Ну а массив строк не вписывается.

Здесь для key нужен тип "все строки, кроме 'items' ", но TS на данный момент такое не может.

Можно для названий всех доп. пропсов задать какой-то шаблон. Например, вот так они все должны начинаться на символ подчеркивания:
type CompanyInfoSectionProps = {
    title: string;
    to: string;
    items: string[];
    [key: `_${string}`]: string | boolean;
};


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

Войдите, чтобы написать ответ

Похожие вопросы