Как правильно определить к какому типу относится аргумент функции TypeScript?

Question

Есть функциональный компонент, который принимает в качестве аргумента массив. Массив строк или массив объектов.

Подскажите как правильно сделать проверку на входящий аргумент, чтобы правильно отображались свойства при map массива.

export const SelectFormGroup = ({ values }: SelectFormGroupProps): JSX.Element => {
  let options;
    
  if (values) {      // -->> Категория

    options = values.map(v => (
      <options value=v.category_id>v.title</option>

  } else {          // --> Массив строк ["Активный, "Неактивный"]
    
      options = values.map(v => (
       <options value=v>v</option>
  }

  return (
    <div>
      <select name="" id="">

      </select>
    </div>
  );
};

interface SelectFormGroupProps
  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  values: ICategoryModel[] | IsActive[];
}

interface ICategoryModel {
  category_id: number;
  title: string;
  is_active: boolean;
}

type IsActive = "Активный" | "Неактивный";

Answer 1

nörbörnën, спасибо, додумал к чему

  const options = values.map((value) => {
    if (typeof value == "string") {
      return (
        <option key={value} value={value}>{value}</option>
      );
    } else {
      return (<option key={value.category_id}
                      value={value.category_id}>{value.title}</option>);
    }
  });

БЛОГ НА HUSL

Как правильно определить к какому типу относится аргумент функции TypeScript?

Ответы (1 шт):