Как получить возврат из типа объединения в Typescript

Question

Из библиотеки link-preview- js у нас есть функция getLinkPreview, которая имеет определение типа:

export declare function getLinkPreview(text: string, options?: ILinkPreviewOptions): Promise<{
    url: string;
    mediaType: string;
    contentType: string;
    favicons: any[];
} | {
    url: string;
    title: any;
    siteName: any;
    description: any;
    mediaType: any;
    contentType: string;
    images: string[];
    videos: {
        url: any;
        secureUrl: any;
        type: any;
        width: any;
        height: any;
    }[];
    favicons: any[];
}>;

Когда я пытаюсь использовать его в своем приложении с чем-то вроде этого:

const {images} = await getLinkPreview(payload.link);

Выдает ошибку как в IDE, так и на консоли:

Property 'images' does not exist on type '{ url: string; mediaType: string; contentType: string; favicons: any[]; } | { url: string; title: any; siteName: any; description: any; mediaType: any; contentType: string; images: string[]; videos: { url: any; secureUrl: any; type: any; width: any; height: any; }[]; favicons: any[]; }'.ts(2339)

Как мне обойти это?

PS: Если я пытаюсь удалить первый тип возвращаемого значения из файла определения, это устраняет проблему.

Answer 1

Во время выполнения код не знает, какой объект getLinkPreview() будет разрешен. Typescript не допустит путаницы.

Чтобы обойти это, вам понадобится защита типа.

Несколько вариантов для вас:

1. Использование способа бедняков

const linkPreview = await getLinkPreview(payload.link);

if ('images' in linkPreview) {
   console.log(linkPreview.images)
}

Использование утверждения типа

const linkPreview = await getLinkPreview(payload.link);

if (<SecondObjectInterface>linkPreview.images) {
   console.log(linkPreview.images)
}

// OR
if ((linkPreview as SecondObjectInterface).images) {
   console.log(linkPreview.images)
}

Более подробная информация о защите типа здесь

Answer 2

В этом случае сообщение об ошибке компиляции очень показательно. Он жалуется, потому что этот код пытается выполнить деструктуризацию объекта для извлечения свойства images из объекта, который не может гарантированно содержать это свойство .

Тип возврата getLinkPreview - это тип объединения , что означает, что он возвращает объект, который будет удовлетворять хотя бы одному из членов типа объединения. Поэтому, поскольку getLinkPreview может возвращать объект, который выглядит следующим образом:

{
    url: string;
    mediaType: string;
    contentType: string;
    favicons: any[];
}

TypeScript жалуется, что у этого объекта нет свойства images.

Так как с этим обращаться this?

Как общее решение, вы можете сохранить результат getLinkPreview в переменной, а затем выполнить нулевую проверку для свойства images. Если у него есть уникальное свойство, вы можете привести его к соответствующему типу (возможно, вы захотите провести дополнительное тестирование).