Pengesahan TypeScript tidak berfungsi dengan betul

Question

Saya menghadapi masalah dengan pengesahan TypeScript.

Dari cangkuk saya sendiri, saya mendapat sejenis Post[] | 的数组（posts）。未定义.

Saya kemudian menggunakan Array.prototype.map。 TypeScript 应该给出类似 "'posts' is likely 'undefined'" 的错误，并让我将代码从 posts.map pada tatasusunan itu untuk menukar kepada siaran?.peta Malangnya, saya tidak mendapat ralat.

Saya mengambil tangkapan skrin untuk menerangkan maksud saya:

usePosts pelaksanaan:

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;

Saya menggunakan Kod Visual Studio, adakah anda tahu mengapa saya tidak mendapat ralat?

Answer 1

Jika kita melihat dokumentasi untuk memahami cara menggunakan useQuery dalam TypeScript, kita akan menemui amswer.

useQuery 返回一个联合类型，这样如果我们检查响应是否成功，语言就知道需要定义 data Mengembalikan jenis kesatuan supaya jika kita menyemak sama ada respons berjaya, bahasa tahu untuk menentukan

.

Jadi apabila anda menulis

if (response.error) return;

dataTypeScript menentukan bahawa sebarang kod selepas pemulangan bersyarat mempunyai atribut

yang ditentukan. 🎜