TypeScript 検証が正しく機能しない
P粉269847997
P粉269847997 2024-03-20 09:14:31
0
1
342

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 を使用していますが、なぜエラーが発生しないのかわかりますか? 

P粉269847997
P粉269847997

全員に返信(1)
P粉872182023

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

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

だから、書くときは

if (response.error) return;

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート