La validation TypeScript ne fonctionne pas correctement

Question

J'ai des problèmes avec la validation TypeScript.

De mon propre crochet, j'ai eu un type de Post[] | 的数组（posts）。未定义.

J'ai ensuite utilisé Array.prototype.map。 TypeScript 应该给出类似 "'posts' is likely 'undefined'" 的错误，并让我将代码从 posts.map sur ce tableau pour passer à posts?.map Malheureusement, je n'ai eu aucune erreur.

J'ai pris une capture d'écran pour expliquer ce que je veux dire :

Implémentation de 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;

J'utilise Visual Studio Code, savez-vous pourquoi je n'obtiens pas l'erreur ?

Answer 1

Si on regarde la documentation pour comprendre comment utiliser useQuery en TypeScript, on tombe sur amswer.

useQuery 返回一个联合类型，这样如果我们检查响应是否成功，语言就知道需要定义 data Renvoie un type d'union pour que si l'on vérifie si la réponse a réussi, le langage sache définir

.

Alors quand tu écris

if (response.error) return;

dataTypeScript détermine que tout code après un retour conditionnel a un attribut défini. 🎜