reactjs - 使用 Typescript 在 React 中创建自定义钩子(Hook)而不传递 Prop

Question

我是使用 Typescript 学习 React 的新手，到目前为止，我已经阅读了很多关于打字 Prop 的内容，但我只是不明白如何创建自定义钩子(Hook) 没有 必须通过 Prop ，这里有一个例子:

import { useState, useEffect, FunctionComponent, ReactElement } from 'react';
import axios from 'axios';

interface PostData {
    userId: number,
    id: number,
    title: string,
    body: string
}


const usePosts = () => {
  const [posts, setPosts] = useState<PostData[]>([]);

  const getPosts = () => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.error(error);
      
    })
  };

  useEffect(() => {
    getPosts();
  }, []);

  return {
    posts,
  };
};

export default usePosts;

在这种情况下，ESlint 表示 const usePosts = () => ... 是缺少函数的返回类型。

Answer 1

你可以试试这个(为了更清楚，我把你的例子剪成多个文件):
你的钩子(Hook)只是像这样添加返回类型:
使用Post.hook.tsx

import { useState, useEffect } from 'react';
import axios from 'axios';

interface PostData {
    userId: number,
    id: number,
    title: string,
    body: string
}


const usePosts = ():PostData[] => {
  const [posts, setPosts] = useState<PostData[]>([]);

  const getPosts = () => {
    axios.get<PostData[]>('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      console.log(response.data)
     setPosts(response.data)
    })
    .catch(error => {
      console.error(error);
      
    })
  };

  useEffect(() => {
    getPosts();
  }, []);

  return posts;
};

export default usePosts;

您可以在 sandBox 中查看您的代码示例