Die TypeScript-Validierung funktioniert nicht ordnungsgemäß

Question

Ich habe Probleme mit der TypeScript-Validierung.

Von meinem eigenen Haken habe ich eine Art Post[] | 的数组（posts）。未定义 bekommen.

Ich habe dann Array.prototype.map。 TypeScript 应该给出类似 "'posts' is likely 'undefined'" 的错误，并让我将代码从 posts.map für dieses Array verwendet, um zu posts?.map zu wechseln. Leider habe ich keine Fehler erhalten.

Ich habe einen Screenshot gemacht, um zu erklären, was ich meine:

usePosts-Implementierung:

import axios from "axios";
import { useQuery } from "@tanstack/react-query";

interface Post {
    id: number;
    title: string;
    body: string;
    userId: number;
  }

  const usePosts = () => {
    const fetchPosts = () =>
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.data);

    return useQuery<Post[], Error>({
        queryKey: ["posts"],
        queryFn: fetchPosts,
        staleTime: 10 * 1000
    });
  }

  export default usePosts;

Ich verwende Visual Studio Code. Wissen Sie, warum ich die Fehlermeldung nicht erhalte?

Answer 1

如果我们查看文档了解如何为了在 TypeScript 中使用 useQuery，我们遇到了 amswer。

useQuery 返回一个联合类型，这样如果我们检查响应是否成功，语言就知道需要定义 data。

因此，当你写作时

if (response.error) return;

TypeScript 确定条件返回后的任何代码都具有已定义的 data 属性。