Object или Boolean, как объявить тип в Typescript

Question

Обнаружена проблема с объявлением типа в React.

interface MessageCardProps {
  message: {
    id: string;
    title: string;
    content: string;
    attachments: string[];
    interest_count: number;
  };
}

const MessageCard: FC<MessageCardProps> = ({
  message: { id, title, content, attachments, interest_count },
}) => {
  // ERROR: Type 'string | false' is not assignable to type 'boolean | { url: string; }'.
  const image: { url: string } | boolean =
    attachments.length > 0 ? attachments[0] : false;

  return (
    {/* Property 'url' does not exist on type 'true | { url: string; }'.*/}
    {image && <img className={style.img} src={image.url} alt="timeline" />}
  );
};

export default MessageCard;

Как правильно объявить тип const image? Это может быть либо объект со свойством URL, либо логическое значение.

Answer 1

Первая проблема заключается в том, что attachments[0] вернет строку, а не объект со свойством url. Таким образом, вы можете использовать тип string | boolean. Есть ли конкретная c причина, по которой вы хотите обернуть его в объект?

Если вы используете string | boolean, вы можете сделать src={image}

Редактировать:

Вы можете даже улучшить это даже больше, просто не использование логического значения вообще и использование факта, что null является ложным значением. Тогда вы можете сделать это.

const image: string = attachments.length > 0 ? attachments[0] : null;

return (
  {image && <img className={style.img} src={image} alt="timeline" />}
);

Редактировать 2:

Как оказалось, свойство attachments в MessageCardProps не должно быть массивом строки, но массив объектов со свойством под названием «URL». Вот как это должно выглядеть:

interface MessageCardProps {
  message: {
    id: string;
    title: string;
    content: string;
    attachments: {URL: string}[];
    interest_count: number;
  };
}

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

const image: string = attachments.length > 0 ? attachments[0].URL : null;

Answer 2

Полагаю, вы хотите, чтобы изображение устанавливалось только в том случае, если установлено вложение [0]?

Если да, я набрал бы этот способ. (есть самый быстрый и простой способ сделать это, но в этом коде используется объединение типов и typeof):

const attachments:Array<string> = ["/test"]

interface IImage {url:string | boolean }
const image : IImage  = attachments.length > 0 ? {url:attachments[0]} : {url:false}}

return(

        {image && typeof image.url==='string' && image.url!=="" && (<p>I have a valid url</p>)}

)