TypeScript 検証が正しく機能しない

Question

TypeScript の検証で問題が発生しました。

私自身のフックから、タイプ Post[] | の配列 (ポスト) を取得します。 ＃＃＃ 定義されていません。

次に、その配列で

Array.prototype.map を使用します。 TypeScript は "'posts' is possible 'unknown'" のようなエラーを表示し、コードを posts.map から posts?.map に変更させます。残念ながら、エラーは発生しません。

意味を説明するためにスクリーンショットを撮りました:

usePosts 実装:

「axios」から axios をインポートします。 import { useQuery } から "@tanstack/react-query"; インターフェイスポスト{ ID番号; タイトル: 文字列; 本体: 文字列; ユーザー ID: 番号; } const usePosts = () => { const fetchPosts = () => アクシオス .get('https://jsonplaceholder.typicode.com/posts') .then((res) => res.data); return useQuery<Post[], Error>({ queryKey: ["投稿"], queryFn: fetchPosts、 staleTime: 10 * 1000 }); } デフォルトの usePosts をエクスポート;

Visual Studio Code を使用していますが、なぜエラーが発生しないのかわかりますか?

Answer 1

TypeScript で useQuery を使用する方法を理解するために ドキュメント を見ると、答えが見つかります。

useQuery 共用体型を返します。これにより、応答が成功したかどうかを確認すると、言語は data を定義する必要があることがわかります。

だから、書くときは

if (response.error) return;

TypeScript は、条件が返された後のコードには data 属性が定義されていると判断します。