Gatsby.jsでTypescriptのコンポーネントを作ってみた

サークルサイトの再構築をするにあたり、Typescriptを導入してみました。

「最近の記事」コンポーネント

GraphQLで取得したデータに型を指定する

interface StaticQueryProps {
  allMarkdownRemark: {
    edges: Edge[]
  }
}

interface Edge {
  node: {
    frontmatter: {
      date: string
      title: string
    }
    id: string
  }
}

const recentPost: React.FC = () => (
  <StaticQuery
    query={graphql`
      query RecentPostQuery {
        allMarkdownRemark(limit: 4, sort: { fields: frontmatter___date, order: DESC }) {
          edges {
            node {
              frontmatter {
                date(formatString: "YYYY/MM/DD")
                title
              }
              id
            }
          }
        }
      }
    `}
    render={(data: StaticQueryProps) =>
      data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>{node.frontmatter.title}</div>
        //  component
      ))
    }
  />
)

メリット

• Propsとして下位コンポーネントに引数を渡す際、「あれ？このProps何入ってたっけ」といちいち上位コンポーネントのコード読む必要がなくなる（このコンポーネントだとそうなってない）（PropsTypesでもいい）
• MarkdownRemarkあたりのデータ構造、適当にえいやで動くように書いていたものの構造をしっかり理解してコードを書けるので手戻りが少ない