In a SPFx web part, how can I get description and Url from a SP.FieldUrlValue?

Question

I have a SharePoint list with a Link column of type Hyperlink or Picture.

How do I access the description and url values in code?

export interface ISPList {
  Title: string;
  Link: object;
}

export default class ConagraCalloutsWebPart extends BaseClientSideWebPart <IConagraCalloutsWebPartProps> {

  private _getListData(): Promise<ISPLists> {
    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('MyList')/Items",SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
    });
  }

private _renderList(items: ISPList[]): void {
    let html: string = "";
    items.forEach((item: ISPList) => {
      html += `
        <a href="${item.Link.Url}">
        ${item.Link.description}
        </a>
      `;
    });

In the browser I can see the values are being retrieved as follow:

<d:Link m:type="SP.FieldUrlValue">
<d:Description>COVID-19 Updates</d:Description>
<d:Url>https://www.google.com</d:Url>
</d:Link>

I am trying to use object, but it does not work.

Answer 1

Got it!

export type FieldUrlValue = {
  [name: string]: {
      Description: string,
      Url: string
  }
};