Property ‘xxxxxx’ does not exist on type ‘T | undefined’. のエラーの消し方

動作環境

typescript@4.7.4
VSCode
react@18.2.0
next@12.2.2

エラーの状況

このサイトのコードをコピペして実行しようと思ったら、タイトルのエラーが出ました。エラーの出た箇所は以下のコードの14行目の{ posts }のところです。

import Link from 'next/link';
import { useQuery } from '@apollo/client';
import { POSTS_QUERY, PostsData } from '../../src/graphql/queries/posts.query';
import { NextPage } from 'next';

interface PostsListProps {}

const PostsList: NextPage<PostsListProps> = () => {
  const { loading, error, data } = useQuery<PostsData>(POSTS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {JSON.stringify(error)}</p>;

  const {posts} = data;
  if (!posts) return null;

とりあえず: anyをつけとけば回避できるだろうと考えたが、エラーは消えない。

解決方法

// @ts-ignore をつける

エラーの出る行の1行上に// @ts-ignoreをつけると、とりあえずエラー表示は消えます。

:anyをつける

:anyをつけるところがいけませんでした。以下のように:anyをつければエラーが出なくなります。

const {posts}:any = data;

感想

本当はanyも使わない方がよいので、徐々に勉強して行きたいです。