Как правильно описать пропс, который может быть и объектом, и массивом с объектами одинакового типа?

Question

[Alex Mirgorodskiy]

Всем доброго времени суток, столкнулся с неудобной ситуацией в ts.
У меня Пропс может быть как объектом там и массивом объектов

export interface ControlProps {
    value?: string | number
}

export interface ControlsProps {
    [propName: string]: ControlProps | ControlProps[]
}

export interface FormProps {
    controls: ControlsProps | ControlsProps[]
}

Частично этот вариант работает, но много где начинает ругаться например что у ControlsProps нет метода foreach(когда я работаю с объектом controls) и тд.

Не подскажете как вообще правильные ситуации обрабатывать, может подход с ControlsProps | ControlsProps[] в корне неправильный, если это так, направьте в нужном направлении. Заранее спасибо

Comments

[Lynn «Кофеман»]

Но ведь справедливо ругается. Или вы предпочитаете ошибки в рантайме?

[Alex Mirgorodskiy]

забыл учесть что прежде я проверяю является ли элемент массивом

isGroup = Array.isArray(control)

if (isGroup) {

//@ts-ignore
control.forEach((singleControl: ControlProps) => {
addHandlersToUpdateStateForSingleControl(singleControl, controlName, setActiveForm)
})

}

Answer 1

[Алексей Ярков]

например что у ControlsProps нет метода foreach(когда я работаю с объектом controls)

Ну так проверки нужны, типа

if (Array.isArray(prop)) {
  // тут метод forEach вызывать можно, ибо массив
}

может подход с ControlsProps | ControlsProps[] в корне неправильный

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

Comments

[Alex Mirgorodskiy]

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

Тоже поначалу к этому выводу пришел, но на выходе получается лишняя обработка цикла, которая будет только мешать при простом использовании компонента

спасибо большое, проверки юзал, но походу криво для ts конкретно

я делал

let isGroup = Array.isArray(control)
      
    if (isGroup) {
            //@ts-ignore
            control.forEach((singleControl: ControlProps) => {
             ....
            })
    }

Ваш вариант решил проблему

Answer 2

[Дмитрий Беляев]

много где начинает ругаться например что у ControlsProps нет метода foreach

все правильно ругается, по Вашим типам ControlsProps - это plain object, где ключом может быть любая строка, а все значения - ControlProps или массив ControlProps. У произвольного объекта нет метода forEach.

Не подскажете как вообще правильные ситуации обрабатывать, может подход с ControlsProps | ControlsProps[] в корне неправильный

https://www.typescriptlang.org/docs/handbook/2/nar...