Búsqueda de sitios web

reactjs - Crear un hook personalizado sin pasar props en React con Typescript


Soy nuevo en aprender React con Typescript y hasta ahora, he leído mucho sobre tipar props y simplemente no entiendo cómo crear un hook personalizado sin tener que pasar props, aquí hay un ejemplo:

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;

En este caso, ESlint está diciendo que const usePosts =() => ... le falta el tipo de retorno en la función.

Respuesta #1

puedes probar esto (corté tu ejemplo en varios archivos para más claridad):
tus hooks solo agregan el tipo de retorno así:
usePost.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;

puedes ver un ejemplo de tu código en este sandbox