TypeScript 驗證無法正常運作

Question

我在 TypeScript 驗證方面遇到問題。

從我自己的鉤子中，我得到了一個類型為 Post[] | 的陣列（posts）。未定義。

然後我在該陣列上使用Array.prototype.map。 TypeScript 應該給出類似"'posts' is likely 'undefined'" 的錯誤，並讓我將程式碼從posts.map 更改為posts?.map.不幸的是，我沒有錯。

我截圖來解釋我的意思：

usePosts 實作：

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;

我使用 Visual Studio Code，你知道為什麼我沒有收到錯誤嗎？

Answer 1

如果我們查看文件了解如何為了在 TypeScript 中使用 useQuery，我們遇到了 amswer。

useQuery 傳回一個聯合類型，這樣如果我們檢查回應是否成功，語言就知道需要定義 data。

因此，當你寫作時

if (response.error) return;

TypeScript 決定條件傳回後的任何程式碼都具有已定義的 data 屬性。