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も使わない方がよいので、徐々に勉強して行きたいです。