Är detta tillvägagångssätt för att åtgärda ett stavfel mellan TypeScript och Contentfuls innehållsleverans-API säkert?

Jag använder Astro och Contentful för att skapa en blogg. Jag har en innehållstyp som heter author som har 3 fält.

Jag arbetar på att skapa en komponent som kommer att lista alla författare. Min kod ser ut som följer:

---
import { contentfulClient } from "../lib/contentful";
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
import type { Asset, EntryFieldTypes } from "contentful";


interface Author {
    contentTypeId: "author",
    fields: {
        fullName: EntryFieldTypes.Text,
        headshot: EntryFieldTypes.AssetLink,
        bio: EntryFieldTypes.RichText
    }
}

const authors = await contentfulClient.getEntries<Author>({
    content_type: "author"
})

---
<h1>Authors</h1>
{
    authors.items.map((author) => (
        <p>{author.fields.fullName}</p>
        <img src={`https:${(author.fields.headshot as any).fields.file.url}`} alt="" srcset="">
    ))
}

Detta fungerar men jag var tvungen att kasta author.fields.headshot som any eftersom TypeScript klagade på att fields inte var en egenskap av headshot. Och min intellisense kunde bara hitta sys som en egenskap av headshot.

Så detta:

<img src={`https:${author.fields.headshot.fields.file.url}`} class="w-full max-w-48" alt="" srcset="">

Fungerar lokalt. Men när jag försöker deploya till Netlify misslyckas bygget eftersom TypeScript inte kompilerar. Min lösning fungerar men det känns farligt. Jag trodde kanske att jag använde fel EntryFieldTypes-egenskap i mitt Author-gränssnitt men AssetLink verkar vara mest lämpligt.

Svar #1

Contentful TypeScript-definitionerna är verkligen något speciellt. Luktar starkt som att de var tvungna att fästa dem på ett dynamiskt JS-bibliotek i efterhand.

Jag tittade på deras handledning som nämner EntryFieldTypes.Asset, vilket inte finns. Men det närmaste jag kom är:

import { type Asset, type EntryFieldTypes } from 'contentful'

const headshot: Asset;

(author.fields.headshot as Asset).fields.file?.url

Observera att as Asset fortfarande behövs, eftersom Entry-typen av någon anledning sätter typen på fältet headshot till never. (author-variabeln är inte av typen Author utan av typen Entry<Author, undefined, string>.)

Slutligen skulle du kunna försöka generera typerna automatiskt.

Svar #2

Jag tror att ditt huvudbildsfält bör vara av typen Asset och inte AssetLink, som är en länk inom en rik textstruktur.

headshot: Asset,