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

Question

[FronzZ]

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

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

type CompanyInfoSectionProps = {
  title: string;
  to: string;
  items: string[];
  [key: string]: string | boolean;
};

Comments

[Антон Горецкий]

возможно, окажется полезным Как вывести тип с исключением значений?

[Aetae]

Вот тут есть магия: https://stackoverflow.com/questions/61431397/how-t...
Оно позволит через зад получить такой результат. Но в цело лучше так не делать.:)

Answer 1

[Alexandroppolus]

В данной постановке задачи - никак.

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

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

Можно для названий всех доп. пропсов задать какой-то шаблон. Например, вот так они все должны начинаться на символ подчеркивания:

type CompanyInfoSectionProps = {
    title: string;
    to: string;
    items: string[];
    [key: `_${string}`]: string | boolean;
};

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