Reactjs 对象或布尔值如何在Typescript中声明类型

在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;

接口消息cardprops{
信息：{
id：字符串；
标题：字符串；
内容：字符串；
附件：字符串[]；
利息：数目；
};
}
const MessageCard:FC=({
消息：{id、标题、内容、附件、兴趣\计数}，
}) => {
//错误：类型“string | false”不可分配给类型“boolean |{url:string；}”。
常量图像：{url:string}|布尔值=
附件长度>0？附件[0]：false；
返回(
{/*属性“url”在类型“true”{url:string；}上不存在。*/}
{image&&}
);
};
导出默认消息卡；

---

声明常量图像类型的正确方法是什么？它可以是具有URL属性的对象，也可以是布尔值。

我猜您希望仅在设置了附件[0]时才设置图像

如果是，我会这样打字。（有一些最快捷、更简单的方法可以做到这一点，但这段代码不支持类型联合和类型联合的用法）：

const附件：数组=[“/test”]
接口IImage{url:string | boolean}
常量图像：IImage=attachments.length>0？{url:attachments[0]}:{url:false}
返回(
{image&&typeof image.url=='string'&&image.url！==''&&（我有一个有效的url
）}
)

第一个问题是

附件[0]

将返回字符串，而不是带有

url

属性的对象。因此，您可以使用类型

string | boolean

。您希望将其包装到对象中的具体原因是什么

如果使用

string | boolean

，则可以执行

src={image}

编辑：

您甚至可以通过根本不使用布尔值，并且使用

null

是一个虚假的值这一事实来改进这一点。那你就可以这么做了

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

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

现在，要获得第一张图像，您可以执行以下操作：

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

---

仍在接收：

Type'string | null'不可分配给Type'string'。

。附件包含以下信息：```“附件”：[{“URL”：“URL”，}]``@MapMyMind然后

MessageCardProps

中的

附件

具有错误的类型定义。它应该是

附件：{URL:string}[]

。然后可以使用

attachments.length>0？附件[0]。URL:null

另外，是否使用strictNullChecks？然后image需要是string或null，如下面的

const image:string | null=…

没错，接口中的声明是错误的。将

附件：字符串[]

更改为

附件：{URL:string}[]。谢谢
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;