Tengo un gancho de reacción personalizado para hacer llamadas a la API:
const useFetch: (string) => Record<string, any> | null = (path: string) => { const [data, setData] = useState<Record<string, any> | null>(null); var requestOptions: RequestInit = { method: "GET", redirect: "follow", }; const fetcher = async () => { const res = await fetch( process.env.REACT_APP_API_ENDPOINT + path, requestOptions ); const json = await res.json(); setData(json.data); }; useEffect(() => { fetcher(); }, [path]); return data; }; Mi problema es que uso este enlace para llamar a muchos puntos finales diferentes, por lo que no puedo especificar el tipo de data en el enlace. Pero cuando llamo al enlace, sé cuáles son los datos para ese punto final específico, por lo que quiero especificar un tipo para la variable que almacena el valor de retorno como:
const data: { name: string } | null = useFetch('/example-end-point'); Esto es lo que quiero lograr, pero aparece este error: Property 'name' is missing in type 'Record<string, any>' but required in type '{ name: string; }'.
Usar any para el tipo de devolución funciona, pero no quiero recurrir a eso si hay otras formas de lograrlo.
Esto es algo que Generic Types puede resolver, absolutamente puede permitir que los tipos de variables se pasen a su enlace único con un poco de reescritura de código.
Echar un vistazo...
const useFetch: <T>(string) => Record<T> | null = (path: string) => { const [data, setData] = useState<Record<T> | null>(null); var requestOptions: RequestInit = { method: "GET", redirect: "follow", }; const fetcher = async () => { const res = await fetch( process.env.REACT_APP_API_ENDPOINT + path, requestOptions ); const json = await res.json(); setData(json.data); }; useEffect(() => { fetcher(); }, [path]); return data; };y luego, cuando lo llame, puede hacer lo siguiente.
type MyData = { name: string, } const data: MyData | null = useFetch<MyData>('/example-end-point');Probablemente desee usar unknown en lugar de any y luego reducir el tipo en otro lugar realizando algún tipo de protección, es decir
const useFetch: (string) => unknown = (path: string) => { ... const user = useFetch('/example-end-point') if (!user || !user.name) throw new Error("Bad data") const data: { name: string } = userDe esta manera, obtiene la verificación de datos en tiempo de ejecución, así como la verificación de tipos.