TypeScript compilando tipos como | JavaScript

Gente eu preciso de ajuda com TypeScript. Eu tenho um tipo chamado Header, que foi gerado automaticamente pela lib do Contentful (CMS que estou usando). Só que ainda faltavam algumas chaves no tipo do Contentful, então eu criei este tipo "Header" dos snippets. O problema é que o TypeScript está lendo estes tipos como "never".


//src/types/contentful/TypeHeader.ts

import type { Asset, Entry } from "contentful";

export interface TypeHeaderFields {
    logo?: Asset;
    background?: Asset;
}

export type TypeHeader = Entry<TypeHeaderFields>;


//src/types/index.ts

import * as Contentful from "./contentful";
import type { EntryFields, Asset } from "contentful";

interface Fields {
  fields: {
    logo: {
      fields: {
        title: EntryFields.Symbol;
        description: EntryFields.Symbol;
        file: Asset;
      };
    };
    background: {
      title: EntryFields.Symbol;
      file: Asset;
    };
  };
}

export type Header = Contentful.TypeHeaderFields &
  Fields & {
    contentTypeId: "header";
  };


// src/components/header.component/index.astro
---
import { contentfulClient } from '../../lib/contentful';
import type { Image as ImageType } from "../../types/image"
import type { Entry } from "contentful";
import type { TypeHeader } from "../../types/contentful/TypeHeader"
import { Image, imageConfig } from 'astro:assets';
import type { Header } from "../../types/"

type HeaderEntries = {
  logo: {
    src: string,
    alt: string,
    size: {
      width: number,
      height: number
  }
  },
  background: {
    src: string,
    alt: string,
    size: {
      width: number,
      height: number
  }
  },
}

const { items } = await contentfulClient.getEntries<Header>({
  content_type: "header",
});

let props = {};

items.map((item) => {
  const logoField = item.fields.logo;
  const backgroundField = item.fields.background;

  props = {
    logo: {
      src: logoField.fields.file.url ?? "", //O TypeScript retorna o erro "Property 'fields' does not exist on type 'never'.ts(2339)". Este erro acontece nos outros campos também.
      alt: logoField.description ?? "",
      size: {
        width: logoField.fields.file.details?.image.width ?? "",
        height: logoField.fields.file.details?.image.height ?? ""
      }
    },
    background: {
      src: backgroundField?.fields.file.url ?? "",
      alt: backgroundField?.description ?? "",
      size: {
        width: logoField.fields.file.details?.image.width ?? "",
        height: logoField.fields.file.details?.image.height ?? ""
      }
    }
  };
});

const { logo, background } = props as HeaderEntries;

---
<header>
  <div class="flex justify-center bg-transparent">
    <img
      src={logo.src}
      alt={logo.alt}
    />  
  </div>
  <div>
    <img
      src={background.src}
      alt={background.alt}
    />  
  </div>
</header>

Estou o dia todo tentando resolver este problema mas não acho solução. Agradeço desde já pela ajuda. https://github.com/kellysondias/lp-astro

Olá Kellyson.

Tudo bem?

Pelo que pude entender, você está tendo problemas com o TypeScript interpretando alguns tipos como "never". Isso geralmente acontece quando o TypeScript não consegue inferir o tipo de uma variável ou quando um tipo é inacessível devido a uma condição de tipo.

No seu caso, parece que o problema está na forma como você está tentando acessar as propriedades de logoField e backgroundField. Você está tentando acessar a propriedade fields de logoField e backgroundField, mas o TypeScript não consegue garantir que essa propriedade exista, por isso está retornando "never".

Uma maneira de resolver isso seria verificar se a propriedade fields existe antes de tentar acessá-la. Aqui está um exemplo de como você pode fazer isso:

items.map((item) => {
  const logoField = item.fields.logo;
  const backgroundField = item.fields.background;

  if (logoField && logoField.fields && logoField.fields.file) {
    props = {
      logo: {
        src: logoField.fields.file.url ?? "",
        alt: logoField.description ?? "",
        size: {
          width: logoField.fields.file.details?.image.width ?? "",
          height: logoField.fields.file.details?.image.height ?? ""
        }
      },
      // ...
    };
  }

  if (backgroundField && backgroundField.fields && backgroundField.fields.file) {
    props = {
      // ...
      background: {
        src: backgroundField.fields.file.url ?? "",
        alt: backgroundField.description ?? "",
        size: {
          width: backgroundField.fields.file.details?.image.width ?? "",
          height: backgroundField.fields.file.details?.image.height ?? ""
        }
      }
    };
  }
});

Desta forma, você está garantindo que a propriedade fields e file existem antes de tentar acessá-las, o que deve resolver o problema do TypeScript interpretar esses tipos como "never".

Espero ter entendido e conseguido ajudar. Qualquer dúvida manda aqui. Bons estudos.

Mergulhe em programação