Typescript & Gatsby: gatsby-plugin-ts + graphQL 查詢集成

Question

我正在使用gatsby-plugin-ts為我的 graphql 頁面查詢生成類型。

我遇到的問題是生成的所有類型都返回T | undefined 所有字段的T | undefined類型，所以我需要在任何組件中使用它們之前檢查所有查詢子字段，否則編譯器會拋出錯誤。

以gatsby-plugin-image為例。 給定一個查詢：

export const query = graphql`
  query IndexPage {
    banner: file(relativePath: { eq: "banner.jpg" }) {
      childImageSharp {
        gatsbyImageData(width: 1920)
      }
    }
  }
`;

結果data.banner應傳遞給getImage function，但如果您嘗試這樣做，typescript 可以理解地拋出以下錯誤，因為 undefined 不能分配給getImage預期的IGAtsbyImageData

當涉及到更復雜的查詢時，情況就更糟了，比如來自 markdownremark 插件的查詢：每次都需要手動檢查一個查詢結果的所有子字段。 有解決辦法嗎？

Answer 1

data.banner 的類型應該是 ImageDataLike

export interface DataBannerProps {
  banner: ImageDataLike;
  alt: string;
}

Answer 2

這似乎是由gatsby-plugin-image中的錯誤引起的。 不幸的是getImage 、 getSrc等的類型與它們的 null-safe 行為不匹配。 這看起來也只是部分修復，因為麻煩| null | null類型在{ childImageSharp: { gatsbyImageData: IGatsbyImageData } | null }上下降了一級 { childImageSharp: { gatsbyImageData: IGatsbyImageData } | null } （至少在 GraphQL Typegen 分型 - YMMV 中）。

最簡單的解決方法是使用類型斷言：

const result = getImage(data.banner as ImageDataLike);

這告訴 Typescript：“嘿，我知道這些類型不完全匹配，但相信我， data.banner將永遠是ImageDataLike ”。

---

當然，如果您願意手動定義您的類型，您可以避免所有這些，就像@Alexey 的回答一樣。

如果你想堅持使用自動生成的類型，我建議升級到 Gatsby 內置並保持最新的官方GraphQL Typegen 。